ďťż

[css] brak marginesu po float - foto

Podstrony

telcocafe

niby prosty problem ale za często mi się zdarza chodzi o to że mam diva który ma FLOAT:left ustawiony a pod nim znacznik blokowy P (lub inny div) display:block oraz CLEAR:both

ZOBACZ OBRAZEK: http://img185.images.../pytanierv9.jpg
LINK DO CSS: http://members.lycos...hip/bramka.html

PROBLEM:
dlaczego jak daje znacznikowi p poniżej margin 5px to działa wszedzie tylko nie na góre :| po prostu nie odsuwa mi tego diva z flołtem ????

Tak czesto sie robi jak mam CONTAINER a wew niego rozne divy z float i potem robie margin-bottom:20px w divie Container i nie chce mi już odsunąć od dołu tylko musze stopką robić odstęp :| czemu sie tak dzieje ?

Zamiast margin-top daj padding-top.

to nie załatwia sprawy bo ja chce dojść dlaczego tak się dzieje tak to mogę sobie dać i posiition absolute i tez ustawie jak mi sie podoba ale chce to zrobić w jak najkrótszy sposób i jak najbardziej poprawnie.

I ogólnie chodzi o to czemu mając container a wewnątrz niego ze 2 divy majace float potem nie działają żadne marginesy bottom :|

Ech... To jest najbardziej poprawnie.

Dzieje, się tak ponieważ twój element z podpisem nie ma floata i "nie widzi" za bardzo tych bloków nad nim. Tutaj sie kłania znajomość css-a i właściwości "float". Jakbyś dał dla twojej stopki "float:left" a tuż pod nią dał
<div style="clear:both;"></div>

To bedzie działać wraz z marginesem.
Użytkownik polasek edytował ten post 20 maj 2008, 07:58

masz racje ale czy to oznacza że jak choć jednemy divowi wewnątrz kontenera dam float to co musze już wszytskim dawac zeby było poprawnie? po co jest clear:both ? w takim razie?

Nie musisz dawać wszystkim floata. Poprostu trzeba była tam użyc paddinga i by było po kłopocie.
Clear jest to przyleganie do poprzedzających elementów pływających (czyli tych mających float).
Jeżli ustawiesz na LEFT to lewy bok nie bedzie przylegał itd analogicznie.
http://www.kurshtml....cjonowanie.html

A clear:both To taka mała sztuczka webmasterów (czyli tego który składa grafiki na szablon) pozwalająca na tworzenia layoutów wielokolumnowych tylko za pomocą divów i bez zbędnych floatów. Jak masz 2 bloki
#blok2 { float: left; height: 50px; 1px solid black; } #blok { border: 1px solid red; } <div id="blok"> <div id="blok2"></div> </div>

Jak zauważysz wysokość bloku blok nie zostanie rozciągnięta do 50px ponieważ blok2 jest elementem pływającym i nie wpływa na wysokość rodzica. Dlatego stosuje się tą małą sztuczkę w clearem. Po blok2 wstawiasz <div style="clear:both"></div> Co powoduje, że ten clearer występuje tuż POD elementy pływającym i w dodatku on sam nie jest elementem pływającym przez to jest już widziany przez blok. Dlatego wysokość naszego głównego bloku jest już prawidłowa.
Użytkownik polasek edytował ten post 20 maj 2008, 08:29
polasek dzieki że ktoś w ogóle się zainteresował moim problemem ;) ale ja zobrazuje teraz problemy zobacz:

zrobiłem przykładowy szablon żeby zarysować problem -> LINK

PROBLEM 1:
#container margin-bottom:20px - dlaczego w IE nie ma tego marginesu / w FF jest

PROBLEM 2:
#stopka clear:both; margin-top:10px - dlaczego FF tego nie widzi? w IE działa

PROBLEM 3:
Dlaczego w FF #container ucieka mi ponad flołty jeśli dam stopce float:left a wyłączę clear:both?

#stopka z takim kodem:
{
width:800px;
height:10px;
/* clear:both; */
float:left;
background:#fff;
margin-top:10px;
}

* { margin:0px; padding:0px; } body { text-align:center; background-color:blue; } div#container { width:800px; background:green; margin:0 auto; margin-bottom:20px; margin-top:20px; border:1px solid red; } div#top { width:800px; height:200px; background:#000; } div#left { width:200px; height:600px; background:#c0c0c0; float:left; } div#right { width:600px; height:600px; background:#551122; float:right; } div#stopka { width:800px; height:10px; clear:both; background:#fff; margin-top:10px; }

<body> <div id="container"> <div id="top"></div> <div id="left"></div> <div id="right"></div> <div id="stopka"></div> </div> </body>

Dołaczmy to sobie do styli
.clear { clear: both; }
1) Błędy IE. po #container daj naszego "sprzątacza" (czyli<div class="clear"></div>) A czy nie lepiej tutaj zastosować padding-bottom i top dla body?
2) Zapadanie marginesów.Zastosuj padding-top. Poczytaj o błędach IE i o quirsk mode.
3) Bo nie czytasz co napisałem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"><head><title>bledy z float</title> <style type="text/css"> * { margin:0px; padding:0px; } body { text-align:center; background-color:blue; padding-bottom: 20px; padding-top: 20px; } div#container { width:800px; background:green; margin:0 auto; border:1px solid red; } div#top { width:800px; height:200px; background:#000; } div#left { width:200px; height:600px; background:#c0c0c0; float:left; } div#right { width:600px; height:600px; background:#551122; float:right; } div#stopka { padding-top: 10px; width:800px; height: 20px; clear: both; background:#fff; } </style></head><body> <div id="container"> <div id="top"></div> <div id="left"></div> <div id="right"></div> <div id="stopka"></div> </div> </body></html>
Użytkownik polasek edytował ten post 20 maj 2008, 10:55

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL