✔ Probleme mit Abstand in einer Navigationsliste

[julchen]

Hallo,
ich bekomme einfach es einfach nicht hin, dass ich die Links in meiner Navigation mittig ausgerichtet bekomme. Diese hängen einfach zu nah am oberen Rand. Ausserdem hab ich ein Problem das sich die Hauptgrafik aus nicht richtig positionieren lässt. Diese soll 1px weiter nach oben um bündig mit der linken Spalte abzuschließen.

Wer kann mir bitte helfen?

Beispiel: http://www.assedo.de/kunden/pbj/index.html

Gruss
Julchen

 

[hanzen]

Hi Julchen,

so müßte es gehen. Ich habe die rechte Box einfach ein Pixel nach oben gezogen und die Menupunkte mit "padding" ausgerichtet und die "height" angepaßt. Automatisch geht das nicht, da "vertical-align: middle" per CSS nicht funktioniert.
Du mußt noch mal schauen, ob es im IE auch paßt, das habe ich mir grad gespart

Gruss, Hannes

*{
	padding:0;
	margin:0;
	border:0;
}
html, body{
 	height:100%; /* wichtig */
	font:100.01% Verdana, Arial, sans-serif;
	color:black;
	text-align:center;
	background:#fff;
}
#box_top{
height:100px;
}
#box_space{
height:2px;
background-color:#FFFFFF;
}
#box{
	width:790px;
	margin:0 auto;
	font-size:60%;
	text-align:left;
  	position:relative;
  	min-height:100%;
	height:auto !important;/* moderne Browser */
	height:100%; /* IE */
	background: #fff url(images/box_right_bg.jpg) repeat-y 50% 0;
}
#box_content{
padding:0;
margin-top:1px;
}
#box_left{
width:200px;
float:left;
margin:0;
}
#box_left p{
padding:0px;
}
.box_left_puffer{
background-color:#D1DAE5; height:18px;
}
#box_right{
margin:-1px 0 0 2px;
width:588px;
float:right;
}
#box_right p{
text-align:justify;
padding:0px;
}
.clear {
clear:both;
}
#logo{
height:75px;
}
#menu_top{
height:25px;
background-color:#B9BCC1;
padding:0px;
}
#menu_top ul{
margin:0;
padding:0;
height:20px;
list-style-type:none;
text-align:center;
}
#menu_top ul li{
display:block;
float:left;
text-align:center;
padding:0;
margin:0;
}
#menu_top ul li a{
width:90px;
height:22px;
padding:3px 0 0 0;
margin:0;
color:#fff;
text-decoration:none;
display:block;
text-align:center;
font:normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
#menu_top ul li a:hover{
color:#930;
background:#D1DAE5;
}
#menu_top a:active{
background:#B9BCC1;
color:#fff;
}
#menu_top li#active a{
background:#9C252B;
color:#fff;
}
p {
margin:0;
line-height:1.4em;
}
img {
display:block;
}

 

[Maik]

Hi,

die vertikale Zentrierung der Links erzielst du mit der line-height-Eigenschaft:

#menu_top ul li a{
width:90px;
line-height:25px;
padding:0;
margin:0;
color:#fff;
text-decoration:none;
display:block;
text-align:center;
font:normal 10px/25px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

Die Grafik rückt um einen Pixel nach oben, wenn du den oberen Außenabstand für das DIV #box_content aufhebst:

#box_content{
padding:0;
/*margin-top:1px;*/ /* auskommentiert = deaktiviert */
}

Zudem muss für den IE im Selektor #box_space die overflow:hidden-Eigenschaft eingesetzt werden, damit er die 2px-Höhe korrekt darstellt:

#box_space{
height:2px;
background-color:#FFFFFF;
overflow:hidden;
}

 

[julchen]

Danke

Vielen Dank für die Hilfe