MozillaPL.org - polskie centrum Mozilli

Główne menu:

[html/css] Problem z divami

Jak tworzyć strony WWW zgodnie ze standardami

Moderator: Pomocy?!

[html/css] Problem z divami

Postautor: yarek » 02 grudnia 2005, 17:41

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl-PL; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

witam,

Popatrzcie na tą stronę: www.jedination.neostrada.pl/proj/index.html - chciałbym aby te 3 DIV'y (ten z napisem, ten z menu, i ten środkowy) znajdowały się idealnie pod sobą, tylko coś tu nie gra ... jeśli macie jakieś pomysły jak rozwiązać ten problem to piszcie :)

HTML: (wiem, że się nie waliduje ale narazie to niepotrzebne)
Kod: Zaznacz cały
<?xml version="1.0" encoding="iso-8859-2"?>
<!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">   
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
 <title>Linuxowe tutki - HOME</title>
 <link type="text/css" rel="stylesheet" href="style.css" />
 <link type="text/css" rel="stylesheet" href="nav.css" />
 <script type="text/javascript" src="IEsuck.js"></script>
</head>
<body xml:lang="pl">
 <div id="top">
  Linuxowe tutki
 </div>

<div id="bottom">
<ul id="nav">
 <li><a href="#">Dystrybucje</a>
  <ul>
   <li><a href="#">SuSE</a></li>
   <li><a href="#">Red Hat</a></li>
   <li><a href="#">Mandriva</a></li>
   <li><a href="#">Slackware</a></li>
   <li><a href="#">Debian</a></li>
   <li><a href="#">PLD</a></li>
   <li><a href="#">inne</a></li>
  </ul>
 </li>
 <li><a href="#">Podstawy</a>
  <ul>
   <li><a href="#">Konsola</a></li>
   <li><a href="#">Komendy</a></li>
   <li><a href="#">Kde / Gnome</a></li>
  </ul>
 </li>
 <li><a href="#">Dropdown</a>
  <ul>
   <li><a href="#">Dartfishes</a></li>
   <li><a href="#">Eellike gobies</a></li>
  </ul>
 </li>
 <li><a href="#">O stronie</a>
  <ul>
   <li><a href="#">O autorze</a></li>
   <li><a href="#">Buttony</a></li>
  </ul>
 </li>
</ul>
</div>


<div id="bottom2">
ghjj
</div>

</body>
</html>


CSS:
Kod: Zaznacz cały
body {
text-align:center;
margin:15px 0 0 0;
padding:0;
}

#top {
background-color:#647EA1;
width:600px;
margin:0 auto;
font-family:"Trebuchet MS";
font-size:50pt;
color:#FFFFFF;
text-transform:capitalize;
}

#bottom {
margin:0 auto;
width:600px;
}

#bottom2 {
background-color:#647EA1;
width:600px;
height:200px;
margin:0 auto;
}
yarek
 

Postautor: Zajec » 02 grudnia 2005, 18:35

Przeglądarka: Opera/8.10 (X11; Linux i686; U; pl)

Sprawę załatwi
Kod: Zaznacz cały
body {
text-align:center;
margin:15px auto 0;
padding:0;
width: 600px;
}
ale nie pytajcie mnie, jakim cudem dwa div'y ułożyły się obok siebie :-|
Zajec
 
Posty: 167
Z nami od: 17 grudnia 2004, 22:32
Lokalizacja: Włocławek

Postautor: Zajec » 02 grudnia 2005, 18:41

Przeglądarka: Opera/8.10 (X11; Linux i686; U; pl)

Ahh, już wiem.

Cała zawartość #nav ma nadane float, więc automatycznie #nav, a co to za tym idzie, także #bottom nie mają wysokości.

Div #bottom2 jest więc pod #bottom, ale tego nie widać, bo róznica wysokości to 0px.

Trzy proste rozwiązania:
Kod: Zaznacz cały
#bottom:after {
display: block;
clear: both;
content: "";
}
Kod: Zaznacz cały
#bottom2 {
clear: both;
}
Kod: Zaznacz cały
<br style="clear: both;" />
przed zamknięciem #bottom
Zajec
 
Posty: 167
Z nami od: 17 grudnia 2004, 22:32
Lokalizacja: Włocławek

Postautor: yarek » 02 grudnia 2005, 20:59

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl-PL; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

Ale mi głupio :oops: SPrawa rozwiążana chłopaki! Bez kombinowania :D Poprostu poprzeplatał mi się kod :oops: Tak to teraz wygląda:

HTML:
Kod: Zaznacz cały
<?xml version="1.0" encoding="iso-8859-2"?>
<!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">   
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
 <title>Linuxowe tutki - HOME</title>
 <link type="text/css" rel="stylesheet" href="style.css" />
 <link type="text/css" rel="stylesheet" href="nav.css" />
 <script type="text/javascript" src="IEsuck.js"></script>
</head>
<body xml:lang="pl">

 <div id="top">
  Linuxowe tutki
 </div>

<div id="navcont">
<ul id="nav">
 <li><a href="#">Dystrybucje</a>
  <ul>
   <li><a href="#">SuSE</a></li>
   <li><a href="#">Red Hat</a></li>
   <li><a href="#">Mandriva</a></li>
   <li><a href="#">Slackware</a></li>
   <li><a href="#">Debian</a></li>
   <li><a href="#">PLD</a></li>
   <li><a href="#">inne</a></li>
  </ul>
 </li>
 <li><a href="#">Podstawy</a>
  <ul>
   <li><a href="#">Konsola</a></li>
   <li><a href="#">Komendy</a></li>
   <li><a href="#">Kde / Gnome</a></li>
  </ul>
 </li>
 <li><a href="#">Dropdown</a>
  <ul>
   <li><a href="#">Dartfishes</a></li>
   <li><a href="#">Eellike gobies</a></li>
  </ul>
 </li>
 <li><a href="#">O stronie</a>
  <ul>
   <li><a href="#">O autorze</a></li>
   <li><a href="#">Buttony</a></li>
  </ul>
 </li>
</ul>
</div>

<div id="bottom">
ghjj
</div>

</body>
</html>


CSS:
Kod: Zaznacz cały
body {
text-align:center;
padding:0;
margin:15px auto 0;
padding:0;
}

#top {
background-color:#647EA1;
width:600px;
margin:0 auto;
font-family:"Trebuchet MS";
font-size:50pt;
color:#FFFFFF;
text-transform:capitalize;
}

#navcont {
margin:0 auto;
width:600px;
}

#bottom {
background-color:#647EA1;
width:600px;
height:200px;
margin:0 auto;
clear:both;
}
yarek
 


Wróć do Tworzenie stron WWW

Kto jest online

Zarejestrowani użytkownicy: Baidu [Spider], Bing [Bot], Google [Bot]

Przejdź do powiązanej strony

Nawigacja:

Stopka: