+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] Float, Clear, Position (/thread-css-float-clear-position)
[CSS] Float, Clear, Position - Damian19 - 17-10-2011
Witam.
Mam problem z floatami.
Otóż mam 3 listy ul które są w divie z szarym tłem (tło się rozciąga względem zawartości).
Do każdej z nich przypisałem float: left; aby były obok siebie, a nie jedna pod drugą.
Po użyciu float: left; szare tło czyli div w którym są ul popsuło się(tak jakby nic w nim nie było).
Jaką funkcję przypisać by mimo "floatów" div był normalny ?
PS. Próbowałem clear: none;, clear: both; lecz nic nie dało.
PS 2. Każda lista ul ma swój div.
Pozdrawiam.
RE: [CSS] Float, Clear, Position - Kartofelek - 17-10-2011
a próbowałeś overflow:hidden dla rodzica?
A najlepiej poszukaj w necie czegoś takiego jak clearfix. No dobra - poszukam za ciebie:
Kod:
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }dodaj dodatkową klasę clearfix dla rodzica. Bez overflow:hidden. Czemu tak? Bo overflow poza tym że jest fajny to ukrywa wszystko poza elementem, czyli nie zawsze się sprawdza (np gdy masz długi select itp)
RE: [CSS] Float, Clear, Position - Damian19 - 17-10-2011
Kod:
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }Gdzie te klasy dodać ?
I czy wszystkie te klasy dodać ?
Opisz mi jak możesz co poszczególna klasa robi.
Już sobie poradziłem 
dodałem klasęKod:
.clearfix:before, .clearfix:after { content: ""; display: table; }Pomogło pozdrawiam i dziękuję.
Dokładnie to zrobiłem to tak:
HTML:
Kod:
<div id="footer">
<div id="footerContent" class="clearfix">
<div id="footerRecommended">
POLECAMY:
<ul>
<li><a href="#">Polacane linki</a></li>
<li><a href="#">Polacane linki</a></li>
<li><a href="#">Polacane linki</a></li>
<li><a href="#">Polacane linki</a></li>
<li><a href="#">Polacane linki</a></li>
</ul>
</div>
<div id="footerSupport">
WSPIERAJA NAS:
<ul>
<li><a href="#">Link do wsparcia</a></li>
<li><a href="#">Link do wsparcia</a></li>
<li><a href="#">Link do wsparcia</a></li>
<li><a href="#">Link do wsparcia</a></li>
<li><a href="#">Link do wsparcia</a></li>
</ul>
</div>
<div id="footerPublicity">
REKLAMY:
<ul>
<li><a href="#">Twoja reklama</a></li>
<li><a href="#">Twoja reklama</a></li>
<li><a href="#">Twoja reklama</a></li>
<li><a href="#">Twoja reklama</a></li>
<li><a href="#">Twoja reklama</a></li>
</ul>
</div>
</div>
</div>CSS:
Kod:
#footer {
background-color: #D9D9D9;
background-repeat: repeat-x;
}
#footerContent {
width: 1024px;
margin: 0 auto;
font-family:"Microsoft New Tai Lue";
font-weight: bold;
font-size: 14px;
text-shadow: 1px 1px #FFFFFF;
color: #666666;
padding: 10px 0;
}
#footerContent, .clearfix {
display: table;
}
#footerContent ul {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
text-shadow: none;
list-style-image: url('images/arrow_icon.png');
margin: 0;
padding: 10px 0 0 15px;
}
#footerRecommended {
float: left;
}
#footerSupport {
float: left;
padding-left: 50px;
}
#footerPublicity {
float: left;
padding-left: 50px;
}Działa
It works!
RE: [CSS] Float, Clear, Position - Kartofelek - 17-10-2011
Ale użyj 3 deklaracji clearfixa (czyli do styli wrzuć tak jak ja podałem), dzięki temu będzie on działał pod resztą przeglądarek