Witam,

Jakiś czas temu prowadziłem dyskusję na temat collapsing margins. Włśnie
doświadczam "dobrodziejstwa" tego, z czym nie wiem za bardzo jak sobie
poradzić. Banalna sprawa. Zdefiniowałem sobie <hr> jako:

hr {
height: 0px;
margin-top: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgba(255,255,255,0.4);
border-right-style: none;
border-left-style: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgba(0,0,0,1);
margin-bottom: 10px;
padding: 0px;
}

Założenie jest takie, że nie stosuję grafiki. Chciałbym aby HR generował
odstęp od góry i od dołu i miał 2 linie poziome o różnych parametrach
takich jak powyżej. Gdy umieściłem HR pod elementem, który nie blokuje tej
upierdliwej funkcjonalności (collapsingu), to rozjechał mi się layout
strony. Czy macie jakiś pomysł aby HR nie psuł niczego? Mam na myśli to aby
zawsze stanowił blok o wysokości 22px z 2 liniami pośrodku wysokości i nie
wpływał na elementy powyżej i poniżej niezależnie od tego jakie one by nie
były.

do góry

W dniu 2012-02-06 12:00, Marek pisze:
> Witam,
>
> Jakiś czas temu prowadziłem dyskusję na temat collapsing margins. Włśnie
> doświadczam "dobrodziejstwa" tego, z czym nie wiem za bardzo jak sobie
> poradzić. Banalna sprawa. Zdefiniowałem sobie<hr> jako:
>
> hr {
> height: 0px;
> margin-top: 10px;
> border-bottom-width: 1px;
> border-bottom-style: solid;
> border-bottom-color: rgba(255,255,255,0.4);
> border-right-style: none;
> border-left-style: none;
> border-top-width: 1px;
> border-top-style: solid;
> border-top-color: rgba(0,0,0,1);
> margin-bottom: 10px;
> padding: 0px;
> }
[...]

Swego czasu też "mordowałem się" z elementem <hr>. Zrobiłem jednak inaczej:

<div><hr/></div>

div hr{
position:absolute;
top:0;
left:-1000em;
}

A element <div> to już łatwiej się stylowało :-)

--
Cezary Tomczyk
http://www.ctomczyk.pl/

do góry

Dnia Mon, 06 Feb 2012 13:31:14 +0100, Cezary Tomczyk napisał(a):

> <div><hr/></div>

łoł
Co za konstrukcja! :-D

Byłoby ok lecz czasem jakieś edytory WYSIWYG mogą nie dać sie naginać do
wstawiania takich cudów. Pewnie się nie da inaczej lecz może ktoś jeszcze
zna jakąś sztuczkę?

do góry

W dniu 2012-02-06 13:54, Marek pisze:
> Dnia Mon, 06 Feb 2012 13:31:14 +0100, Cezary Tomczyk napisał(a):
>
>> <div><hr/></div>
>
> łoł
> Co za konstrukcja! :-D
>
> Byłoby ok lecz czasem jakieś edytory WYSIWYG mogą nie dać sie naginać do
> wstawiania takich cudów. Pewnie się nie da inaczej lecz może ktoś jeszcze
> zna jakąś sztuczkę?

Ze stylowaniem elementu <hr/> dałbym sobie spokój. Jego implementacja w
każdej przeglądarce jest pokręcona (w sensie możliwości jego
ostylowania). Nie wiem, czy już najnowsze wersje przeglądarek na dzień
dzisiejszy dają radę z <hr/>-em, ale warto to sprawdzić. :-)

--
Cezary Tomczyk
http://www.ctomczyk.pl/

do góry

Dnia Mon, 06 Feb 2012 14:04:43 +0100, Cezary Tomczyk napisał(a):

>
> Ze stylowaniem elementu <hr/> dałbym sobie spokój. Jego implementacja w
> każdej przeglądarce jest pokręcona (w sensie możliwości jego
> ostylowania). Nie wiem, czy już najnowsze wersje przeglądarek na dzień
> dzisiejszy dają radę z <hr/>-em, ale warto to sprawdzić. :-)

