Problem ze znacznikiem blokowym i jego marginesem w divie... Opcje

[net83user]

Mam oto taki kod:

[HTML] pobierz, plaintext 
<div style="width:300px;">
 
<div style="width:100px;height:200px;background-color:red;float:left;">MENU</div>
<div style="width:200px;height:200px;background-color:green;float:right;">
          <div style="width:200px;height:50px;background-color:yellow;"><h1>HEADER</h1></div>
     </div>
 
</div>
[HTML] pobierz, plaintext 

Znacznik H1 przesuwa cały DIV w którym się znajduje w dół. Jeśli wpisany jest zwykły tekst (bez znaczników H1), jest tak jak powinno być. Jeśli usunie się margines górny z H1 to także problem znika.

Czy usunięcie marginesu z <h1> to jedyny sposób aby szkielet się nie rozjeżdżał?
Sprawdzane na Firefox3.

P.S. Na forum wcięcia kodu nie są wyświetlane?

Ten post edytował net83user 23.08.2008, 22:16:56

[rybik]

zastosuj CSS master reset, pisze z pamieci i nie pamietam teraz czy dokładnie tak wygląda master reset ale to powinno wystarczyć:

* html {margin: 0; padding:0; border: 0;}

A czemu tak? A o co chodzi?
HTML kiedyś nie znał CSS ani w postaci arkuszy zewnętrznych/wewnętrznych ani w postaci artybutu "style", żeby jednak nie zmuszać webdesignerów do okładania każdego <h1> tagami <font> i jednocześnie zachować specyficzne cechy wyglądu różnych elementów dokumentu (h1, p, ul itp) pozostawiono interpretację większości tagów przegladarkom, przez co wspomniane elementy wyglądają mniej-więcej poprawnie pomimo braku "styla", i tak <h1> jest duży czarny i gruby (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) a lista ma jakieś kropki, nawet jak ich nie ustawimy. Tak, ślicznie ... sam ślicz, tyle, że:
- dopóki nie ustawimy sami cech elementu, jesteśmy skazani na przeglądarkę, zatem <h1> ma swoje domyślne marginesy i wielkosc czcionki
- w różnych przeglądarkach te domyślne cechy sa rózne

Master reset ma za zadanie wstępne wyzerowanie marginesów wewnętrznych i zewnętrznych wszystkich tagów html, tak, aby potem móc samemu je poustawiać, poniważ mniej szkodliwy jest ich brak niż niekontrolowana wartosc, zalezna od przeglądarki, co ma szczególne znaczenie przy precyzyjnym ustawianiu rozmiarów diva.

Zamiast resetować globalnie, możesz też ustawić precyzyjnie te cechy dla stosowanych tagów, tak jak opisane przez Ciebie usunięcie marginesu z H1.
Przy okazji wspomnę, że każdy element floatujący powinien miec równiez ustawione "position: relative".

[net83user]

Zadziałało:

* html{
margin:0;
padding:0;
border:0;
}

Paddingiem reguluję położenie nagłówka.
Dziękuję za pomoc.

Dodatkowo dołączam znalezione w Google informacje na ten temat. Opisany jest także problem z resetowaniem przez "gwiazdkę" oraz z dołączaniem własnego arkusza resetującego:

• Resetowanie CSS. po mojemu | Wasacz, blog
• CSS Tools: Reset CSS
• Eric's Archived Thoughts: Reset Reloaded
• Eric's Archived Thoughts: Resetting Again

Ten post edytował net83user 24.08.2008, 18:15:41