[CSS][HTML]Problem z hr Opcje

[Szymciosek]

Witam,
mam taki kod: http://jsfiddle.net/N8RjF/1/

Pytanie: Czemu pozioma linia <hr /> przylega mi do zdjęcia, ale już od tekstu się ładnie odsuwa?

Ten post edytował Szymciosek 16.04.2013, 11:33:40

[Damonsson]

<hr /> to skomplikowany znacznik, odradzam jego używanie. Do każdej przeglądarki musisz pisać na niego praktycznie osobny styl. W Operze np jest wszystko ładnie w Twoim przykładzie.

[Szymciosek]

Czyli co sugerujesz?
<div class="line"></div>

i zakodowanie w css jak ma wyglądać?

Za dużo to nie pomogło: http://jsfiddle.net/E6nG9/2/

[rocktech.pl]

Witam.

Warto zerknąć na przeznaczenie znacznika <hr /> podane w specyfikacji.

There is no need for an hr element between the sections themselves, since the section elements and the h1 elements imply thematic changes themselves.

Co luźno tłumaczy się tak:

Nie ma potrzeby użycia elementu hr pomiędzy sekcjami, gdyż same w sobie wskazują na zmianę tematu.

Polecam użycie reset.css, niweluje to wiele upierdliwości podczas ostylowania strony.

[Szymciosek]

Ok, zapomniałem dodać, ale używam html5reset: http://jsfiddle.net/E6nG9/3/

Pomoże ktoś: http://jsfiddle.net/LFg8a/
css od linii 109.

Nawet jeżeli zmienię na div line: http://jsfiddle.net/LFg8a/1/

[rocktech.pl]

Zerknij teraz ale w wersji wcześniejszej zarówno tekst jak i hr przylegały do zdjęcia @Opera/9.80 (X11; Linux i686; U; pl) Presto/2.10.289 Version/12.02

http://jsfiddle.net/LFg8a/3/

[Szymciosek]

Ale tutaj nie chodzi o odstęp od zdjęcia z boku.
Układ ma pozostać taki jaki jest, ale linia <hr> czy <div line> ma pójść pod zdjęcie i ma mieć OD ZDJĘCIA odstęp powiedzmy 15px czyli margin-top: 15px dla hr.

[Mega_88]

Ale tutaj nie chodzi o odstęp od zdjęcia z boku.
Układ ma pozostać taki jaki jest, ale linia <hr> czy <div line> ma pójść pod zdjęcie i ma mieć OD ZDJĘCIA odstęp powiedzmy 15px czyli margin-top: 15px dla hr.

Daj coś takiego w CSS i zobacz.

[HTML] pobierz, plaintext 
hr {
float:left;
width:100%;
margin:15px 0px 0px 0px;
}
 
[HTML] pobierz, plaintext 

[Szymciosek]

Dzięki. http://jsfiddle.net/LFg8a/4/
Jakieś słowo wyjaśnienia?

[Mega_88]

Nie wiem czy to jest poprawnie dla hr -> float:left, ale jeżeli nie użyjesz dla elementu "float:left" to on nada automatycznie jakiś margin/top/left/... dla elementu. Dajesz float:left i przylega do obrazka odstęp określasz marginem i pod każdą przeglądarką powinno być tak samo.

Przetestuj sobie z float:left i bez niego ( bez float:left nie zadziała margin-top z tego co pamietam )

Ten post edytował Mega_88 16.04.2013, 14:06:10