Menu Inhalt richtig positionieren

[Kaya]

Hallo Leute,

ich habe ein Template mit folgendem Menü:

HTML:

<div id="menu_tab">
                    <ul class="menu">
                         <li><a href="index.html" class="nav1">  Home </a></li>
                         <li class="divider"></li>
                         <li><a href="#" class="nav2">Products</a></li>
                         <li class="divider"></li>
                         <li><a href="#" class="nav3">Specials</a></li>
                         <li class="divider"></li>
                         <li><a href="#" class="nav4">My account</a></li>
                         <li class="divider"></li>
                         <li><a href="#" class="nav4">Sign Up</a></li>
                         <li class="divider"></li>                         
                         <li><a href="#" class="nav5">Shipping </a></li>
                         <li class="divider"></li>
                         <li><a href="contact.html" class="nav6">Contact Us</a></li>
                         <li class="divider"></li>
                         
                    </ul>

CSS:

#menu_tab{
width:1000px;
height:50px;
background-color:#fff;
}

ul.menu {
list-style-type:none; float:left; display:block; width:982px; 
margin:0px; padding:0px;background:url(images/menu_bg.gif) repeat-x;}

ul.menu li {
display:inline;
font-size:11px;
font-weight:bold;
line-height:50px;
}
ul.menu li.divider {
display:inline;
width:2px;
height:50px;
float:left;
background:url(images/menu_divider.gif) no-repeat center;
}

a.nav1:link, a.nav1:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/home.png) no-repeat left; color:#676d77;}
a.nav2:link, a.nav2:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/services.png) no-repeat left; color:#676d77;}
a.nav3:link, a.nav3:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/favs.png) no-repeat left; color:#676d77;}
a.nav4:link, a.nav4:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/user_add.png) no-repeat left; color:#676d77;}
a.nav5:link, a.nav5:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/car.png) no-repeat left; color:#676d77;}
a.nav6:link, a.nav6:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/contact-new.png) no-repeat left; color:#676d77;}

a.nav1:hover, a.nav2:hover, a.nav3:hover, a.nav4:hover, a.nav5:hover, a.nav6:hover {
color:#333333;}

Ich würde gerne diese Grafiken (home.png, products.png usw.) gerne oben haben und direkt dadrunter den Link als Text. Die Bilder sind ja als Hintergrund positioniert, ich bekomme es einfach nicht hin Text und Grafik entsprechend zu positionieren, kann mir da vielleicht bitte jemand einen Tipp geben, wie ich das am besten angehen kann?

Liebe Grüsse
Kaya

 

[stb_87]

AW: Menu Inhalt richtig positionieren

Die Grafiken hast du mit "left" im CSS linksbündig ausgerichtet. Gib statt dessen doch mal "top" im CSS ein.

 

[sokie]

AW: Menu Inhalt richtig positionieren

so in dieser Art könnte das funktionieren:

#menu_tab{
width:1000px;
height:50px;
background-color:#fff;
}

ul.menu {
list-style-type:none; float:left; display:block; width:982px; 
margin:0px; padding:0px;background:url(images/menu_bg.gif) repeat-x;
}

ul.menu li {
display:inline;
font-size:11px;
font-weight:bold;
line-height:50px;

}
ul.menu li.divider {
display:inline;
width:2px;
height:50px;
float:left;
background:url(images/menu_divider.gif) no-repeat center;
}
.menu a{
  display: block;
  width: 138px;
  height:50px;
  text-align: center;
  text-decoration:none;
  float:left;
  padding-top: 2px;
  color:#676d77;
}
.menu a:hover {
  color:#333333;
}
a.nav1{
  background:url(images/home.png) no-repeat center 3px;}
a.nav2{
  background:url(images/services.png) no-repeat center 3px;}
a.nav3{
  background:url(images/favs.png) no-repeat center 3px;}
a.nav4{
  background:url(images/user_add.png) no-repeat center 3px;}
a.nav5{
  background:url(images/car.png) no-repeat top center 3px;}
a.nav6{
  background:url(images/contact-new.png) no-repeat center 3px;}

center 3px ist nur ein vorschlag um zu verhindern, dass die icons oben am Rand 'kleben' - center top würde sie ganz oben mittig anordnen.

 

[Kaya]

AW: Menu Inhalt richtig positionieren

Hallo und danke für die Antworten

@ sokie damit kommt man der ganzen Sache schon Nahe, vielen Dank. Und das mit dem center 3px ist auch vollkommend OK, es sollte schon nicht rangeklatscht aussehen.

Die Schrift würde ich aber noch weiter unten haben, die Grafiken habe ich ausgetauscht, sind ein wenig grösser, deshalb soll die Schrift noch weiter nach unten. Aber wenn ich dann jetzt hier

.menu a{
  display: block;
  width: 138px;
  height:50px;
  text-align: center;
  text-decoration:none;
  float:left;
  padding-top: 2px;
  color:#676d77;

aus padding-top: 20px mache, macht es das Menü nach unten hin zusätzlich länger, zumindest im Firefox, im Internet Explorer siehts gut aus. Wie kann ich das denn noch verhindern?

Liebe Grüsse

 

[sokie]

AW: Menu Inhalt richtig positionieren

das padding-top wird zur Höhe des Elements hinzu addiert - es wird also 50px + 20px hoch. um die gleiche höhe zu behalten musst du es also von der höhe abziehen. (height: 30px; )

 

[Kaya]

AW: Menu Inhalt richtig positionieren

Super, ich bedanke mich recht herzlich :