Forum PHP.pl > [HTML][CSS] Divy

Pomoc - Szukaj - Użytkownicy - Kalendarz

b4rt3kk

4.11.2010, 17:44:58

Witam, mam sobie taki przykładowy układ strony:

[HTML] pobierz, plaintext 
<div id=kontener> // Kontener
 
<div id=menu>menu</div>
 
<div id=srodek>srodek</div>
 
</div>
[HTML] pobierz, plaintext

W jaki sposób opisać to w css, żeby kontener rozszerzał się wraz z rozszerzaniem divów wewnątrz niego? Daje height: auto, to jest na wysokość 1px, daje, height 100% to jest to wysokość na 100% body, a jak tekst jest dłuższy, to kotener i tak się nie poszerza. Proszę o pomoc. Znaczy wydłuża, a nie poszerza, ale wiadomo o co chodzi.

CuteOne

4.11.2010, 17:57:30

[HTML] pobierz, plaintext 
#kontener{ width: 500px; background: blue}
 
#menu{ height: 150px; width: 500px;  background: red}
 
#srodek{ width: 500px; background: green }
[HTML] pobierz, plaintext

b4rt3kk

4.11.2010, 18:54:56

U mnie wygląda to tak:

[HTML] pobierz, plaintext 
#kontener {
overflow: visible;
width: 848px;
background-color: black;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
margin-bottom: 20px;
}
 
#menu_lewe {
float: left;
width: 140px;
text-align: left;
}
 
#srodek {
float: left;
width: 568px;
text-align: left; 
}
 
#menu_prawe {
float: right;
width: 140px;
text-align: left;
}
[HTML] pobierz, plaintext

Pozbawienia kontenera atrybutu height daje tylko i wyłącznie to, że całkowicie zanika, tak w ogóle to ma on nadawać tylko i wyłącznie tło i ramkę. Więc to co napisałeś nic nie pomogło.

kapuch

4.11.2010, 19:09:05

Taki "blad" powstaje gdy stosujemy floaty.
Aby temu zaradzic wystarczy na samym koncu div kontener, wstawic np takie cos:

[HTML] pobierz, plaintext 
<div style="clear:both;"></div>
[HTML] pobierz, plaintext

Wtedy div kontener, bedzie automatycznie przybieral wysokosc divow, ktore sa wewnatrz kontenera.
Czyli tak:

[HTML] pobierz, plaintext 
<div id=kontener> // Kontener
 
<div id=menu>menu</div>
 
<div id=srodek>srodek</div>
 
<div style="clear:both;"></div>
 
</div>
[HTML] pobierz, plaintext

b4rt3kk

4.11.2010, 19:28:55

Niestety, dalej nic, nie pomogło. ;/

cniak

4.11.2010, 19:56:57

[HTML] pobierz, plaintext 
      <div id=kontener> // Kontener
 Kazdy div musi posiadac jakis tekst, mozesz wpisac sztuczna spacje, np.  & n b s p ; (usuń odstepy miedzy czerwonymi literami (& i ; tez!)
      <div id=menu>menu
<div class="clear"></div>
</div>
 
      <div id=srodek>srodek
<div class="clear"></div></div>
 
      <div class="clear"></div>
      </div>
[HTML] pobierz, plaintext

css:

[HTML] pobierz, plaintext 
.clear {
content: ".";
clear: both;
}
[HTML] pobierz, plaintext

kapuch

4.11.2010, 19:59:16

Cytat(b4rt3kk @ 4.11.2010, 19:28:55 )

Niestety, dalej nic, nie pomogło. ;/

U mnie dziala - specjalnie wkleilem ten kod jeszcze raz i div kontener ma wysokosc rowna z divami wewnatrz, takze mozliwe ze nie uzywasz prawidlowego !DOCTYPE
Np. takiego.

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
...itd...
[HTML] pobierz, plaintext

nic innego do glowy mi nie przychodzi - u mnie jest dobrze, wiec jesli wszystko zrobiles prawidlowo, wedlug wskazowek, ktore ci podano, to u ciebie tez musi byc ok.
Zobacz z tym doctype...

BTW. Musisz powiekszyc nieco (5-10px) szerokosc kontenera, bo prawe menu sie nie miesci i zjezdza na dol.

b4rt3kk

5.11.2010, 08:15:56

Dziękuję problem rozwiązany, jednak przyczyną było nie wyczyszczenie położenia divów, a raczej brak pustego znaku w stopce, po tym juz dziala idealnie

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.