Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [xHTML][CSS] stopka ucieka gdzieś na połowę strony pod menu
in5ane
post
Post #1





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

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


--------------------
> > > Tworzenie stron < < <
Go to the top of the page
+Quote Post
danielk
post
Post #2





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 17.08.2007
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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;
Go to the top of the page
+Quote Post
in5ane
post
Post #3





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

Wielkie dzięki, a mógłbyś powiedzieć do czego do clear służy i co to zrobiło?


--------------------
> > > Tworzenie stron < < <
Go to the top of the page
+Quote Post
danielk
post
Post #4





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 17.08.2007
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Poszukaj w google smile.gif
np. http://www.signs.pl/html/s/clear.php
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 12:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn