ugrás a tartalomhoz

gyerek div szélessége nagyobb, mint a szülőé?

Pal_ur · 2010. Jan. 4. (H), 15.22
Üdv,

olyanon küzdöm, hogy dinamikusan változó szélességű menüpontok alá almenüpontokat illesszek. 

<li class="menuitem"><a href="#">Elem</a>
<div id="menu-outer">
<ul><li>Szöveg</li></ul>
</div>
</li>
A "menuitem" listaelemnek nem szeretnék (és nem is tudok) width értéket megadni, mert abban változó tartalmak vannak. Viszont szeretném, ha a menu-outer szélesebb lenne, mint a listaelem. Width érték sehol nincsen megadva, a releváns css mindössze ennyi: 

li.menuitem {
height: 60px;
}
li.menuitem a {
padding: 15px 25px 20px 20px;
line-height: 50px; 
}
li #menu-outer {
display: block;
}
Hogyan tudnám megvalósítani?

Köszönöm,

P.
‹ Egyszerű képváltó script keresése CSS öröklési hiba ›
 ■
1

position

gphilip · 2010. Jan. 4. (H), 17.59
Hali!

Én most egy position: relative-ra gondolok az elmenü div-jében, de nem vagyok ebben biztos, mert nem látom,, hogy pontosan mit és hogy szeretnél. :)
2

nekifutok újra :)

Pal_ur · 2010. Jan. 4. (H), 18.16
Szóval,

van egy menüm. UL-ben elhelyezett LI-k, akiknek nem tudok width-ot adni. Emellett hogy normálisan nézzen ki, meg úgy, ahogy a designer megrajzolta, padding-gel oldom meg.

A főmenüelemekhez tartozó almenüket egy alapból 
display: none;

div-ben helyezem el, amelynek a megjelenését a 
li a:hover {
display: block;
}
biztosítja. A normális megjelenéshez persze mindegyik elem még rengeteg plusz formázással rendelkezik.

A baj az, hogy jelen állapotban a megjelenő almenü a főmenü elemeknél szélesebb is lehet, viszont ilyenkor a főmenü elemei "ugrálnak", vagyis amikor az almenü megjelenik, akkor szélesebbek lesznek, mint amikor nem jelenik meg. Ezt szeretném úgy kiküszöbölni, hogy az almenü div-je lehessen szélesebb, mint a főmenü (nem ismert szélességű) li-je.

Talán így érthetőbb.
3

Float

gphilip · 2010. Jan. 4. (H), 18.57
Hali, még midnign nem látom magam lőtt ezt a menüt, de ha azt szeretnéd, hogy a gyerek elem mérete ne befolyásolja a szülőét, akkor a gyerek elemre float-ot kell alkalmatnod, míg a szülő elemre ezt nem teheted.
4

rövid html

Pal_ur · 2010. Jan. 4. (H), 19.21
Rövidített példát csináltam: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<style>
	#kulso {
		margin: 0 auto; 
		width: 700px;
	}

	#belso {
		border: 1px solid #000000;
	}

	ul {
		height: 60px;
	}

	li {
		float: left;
		border: 1px solid #FF6633; 
	}

	li #almenu {
		display: none;
	}

	li a {
		padding: 15px 25px 20px 20px;
		line-height: 50px; 
	}

	li:hover #almenu {
		display: block;
		border: 1px solid #000000; 
		width: 280px;
	}

	li ul {
		height: auto;
	}

	li ul li {
		border: none;
	}

	</style>
</head>

<body>
	<div id="kulso">
		<div id="belso">	
			<ul>
				<li><a>szöveg</a>
					<div id="almenu">
						<ul>
							<li>szöveg 2 szöveg 2 szöveg 2 szöveg 2 szöveg 2</li>
						</ul>
					</div>
				</li>
				<li><a>másik szöveg</a>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>
És már "csak" annyi lenne a feladat, hogy amikor az li fölé megy az egér, akkor az egész li körüli piros box ne ugorsjon szélesre attól, hogy megjelenik az almenü.
5

absolute

gphilip · 2010. Jan. 4. (H), 22.43

	li #almenu {  
		display: none;
		border: 1px solid #000000;   
		width: 280px;
		position: absolute;
	}  
  
	li a {  
		padding: 15px 25px 20px 20px;  
		line-height: 50px;   
	}  
  
	li:hover #almenu {  
		display: block;
	}
position: absolute, illetve átírtam a kódot az eredeti osztályhoz.
Az li:hover nem minden böngészőben fog menni szerintem, pl a régebbi explorerek csak az A tag hoverjét támogatják, így lehet, h azt kívülre kell tenni.
6

és valóban

Pal_ur · 2010. Jan. 4. (H), 23.07
Örök hálám. A 
position: absolute;
mentett meg.

Nagyon köszönöm!