ugrás a tartalomhoz

CSS - közös háttéerkép?

napalm · 2008. Júl. 22. (K), 09.45
Egy CSS alapú layoutot próbálok összehozni, de kis (?) problémám akadt a közös háttérkép kialakításával kapcsolatban. Semmi extra, középre igazítva a lap, fejléc és 3 oszlopban tartalom benne.

A kód így néz ki:
  1. <style type="text/css">  
  2. <!--  
  3. body   
  4.     {  
  5.     background-color:#FFFF00;  
  6.     }  
  7. #lap   
  8.     {  
  9.     width: 800px;  
  10.     margin: 10px auto 10px auto;  
  11.     background-image:url(images_css/hatter.jpg);  
  12.     }  
  13. #fejlec   
  14.     {  
  15.     height:50px;  
  16.     }  
  17. #menu   
  18.     {  
  19.     width:200px;  
  20.     float:left;  
  21.     }  
  22. #tartalom   
  23.     {  
  24.     float:left;  
  25.     width:400px;  
  26.     }  
  27. #aktualitasok   
  28.     {  
  29.     width:200px;  
  30.     float:left;  
  31.     }  
  32. -->  
  33. </style>  
  34. </head>  
  35. <body>  
  36. <div id="lap">  
  37. lap  
  38.     <div id="fejlec">  
  39.     fejlec!  
  40.     </div>  
  41.     <div id="menu">  
  42.         Menü  
  43.     </div>  
  44.     <div id="tartalom">  
  45.       <p>tartalom!</p>  
  46.     </div>  
  47.     <div id="aktualitasok">  
  48.     Aktualitasok!  
  49.     </div>  
  50. </div>  
  51. </body>  
Namost a "lap" div-re van megadva a háttérkép. Ezen a div-en belül a "fejlec" div-re vonatkozóan látszódik is háttérkép, azonban a többi div-re (menu, aktualitasok) nem jelenik meg. Azért furcsállom, mert a menu és a aktualitasok div ugyanazon a szinten helyezkedik el, mint a fejlec, ennek ellenére csak a fejlec div-en látszódik a háttérkép, pedig a lap-on belül helyezkedik el a többi div is, tehát elméletileg az összes beágyazott div-en látszódnia kellene. Vagy nem?

Hol baltázom el?

(Szenvedek a CSS layoutokkal 2 napja.. hagyományos, elavul nagyon-nagyon húderossz HTML táblákkal 5 perc alatt készen lennék, gondoltam ideje valami modernebb felépítést használni.. kezd elmenni a kedvem ezektől a div-es szivásoktól.. http://weblabor.hu/cikkek/designbolkeszoldal végignéztem)
‹ Javascript Hash nem működik DOM object key-el... CSS - aktív link aktív szeretne maradni... ›
 ■
1

Sőt..

napalm · 2008. Júl. 22. (K), 10.09
Ha nem háttérképet, hanem csak sima háttérszínt adok a #lap-nak, akkor az a háttérszín szintén kizárólag a #fejlec-re látszódik.. Mintha csak a #fejlec lenne a #lap-on, belül, holott benne van mind a 4 div..

Síráshatár
2

tipp

vbence · 2008. Júl. 22. (K), 10.29
Adjál a "lap"nak egy border: 1px solid red-et, és meglátod, hogy mekkora lesz maga a div...
3

adtam..

napalm · 2008. Júl. 22. (K), 10.43
Adtam neki, és pontosan a fejléc méretű a #lap.

Tehát mintha a #fejlec-hez tartozó </div> egyben lezárná a #lap div-et is, de ez sem igaz, mert egyrészt nincs lezárva (-> code), másrészt a 800 pixel #lap szélességen belül jelennek meg a beágyazott div-ek. Tehát csak háttérszín / bgimage szempontból nincs beágyazva a belső div, egyébként igen.. Ilyen pedig elvileg nem létezik. Hajkitépés állapotában leledzek
4

Új próba.

napalm · 2008. Júl. 22. (K), 11.13
Na jó, töröltem az egészet, gépeltem újra. Hátha..

Most így néz ki a kód:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">  
  5. <title>Untitled Document</title>  
  6. <style type="text/css">  
  7. <!--  
  8. #lap {  
  9.     background-color:#FFFFFF;  
  10.     width:800px;  
  11.     margin: 10px auto 10px auto;  
  12.     border: 2px solid red;  
  13. }  
  14. #fejlec {  
  15.     height:100px;  
  16.     background-color:#00CCFF;  
  17. }  
  18. #menu {  
  19.     width:150px;  
  20.     background-color:#0000FF;  
  21.     color:#FFFFFF;  
  22. }  
  23. #tartalom {  
  24.     width:400px;  
  25.     float:left;  
  26.     background-color:#99FF00;  
  27. }  
  28. #aktualitasok {  
  29.     width:150px;  
  30.     float:left;  
  31.     background-color:#FF0000;  
  32. }  
  33. #lablec {  
  34.     clear:both;  
  35.     background-color:#0099FF;  
  36. }  
  37. -->  
  38. </style>  
  39. </head>  
  40. <body bgcolor="#FFFF99">  
  41. <div id="lap">  
  42.     <div id="fejlec">  
  43.         fejléc  
  44.     </div>  
  45.     <div id="menu">  
  46.         menu  
  47.     </div>  
  48.     <div id="tartalom">  
  49.         tartalom  
  50.     </div>  
  51.     <div id="aktualitasok">  
  52.         aktualitasok  
  53.     </div>  
  54.     <div id="lablec">  
  55.         lablec  
  56.     </div>  
  57. </div>  
  58. </body>  
  59. </html>  
