Höhe von DIV-Elementen

[hagi]

Höhe von DIV-Elementen

Hi! Baue mir gerade ein Menü mittels div Elementen:
Ein einzelner Menüeintrag besteht je aus einem Pfeil-Symbol, Spacer und je nach Hierarchie vorgeschobenen Platzhaltern:

<td class="menue">

<div id="navcontainer">


<div id="bereich">Mein Bereich</div>

 
<a href..." >
<div id="itemhigh">
[img]expanded.gif[/img]
[img]menue_spacer.gif[/img]
Kontoinformation
</div>
</a>


<a href..." >
<div id="itemhigh">
[img]yellow.jpg[/img]
[img]menue_spacer.gif[/img]
[img]selected.gif[/img]
[img]menue_spacer.gif[/img]
Ebene 2
</div>
</a>

<<Weitere Menüpunkte ...>>

</div> 
</td>

====================================
CSS:

.menue 				{ font-size: 10px; color: #000000; }
 a.menue:link 		{ text-decoration: none; }
 a.menue:visited	{ text-decoration: none; }
 a.menue:hover		{ text-decoration: none; }
 a.menue:active		{ text-decoration: none; }

#navcontainer {
	font-size:  10px;
	font-family: Verdana;
	background:	  #FFFFFF;
	position: 	  relative;
	max-width:	  150px;
	overflow: 	  hidden;
	min-height:	  150px;
}

#bereich { 
	background:		#0099CC;
	color:			#FFFFFF;
	font-weight:	bold;
	min-height:		15px;
	max-height:		14px;	
	width:			150px;
	font-weight:	bold;
 	position:		relative;
	top:			-1px;
	margin-top:		1px;
	
	border-right-width:		1px;
	border-bottom-width:	1px;
	border-left-width:		0px;
	border-top-width:		0px;
	border-right-style:		solid;
	border-bottom-style:	solid;
	border-color:			#6D6D6D;
}

#item, #item:link, #item a:visited, #item a:hover, #item a:active, #item a:focus
{
	background:	#F2FAFC;
	color:		#000000;
	min-height:	15px; 
	max-height:	15px;
	width:		150px;
	position:	relative;
	top:		-1px;
	margin-top:	1px;
	cursor:		pointer;
}

#itemhigh, #itemhigh:link, #itemhigh a:visited, #itemhigh a:hover, #itemhigh a:active, #itemhigh a:focus
{ 
	background:		#0099CC;
	color:			#FFFFFF;
	font-weight:	bold;
	min-height:		15px; 
	max-height:		15px;
	width:			150px;
	position:		relative;
	top:			-1px;
	margin-top:		1px;
	cursor:			pointer;
}

====================================
Mein Problem ist folgendes:
Die Höhe des DIV-Elementes ist faktisch höher als 15px (Höhe der vorgeschobenen Bilder) und läßt sich nicht verkleinern.
hab schon padding, height, min-height, margin,... probiert - ohne Erfolg.

2. Problem: Der Text innerhalb vom DIV ist nicht vertikal zentrieret --> vertical-align: middle bzw. top funktionieren nicht

Vielleicht weiß jemand eine Lösung
thanks a lot
lg, hagi

<--- Mod-Edit: Benutzt die Code-Tags !!! - Forenregeln --->

 

[Prophet]

1. In css-dateine werden kommetare so geschrieben:

/* Kommentar */

2. vertical-align funktioniert nur in tabellen! in divs kannst du einzeiligen text vertikal uzentrieren wenn du die line-height und die höhe des div gleichsetzt.

3. <a href..." > <-- falsch es muss <a href="url"> heißen

4. div in a zu schreiben ist nucht gut man sollte nie block elemente in inline element verscachteln mach foglendes formatiere die links als: display:block; dann kannst du sie genauso wie divs formatieren.