Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem ze znacznikiem blokowym i jego marginesem w divie...
Forum PHP.pl > Forum > Po stronie przeglądarki
net83user
Mam oto taki kod:

  1. <div style="width:300px;">
  2.  
  3. <div style="width:100px;height:200px;background-color:red;float:left;">MENU</div>
  4. <div style="width:200px;height:200px;background-color:green;float:right;">
  5. <div style="width:200px;height:50px;background-color:yellow;"><h1>HEADER</h1></div>
  6. </div>
  7.  
  8. </div>


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?
rybik
zastosuj CSS master reset, pisze z pamieci i nie pamietam teraz czy dokładnie tak wygląda master reset ale to powinno wystarczyć:
Cytat
* 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 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:
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.