Így a #lap háttérszínét megkapja az összes bele ágyazott div, amit nem értek, mert az előző is tökugyanez volt. Csak újragépeltem.. fekete lyuk.
Azonban most fogja magát, és a #menu után csinál egy "sortörést", azaz a #tartalom már úgy jelenik meg, vagyis nincs a #menu-vel egy magasságban. Senki nem mondta neki, hogy így legyen, de ez van (nincs clear: attributum megadva, csak a láblécnek, ami később található. A #lap 800 pixel, a #menu 150 px, a #tartalom 400px szélességű, tehát simán el kellene férnie egymás mellett.

Mi a fene történik?? És miért?

Jelenleg így néz ki browserben
5

hiányzó float

gex · 2008. Júl. 22. (K), 12.51
az történik, higy a #menu divnek nem adtad meg a float: left tulajdonságot, ezért nem kerül mellé a tartalom és az aktualitások.
6

Nem ugyanaz

Franczen Attila · 2008. Júl. 22. (K), 13.05
Az előző kódból lemaradt a clear:both-os lábrész. Az volt a bibi.
7

pontosítás

yaanno · 2008. Júl. 22. (K), 13.38
szerintem egészítsd ki a kódod ezzel, ami egyébként az eredeti kódodban szerepelt is (részben)

update: #menu left-re floatolva, #aktualitasok right-ra (a css colorer valahogy elbaltázza az értéket)
8

Megoldódott?

napalm · 2008. Júl. 22. (K), 16.02
Nos, köszönöm a válaszokat.

Valóban hiba volt a 2. kódban, de ez már annak tudható be, hogy kissé felforrt az agyvizem.. :|

Mindenesetre alapvetően nem az elbaltázott float: paraméter volt a probléma forrása, az már csak okozati hiba volt az tizedik újraírás után.

Megoldásként azt találtam, hogy a "belső" div-ek sorrendjén változtattam; vagyis a ha a float-olt div-eket pakoltam előre a HTML-ben, és utána a többit, akkor hirtelen minden a helyére került.. nem tudom milyen összefüggés van; mindenesetre most működik.

tehát:
#lap (kozepre)
#fejlec
#menu (float:left)
#aktualitasok (float:right)
#tartalom (float nélkül)
Íg jó.

Amennyiben változtatok a div-ek sorrendjén, azonnal probléma van.
Na mindegy azért köszi a segítséget, merült fel újabb de az talán megér egy külön topicot.
9

Arra próbáltalak rávezetni...

vbence · 2008. Júl. 22. (K), 17.52
hogy a befogadó div önmagától nem fogja "benőni" a float-os tartalmakat. Az egyszerű megoldás, hogy a float-os divek után teszel egy üres div-et, aminek clear: both (és persze display: block) stíliust adsz.