Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problem z divami
Forum PHP.pl > Forum > Przedszkole
Barton
3.03.2012, 20:48:35
Witam,

Potrzebuję następującego układu divów:



Jednak wszelkie divy które umieszczam (te niebieskie) ustawiają się 4 piksele na lewo od ostatniego (po prawej) żółtego diva, o tak:



Te niebieskie divy próbowałem wsadzić do jednego dużego i tam pozycjonować, ale one i tak ustawiają się do tego żółtego diva. Co jest nie tak, jak powinienem to zrobić? Kod html i css:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2.  
  3. <html lang="pl">
  4. <meta charset="utf-8">
  5. <meta name="Author" content="Blabla">
  6. <link rel="Stylesheet" href="style/css3.css">
  7.  
  8.  
  9. <body>
  10.  
  11. <!-- ------------------------------------------------------------------- -->
  12.     <header id="top">
  13. 		<nav id="top">
  14. 			<div id="top">
  15.             	<img id="avatar" src="images/avatartest.jpg" />
  16.             </div>
  17.             <div id="c">
  18.             	<h1>Janusz Korwin-Mikke</h1>
  19.                 <p id="top">edytuj profil</p>
  20.             </div>
  21.             <div id="r">
  22.             	<p id="top">
  23.                     0 nowych prywantych wiadomości<br/>
  24.                     0 zaplanowanych zdarzeń na jutro<br/>
  25.                     <span style="font-family:Tahoma; font-size:8pt; color:white; font-weight:bold;">2 nowe wiadomości e-mail </span><span style="font-family:Tahoma; font-size:8pt; color:red; font-weight:bold;">*</span>
  26.                 </p>
  27.  
  28.             </div>
  29. 		</nav>	  
  30.     </header>
  31. <!-- ------------------------------------------------------------------- -->	  
  32.  
  33.     <section id="left">s
  34.     </section>
  35.  
  36. <!-- ------------------------------------------------------------------- -->
  37.  
  38.     <section id="center">a
  39.     </section>
  40.  
  41.  
  42. <!-- ------------------------------------------------------------------- -->	
  43.  
  44.  
  45.     <section id="right">v
  46.     </section>	
  47.  
  48. <!-- ------------------------------------------------------------------- -->	  
  49.  
  50.       <footer>
  51.          <p></p>
  52.       </footer>
  53.  
  54. <!-- ------------------------------------------------------------------- -->
  55.  
  56.    </body>
  57.  
  58. </html>
[HTML] pobierz, plaintext 



[CSS] pobierz, plaintext 
  1. @charset "utf-8";
  2.  
  3. body {margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; background-image:url(../images/background.jpg); background-repeat:repeat-x; background-color:#f1f2e8;}
  4.  
  5. header#top {margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0px; height:84px; width: 980px; background-image:url(../images/logotyp.jpg); background-repeat:no-repeat; }
  6.  
  7. nav#top { margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0px; height:84px; width:430px; background-image:url(../images/sep.jpg),url(../images/backgroundtopnav.jpg);,url(../images/sepr.jpg); background-position:left,left,right; background-repeat:no-repeat,repeat-x,no-repeat; }
  8.  
  9. div#top { margin-left:4px; margin-right:0px; margin-top:0px; margin-bottom:0px; height:84px; width:93px; background-image:url(../images/backgroundavatar.jpg); background-repeat:no-repeat; float:left;}
  10.  
  11. div#c { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; height:84px; width:140px; float:left; text-align:center; padding-top:25px; }
  12.  
  13. div#r { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; height:84px; width:181px; float:left; text-align:left; padding-top:22px; padding-left:8px; }
  14.  
  15. div#sepr { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; height:84px; width:4px; float:left; background-image:url(../images/sepr.jpg); }
  16.  
  17. h1 { font-family:Tahoma; font-size:10pt; font-weight:bold; color:white; margin-top:0px; padding-bottom:0px; margin-bottom:0px; padding-top:0px; }
  18.  
  19. p#top { font-family:Tahoma; font-size:8pt; color:#bddde9; padding-top:0px; margin-top:0px; }
  20.  
  21. img#avatar { margin-top:17px; margin-left:21px; }
  22.  
  23. section#all { width:980px; height:530px; background-color:black; margin-top:0px; padding-top:0px; padding-right:0px; margin-left:auto; margin-right:auto; }
  24.  
  25. section#left { width:50px; height:50px; float:left; background-color:blue; position:absolute; left: 20px; top: 30px; }
  26.  
  27. section#center { width:300px; height:530px; float:left; background-color:red; }
  28.  
  29. section#right { width:100px; height:530px; float:left; background-color:green; }
[CSS] pobierz, plaintext
toffiak
3.03.2012, 21:23:34
Nav jest ustwiony na 84px, podobnie jak div-y id="c" i id="r" ale te mają jeszcze dodany padding.

Najprostsze rozwiązanie to usunięcie paddingów (górnych) dla tych elementów i dodanie paddingu (górnego) do elementu nav.

Drugie rozwiązanie to ustawienie elementu nav z float: left i odpowiednim prawym paddingiem, wraz z dodaniem clearfixa dla elementów header i nav, ale tego nie polecam, bardzo brzydki hack i div-y o id="c" i id="r" będą wizualnie ukrywały się pod dolnymi elementami.

Element section nie służy do tego samego co div.
wNogachSpisz
4.03.2012, 00:37:30
Najprostrze rozwiązanie to skorzystać z jakiegoś frameworka CSS, coś co zapewni wsparcie dla różnych przeglądarek.
Grid 960 jest prosty do opanowania i zawiera tylko to co niezbędne do tworzenia layoutu.
YAML-CSS to kombajn.
Blueprints jest bardzo popularny.
prowseed
4.03.2012, 01:50:55
@up
Blueprint na dluzsza mete jest troche niewygodny, mimo wszystko ma troche wad, przynajmniej w moim odczuciu

@topic
[HTML] pobierz, plaintext 
  1. <br style="clear:both;line-height:0;">
[HTML] pobierz, plaintext

to przed niebieskimi divami

//EDIT
albo raczej nie przed niebieskimi, a po zoltych. Z reszta przeczytaj sobie co to sa plywajace elementy i dlaczego trzeba je resetowac.
I dlaczego float:left + position:absolute aaevil.gif ? To dziala tak jak powinno?

Naucz się skrótów dla marginesow i paddingu, o tak to leci:
margin: góra prawo dół lewo;
np: margin: 0 auto 10px auto;
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.