[HTML][CSS] Dostosowywanie <hr> Opcje

[Gabrielx]

Witam.
Chciałbym dostosować długość linii, do długości strony.

Kod

hr {margin-top:10px;border: 1px solid #bdc1d5; height: 800px; width: 1px; float:left; }

Podawanie wartości Height jako % nic nie daje.

[DiH]

height = wysokość
width = szerokość

[Gabrielx]

Zapomniałem dodać że chciałbym aby dostosowywało automatycznie do wysokości diva(hr jest w divie)

[mortus]

<hr> to linia pozioma, która domyślnie przyjmuje szerokość równą 100% (zatem jeżeli jest w div-ie, który ma konkretną szerokość, to przyjmie szerokość tego div-a). Jeżeli chcesz zrobić linię pionową, to nie za pomocą <hr>.

[Gabrielx]

Rozumiem Czyli tylko i jedynie obrazek, tak?

Czyli mimo to że wygląda jak linia pionowa, to wcale nią nie jest ;]

[mortus]

No nie jest, nadanie jej stylowi atrybutu float: left; nie zamieni jej w linię pionową. Najlepszym sensownym rozwiązaniem wydaje się być obrazek tła. No chyba, że masz zagnieżdżone div-y w div-ie, to wtedy się możesz pobawić z marginesami, dopełnieniami i obramowaniem div-a w środku (border-left lub border-right może dać pożądane efekty).

Ten post edytował mortus 19.03.2010, 10:08:59

[bemol]

a ja bym dał divowi, w którym będzie tekst obrazek jako tło, o szerokości tego diva i wysokości auto i w konkretnym miejscu dał piksel o kolorze tej linii.

[Gabrielx]

Skorzystałem w tym wypadku z rozwiązania border


A co radzicie zrobić w takich przypadkach(zarówno lewa część jak i prawa to DIV, nie żadna tabelka)?
1.
http://img697.imageshack.us/img697/371/testvb.png
2.
Drugi przypadek wygląda tak samo jak w podanym linku, tylko że bez linii bocznych. Można co prawda skorzystać z rozwiązania border, lecz jeśli np. wstawię ją do lewego diva, to w przypadku gdy prawa część będzie zawierała więcej tekstu, linia się nie powiększy.

[mortus]

Może tak?

[HTML] pobierz, plaintext 
<div id="content">
    <div id="lewy"></div>
    <div id="srodek"></div>
    <div id="prawy"></div>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#content {
    background: transparent url("adres/obrazka.jpg") repeat-y;
}
[CSS] pobierz, plaintext 

No i oczywiście obraz ma niewielką wysokość, szerokość całego contentu i trzy pionowe kreski w odpowiednich miejscach.

Ten post edytował mortus 29.03.2010, 20:45:39