Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xHTML][CSS] stopka ucieka gdzieś na połowę strony pod menu
Forum PHP.pl > Forum > Przedszkole
in5ane
27.09.2007, 12:37:44
Mam problem, a mianowicie stopka ucieka mi gdzieś na połowę strony pod menu, zamiast być tam gdzie powinno być. Jak wywalam menu, to wtedy idealnie wygląda, a przecież muszę mieć menu i stopkę. W walidatorze xhtmla jest wszystko w porządku.

Oto screen:


Z góry dziękuję za pomoc.

Oto kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>deska.pl</title>
  6.     <style type="text/css">
  7.         * { border: 0; margin: 0; padding: 0; }
  8.                 #boxContainer { width: 1015px; margin: 0 auto; }
  9.                         #leftSide { width: 730px; float: left; margin: 0 5px 0 0;}
  10.                         #rightSide { width: 280px; float: left; }      
  11. 			#subLeftSide { width: 50%; float: left; }
  12.                         #subRightSide { width: 50%; float: left; }
  13.                 .box .content { background-color: #f4f4f4; margin: 0 5px 15px 5px; font-size: 10pt; font-family: Verdana; border-bottom: 1px; border-bottom-color: #6e7a7b; border-bottom-style: solid; }
  14.                 .box h2 { border: 5px white solid; }
  15. 		#logo { width: 1017px; float: center; margin: 0 0 0 7px; }
  16. 		#reklama { width: 1017px; text-align: center; margin: 10px 0 5px 7px; }
  17. 		.menu { width: 1003px; height: 40px; text-align: center; font-size: 12pt; font-family: Verdana; background-color: #f4f4f4; margin: 0 0 0 6px; border-bottom: 1px; border-bottom-color: #6e7a7b; border-bottom-style: solid; }
  18. 		.stopka { width: 1003px; height: 40px; background-color: #f4f4f4; margin: 0 0 0 6px; border-top: 1px; border-top-color: #6e7a7b; border-top-style: solid; }
  19.     </style>
  20. </head>
  21.  
  22. <body>
  23.  
  24. <div id="boxContainer">
  25.     <div class="content">	
  26. 		<p id="logo"><img src="logo.jpg" alt="" /></p>
  27. 	    	<div class="menu">
  28. 		<p>
  29. 		<font color="#fea00a">strona główna</font>&nbsp;&nbsp;&nbsp;&nbsp;newsy&nbsp;&nbsp;&nbsp;&nbsp;artykuły&nbsp;&nbsp;&nbsp;&nbsp;parki&nbsp;&nbsp;&nbsp;&nbsp;imprezy&nbsp;&nbsp;&nbsp;&nbsp;geleria&nbsp;&nbsp;&nbsp;&nbsp;forum&nbsp;&nbsp;&nbsp;&nbsp;giełda&nbsp;&nbsp;&nbsp;&nbsp;katalog stron
  30. 		</p>
  31. 	    	</div>
  32. 		<p id="reklama">
  33. 		<img src="http://pajacyk.pl/img/baner7.gif" alt="" />
  34. 		</p>
  35.  
  36.     </div>
  37.     <div id="leftSide">
  38.         <div id="boxArtykuly" class="box">
  39.                 <h2><img src="artykul.jpg" alt="" /></h2>
  40.             	<div class="content">
  41.                 <p>tekst</p>
  42.                 <p>tekst2</p>
  43.             	</div>
  44.         </div>
  45.         <div id="subLeftSide">
  46.                 <div id="boxImprezy" class="box">
  47.                 <h2><img src="imprezy.jpg" alt="" /></h2>
  48.                 <div class="content">
  49.                 <p>tekst</p>
  50.                 <p>tekst2</p>
  51.                 </div>
  52.         </div>
  53.         <div id="boxOsmy" class="box">
  54.                 <h2><img src="forum.jpg" alt="" /></h2>
  55.                 <div class="content">
  56.                 <p>tekst </p>
  57.                 <p>tekst2</p>
  58.                 </div>
  59.         </div>
  60.         </div>
  61.         <div id="subRightSide">
  62.                 <div id="boxSnowParki" class="box">
  63.                 <h2><img src="snowparki.jpg" alt="" /></h2>
  64.                 <div class="content">
  65.                 <p>tekst</p>
  66.                 <p>tekst2</p>
  67.                 <p>jakiś jeszcze tekst</p>
  68.                 <p>i jakiś jeszcze</p>
  69.                 <p>i coś tam</p>
  70.                 </div>
  71.         </div>
  72.         <div id="boxDziewiaty" class="box">
  73.                 <h2><img src="galerie.jpg" alt="" /></h2>
  74.                 <div class="content">
  75.                 <p>tekst</p>
  76.                 <p>tekst2</p>
  77.                 </div>
  78.         </div>
  79.         </div>
  80.     </div>
  81.     <div id="rightSide">
  82.         <div id="boxNewsy" class="box">
  83.                 <h2><img src="newsy.jpg" alt="" /></h2>
  84.                 <div class="content">
  85.                 <p>tekst</p>
  86.                 <p>tekst2</p>
  87.                 <p>news 1</p>
  88.                  <p>news2</p>
  89.                 </div>
  90.         </div>
  91.         <div id="boxLogowanie" class="box">
  92.                 <h2><img src="logowanie.jpg" alt="" /></h2>
  93.                 <div class="content">
  94.                 <p>tekst</p>
  95.                 <p>tekst2</p>
  96.                 </div>
  97.         </div>
  98.         <div id="boxTrzeci" class="box">
  99.             <h2><img src="gielda.jpg" alt="" /></h2>
  100.                 <div class="content">
  101.                 <p>tekst</p>
  102.                 <p>tekst2</p>
  103.                 </div>
  104.         </div>
  105.         <div id="boxCzwarty" class="box">
  106.             <h2><img src="polecamy.jpg" alt="" /></h2>
  107.                 <div class="content">
  108.                 <p>tekst</p>
  109.                 <p>tekst2</p>
  110.                 </div>
  111.         </div>
  112.     </div>
  113.     <div class="stopka">
  114. 		<p style="text-align: left; color: #007981; font-size: 10pt; font-family: Verdana;">
  115. 		test
  116. 		</p>
  117. 		<p style="text-align: right; color: #007981; font-size: 10pt; font-family: Verdana;">
  118. 		deska.pl 2003 - 2007
  119. 		</p>
  120.     </div>
  121. </div>
  122. </body>
  123. </html>
[HTML] pobierz, plaintext
danielk
27.09.2007, 12:54:15
Zmień w CSS:
.stopka { clear: both;width: 1003px; height: 40px; background-color: #f4f4f4; margin: 0 0 0 6px; border-top: 1px; border-top-color: #6e7a7b; border-top-style: solid; }

dopisz clear: both;
in5ane
27.09.2007, 12:55:15
Wielkie dzięki, a mógłbyś powiedzieć do czego do clear służy i co to zrobiło?
danielk
27.09.2007, 12:57:14
Poszukaj w google smile.gif
np. http://www.signs.pl/html/s/clear.php
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.