Re: HTML - funkcjonalność znaczników... - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › HTML - funkcjonalność znaczników... › Re: HTML - funkcjonalność znaczników...

Data: 2012-01-08 13:28:17
Temat: Re: HTML - funkcjonalność znaczników...
Od: Marek <p...@s...com> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]
Dnia Sun, 08 Jan 2012 02:37:57 -0000, porneL napisał(a):

> Zapewne chodzi ci o kontenery:
>
> <div><div><div><h1>

Tak, już mi się wszystko miesza :-) Przepraszam.

>
>> Wtedy rozwali nam inny fragment strony a tak przynajmniej mam to zjawisko
>> lokalnym. Zdarzało mi się luż szukać przyczyny "dziwnego" odstępu mimo iż
>> nie było go zdefiniowanego w CSS/HTML. Parę znaczników dalej znalazł się
>> winowajca bo akurat redaktor CMS wprowadził <p> do treści. No i godzina z
>> dnia pracy uciekła zanim się połapałem w czym rzecz.
>
> Zapada się max 1 odstęp, więc nie musisz daleko szukać - do najbliższego
> elementu z widoczną treścią/obramowaniem.

Właśnie: z widoczną treścią - kolejny warunek do przeanalizowania. W
poniższym przykładzie kontener pomarańczowy nie ma treści i w związku z tym
margines górny od H1 przedrze się przez niego rozwalając stronę jeszcze
wyżej. To jest to o czym mówiłem i spotykałem w praktyce. Winowajca może
być daleko w kodzie. Zauważ co się dzieje. Jeśli w pomarańczowym DIVie był
jakiś tekst a klient rozmyślił się po roku czasu i webmaster usunął ten
tekst to w zupełnie innym miejscu strony pojawia się tajemnicza biała
dziura. Wtedy biedny webmaster zaczyna szukać przyczyny najpierw w miejscu
gdzie grzebał bo być może przypadkiem jakiś znacznik domykający skasował
niechcący itp. Po godzinie odkrywa, że chodzi o collapsing margins
wędrujące po całym dokumencie gdzieś z czeluści kodu. Poniższa struktura
jest trywialna. Czasem strony są dużo bardziej złożone i trzeba sprawdzić
skąd następuje to bąbelkowanie. Gdy mamy np. 5 wewnętrznych DIVów poniżej
pomarańczowego, to każdy z nich może bąbelkować kukułcze jajo w postaci
zbednego marginesu do góry dokumentu. A to z kolei oznacza kupę straconego
czasu - co niegdyś było moją bolączką aż nauczyłem się walczyć z
collapsingiem.

<!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;
}
h1 {
margin-top:20px;
margin-bottom: 10px;
}
p {
margin-top: 50px;
margin-bottom: 10px;
}
</style>
</head>

<body>
<div style="background-color:#CC0000">ten DIV jest odsunięty od następnego
gdyż górny margines H1 'bąbelkował' poza granice dwóch DIVów</div>
<div style="background-color:#FF9900">
<div style="background-color:#009900">
<h1>to jest tytuł</h1>
<p>to jest P</p>
</div>
</div>
<div style="background-color:#CC0000">ten DIV jest odsunięty od
poprzedniego gdyż wyciekł poza granice poprzedniego dolny margines P</div>
</body>
</html>

>
>> Border transparent da Ci przejrzystą linię więc nie załatwi sprawy. Wiem,
>> że dorzucając padding a potem podsuwając marginesem można to "naprawić"
>> ale po co się tak szamotać?
>
> Żeby się szamotać od czasu do czasu, a nie z każdym odstępem i każdym
> zagnieżdżonym elementem, który powoduje zwielokrotnienie odstępu.

No i do sedna dotarliśmy. Gdyby nie collapsing to nikt nie musiałby się
szamotać nawet od czasu do czasu :-))) O tym właśnie mowa.

> I dlatego CSS załatwia za ciebie odstępy w tak dużej liczbie przypadków,
> że nawet nie zdajesz sobie z tego sprawy.
>
> Zrób sobie box model wordowy:
>
> * {margin-top:0 !important; margin-bottom:0 !important;}
>
> i używaj tylko i wyłącznie padding i border-top: transparent do robienia
> odstępów. Nic się nie zapadnie i zobaczysz, jak ci tego brakuje.

Hmm... Przyznam Ci się, że nie przypominam sobie przypadku, w którym
wykorzystywałem collapsing natomiast w każdym projekcie walczę z nim. Walka
zazwyczaj ogranicza się całe szczęści do tej części dokumentu, która
pochodzi np. z CMS. Buduję zapory aby poza tą sekcję żaden z marginesów nie
uciekł gdyż nie wiem jaki kod zostanie wstrzyknięty z CMS - to zależy od
redaktora.
Poza sekcją redakcyjną - np. systemy menu chcę mieć ścisłą kontrolę nad
odległościami miedzy elementami. Nie ma miejsca na to aby jakiś margines
wyniósł MAX(coś, coś jeszcze). Margines widoczny ma równać się konkretnej
wartości. Wtedy zazwyczaj zeruję marginesy jeśli mogę sobie na ten komfort
pozwolić, a jeśli nie - to walczę z nimi dostawiając niepotrzebne elementy
o zerowej wysokości gdy nie mogę zastosować overflow:hidden lub borderów (a
zazwyczaj nie mogę).