Nie jest już tak źle jak kiedyś było :-) Pod IE9, Chrome i FF wygląda
identycznie :-)

do góry

W dniu 2012-02-06 12:00, Marek pisze:
> Gdy umieściłem HR pod elementem, który nie blokuje tej
> upierdliwej funkcjonalności (collapsingu), to rozjechał mi się layout
> strony.

Badz zatem konsekwentny i rob tak, jak postulowales w tamtym watku:
margin-top:0;
margin-bottom:10px;


Lepsze rozwiazanie mozna zaproponowac widzac caly kod, teraz to wrozenie
z fusow.


--
NotBear

do góry

Dnia Mon, 06 Feb 2012 15:15:07 +0100, NotBear napisał(a):

> W dniu 2012-02-06 12:00, Marek pisze:
>> Gdy umieściłem HR pod elementem, który nie blokuje tej
>> upierdliwej funkcjonalności (collapsingu), to rozjechał mi się layout
>> strony.
>
> Badz zatem konsekwentny i rob tak, jak postulowales w tamtym watku:
> margin-top:0;
> margin-bottom:10px;

Konsekwentny? :-) Tam nie mówiliśmy o HR lecz o P, Hx, DIV. To po pierwsze.
A po drugie jak zapewnić w takim przypadku odstęp od góry? Chyba raczej się
nie da...

> Lepsze rozwiazanie mozna zaproponowac widzac caly kod, teraz to wrozenie
> z fusow.

Tylko co masz na myśli? Każdą możliwą kombinację elementów z HR ? Sporo
tego będzie :-D Nie jestem w stanie przewidzieć jaki element bedzie
przylegał do <HR>. Dla urealnienia analizy załóżmy, że każdy, jaki w HTMLu
istnieje.

do góry

W dniu 2012-02-06 18:19, Marek pisze:
> Konsekwentny? :-) Tam nie mówiliśmy o HR lecz o P, Hx, DIV. To po pierwsze.

Wymieniales jeszcze UL oraz "itp". HR nature ma blokowa, wiec dlaczego
go nie wlaczyc do grona "itepow"? :-)


> A po drugie jak zapewnić w takim przypadku odstęp od góry? Chyba raczej się
> nie da...

Proponowales, cytuje: "generalna zasada: zerujemy górne marginesy
elementp P, Hx, UL itp i ustawiamy dolne. Wszystko będzie wyglądać jak
należy."

Ja proponuje szybko zapomniec o tej "zasadzie", zaufac collapsingowi i
cieszyc sie spelniajacym Twoje wymagania HRem w postaci jaka
przytoczyles - z oboma marginesami.


>> Lepsze rozwiazanie mozna zaproponowac widzac caly kod, teraz to wrozenie
>> z fusow.
> Tylko co masz na myśli? Każdą możliwą kombinację elementów z HR ?

Nie. Wystarczy ta, ktora spowodowala, ze rozjechal Ci sie layout. Ale
wraz ze wspomnianym layoutem. Wtedy bedzie mozna wykombinowac niepsujace
rozwiazanie.


> Sporo tego będzie :-D Nie jestem w stanie przewidzieć jaki element bedzie
> przylegał do<HR>.Dla urealnienia analizy załóżmy, że każdy, jaki w HTMLu
> istnieje.

Raczej dla ODrealnienia. Czesci kombinacji zabrania specyfikacja jezyka.
Czesci - zdrowy rozsadek. Nie ma sensu teoretyzowac.



--
NotBear

do góry

Dnia Mon, 06 Feb 2012 22:45:22 +0100, NotBear napisał(a):

> W dniu 2012-02-06 18:19, Marek pisze:
>> Konsekwentny? :-) Tam nie mówiliśmy o HR lecz o P, Hx, DIV. To po pierwsze.
>
> Wymieniales jeszcze UL oraz "itp". HR nature ma blokowa, wiec dlaczego
> go nie wlaczyc do grona "itepow"? :-)

