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:

<style type="text/css">
<!--
body 
	{
	background-color:#FFFF00;
	}
#lap 
	{
	width: 800px;
	margin: 10px auto 10px auto;
	background-image:url(images_css/hatter.jpg);
	}
#fejlec 
	{
	height:50px;
	}
#menu 
	{
	width:200px;
	float:left;
	}
#tartalom 
	{
	float:left;
	width:400px;
	}
#aktualitasok 
	{
	width:200px;
	float:left;
	}
-->
</style>
</head>
<body>
<div id="lap">
lap
	<div id="fejlec">
	fejlec!
	</div>
	<div id="menu">
		Menü
	</div>
	<div id="tartalom">
	  <p>tartalom!</p>
	</div>
	<div id="aktualitasok">
	Aktualitasok!
	</div>
</div>
</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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Untitled Document</title>
<style type="text/css">
<!--
#lap {
	background-color:#FFFFFF;
	width:800px;
	margin: 10px auto 10px auto;
	border: 2px solid red;
}
#fejlec {
	height:100px;
	background-color:#00CCFF;
}
#menu {
	width:150px;
	background-color:#0000FF;
	color:#FFFFFF;
}
#tartalom {
	width:400px;
	float:left;
	background-color:#99FF00;
}
#aktualitasok {
	width:150px;
	float:left;
	background-color:#FF0000;
}
#lablec {
	clear:both;
	background-color:#0099FF;
}
-->
</style>
</head>
<body bgcolor="#FFFF99">
<div id="lap">
	<div id="fejlec">
		fejléc
	</div>
	<div id="menu">
		menu
	</div>
	<div id="tartalom">
		tartalom
	</div>
	<div id="aktualitasok">
		aktualitasok
	</div>
	<div id="lablec">
		lablec
	</div>
</div>
</body>
</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.