Dlatego ponieważ HR służy do rozdzielania graficznego elementów treści. Co
mi z elementu, w którym nie da się ustawić obu odległości (od góry i od
dołu)? Swoją drogą dobry argument do porzedniego wątku pokazujący
absurdalnośc mechanizmu collapsingu. Marginesy są po to aby mieć możliwość
ich użycia, a tu idą one w rozwalenie layoutu i to w zupełnie innym miejscu
strony.
>
>> A po drugie jak zapewnić w takim przypadku odstęp od góry? Chyba raczej się
>> nie da...
>
> Proponowales, cytuje: "generalna zasada: zerujemy górne marginesy
> elementp P, Hx, UL itp i ustawiamy dolne. Wszystko będzie wyglądać jak
> należy."

Heh.. owszem i generalnie tak to czynię. No ale co to za argument? Czego ma
dowodzić? Tego, że jest jakiś element, dla którego powyższa łata nie działa
(bo potrzebujemy górnego marginesu)? No jest, i próbuję coś z tym zrobić
:-)

Collapsing znów atakuje a ja próbuję się bronić szukając kolejnej łaty -
specjalnej dla HRów.

> Ja proponuje szybko zapomniec o tej "zasadzie", zaufac collapsingowi i
> cieszyc sie spelniajacym Twoje wymagania HRem w postaci jaka
> przytoczyles - z oboma marginesami.

Nie da rady - w tym sęk. Podawałem nawet przykład tego w poprzednim wątku.
Collapsing przenika przez elementy po to aby wypłynąć w "przypadkowym"
miejscu layoutu. Nagle ni z gruszki ni z pietruszki dostajesz odstęp miedzy
elementami, które nigdy go wcześniej nie miały zanim ktoś gdzieś dalej w
kodzie zastosował HR. Powtórzę ten przypadek poniżej.

>>> Lepsze rozwiazanie mozna zaproponowac widzac caly kod, teraz to wrozenie
>>> z fusow.
>> Tylko co masz na myśli? Każdą możliwą kombinację elementów z HR ?
>
> Nie. Wystarczy ta, ktora spowodowala, ze rozjechal Ci sie layout. Ale
> wraz ze wspomnianym layoutem. Wtedy bedzie mozna wykombinowac niepsujace
> rozwiazanie.

Ok, oto obiecany wcześniej przypadek (w uproszczeniu). W praktyce ten HR
może wystąpić w różnych miejscach layoutu. Sam layout zawiera więcej
podobnych sekcji. Mało tego - mogą powstać nowe i w założeniu HR w nich nie
ma dokonywać destrukcji. Jak tego dokonać inaczej niż Cezary radził? Nie
wiem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
hr {
margin-top: 50px;
}
</style>
</head>

<body>
<div style="background-color:#F00">ten DIV jest odsunięty od następnego
gdyż 'bąbelkował' górny margines HR</div>
<div style="background-color:#009900">
<hr>
bla bla bla
</div>
</body>
</html>

Załózmy, że DIVy są elementami layoutu. Usuń HR a DIVy zaczną ładnie
przylegać. Pewnie zaproponujesz rozwiązanie aby w drugim DIVie ustawić
padding górny na 1 px i przesunąc DIVa o 1px po to aby zniwelować ten
niepotrzebny padding. Zapomnijmy o takim rozwiązaniu - jest chore. Powstaną
tylko kolejne problemy.

do góry

W dniu 2012-02-07 19:37, Marek pisze:
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
> <style type="text/css">
> body {
> margin: 0;
> padding: 0;
> }
> hr {
> margin-top: 50px;
> }
> </style>
> </head>
>
> <body>
> <div style="background-color:#F00">ten DIV jest odsunięty od następnego
> gdyż 'bąbelkował' górny margines HR</div>

Też masz się czym stresować.

> <div style="background-color:#009900">

<div style="background-color:#009900;overflow:auto">

U mnie (Fx) działa :-)

artur

> <hr>
> bla bla bla
> </div>
> </body>
> </html>

do góry