✔ Ahnungslos

[resterampe]

immernoch Ahnungslos

Hallo,

Ich habe folgenden Code
an 2 Stellen in meine Seite eingebunden...
www.alles-ausser-banane.de

  <ul id="buttons"> 
  <li id="but01"><a href="/<?php echo $language; ?>/<?php echo $design; ?>/firmenprofil">Firmenprofil</a></li> 
  <li id="but02"><a href="/<?php echo $language; ?>/<?php echo $design; ?>/leistungen">Leistungen</a></li> 
  <li id="but03"><a href="/<?php echo $language; ?>/<?php echo $design; ?>/design">Design</a></li>
  <li id="but04"><a href="/<?php echo $language; ?>/<?php echo $design; ?>/referenzen">Referenzen</a></li>
  <li id="but05"><a href="/<?php echo $language; ?>/<?php echo $design; ?>/kontakt">Kontakt</a></li>
  <li id="but06"><a href="/<?php echo $language; ?>/<?php echo $design; ?>/impressum">Impressum</a></li>
  </ul>

Dazu gehört folgendes CSS:
http://www.alles-ausser-banane.de/style/standart/screen.css

  #buttons { width:585px; height:18px; margin:0 auto; padding:0; position:relative; list-style-type:none; background:url(../../img/de/standart/buttons.jpg);}
  #buttons li { display:block; height:18px; position:absolute; top:0; overflow:hidden; }
  #buttons li#but01 { left:0; width:122px; }
  #buttons li#but02 { left:122px; width:101px; }
  #buttons li#but03 { left:223px; width:68px; }
  #buttons li#but04 { left:291px; width:105px; }
  #buttons li#but05 { left:396px; width:80px; }
  #buttons li#but06 { left:476px; width:109px; }
  a:visited { color:#000; }
  #buttons li a, #buttons li a:visited { position:absolute; height:18px; background: url(../../img/de/standart/buttons.jpg); text-indent: -100em; overflow:hidden; }
  #buttons li#but01 a, #buttons li#but01 a:visited { background-position:0 0; width:122px; }
  #buttons li#but02 a, #buttons li#but02 a:visited { background-position:-122px 0; width:101px; }
  #buttons li#but03 a, #buttons li#but03 a:visited { background-position:-223px 0; width:68px; }
  #buttons li#but04 a, #buttons li#but04 a:visited { background-position:-291px 0; width:105px; }
  #buttons li#but05 a, #buttons li#but05 a:visited { background-position:-396px 0; width:80px;}
  #buttons li#but06 a, #buttons li#but06 a:visited { background-position:-476px 0; width:109px;}
  #buttons li a:hover, #buttons li a:focus { padding:0; top:0; height:18px; }
  #buttons li#but01 a:hover, #buttons li#but01 a:focus { background-position:0 -18px;}
  #buttons li#but02 a:hover, #buttons li#but02 a:focus { background-position:-122px -18px;}
  #buttons li#but03 a:hover, #buttons li#but03 a:focus { background-position:-223px -18px; }
  #buttons li#but04 a:hover, #buttons li#but04 a:focus { background-position:-291px -18px; }
  #buttons li#but05 a:hover, #buttons li#but05 a:focus { background-position:-396px -18px; }
  #buttons li#but06 a:hover, #buttons li#but06 a:focus { background-position:-476px -18px; }

Nur ich bekomme es nicht hin, dass das Menü im Header funktioniert. Im Hauptteil der Seite funtioniert alles wie es soll.

Für Denkanstöße oder Hinweise die mich der Lösung näher bringen bin ich dankbar

Julian

 

[Maik]

Eine Lösung habe ich (noch) nicht parat, dafür aber den wichtigen Hinweis, daß eine ID in einem Dokument / einer Seite nur einmal vergeben werden darf

 

[resterampe]

stimmt...
da habe ich nicht mehr drüber nachgedacht, als ich das Menü ein zweites mal (zu Testzwecken) eingebaut habe...
habe das zweite Menü entfernt...

 

[resterampe]

ok problem gelöst...
probleme gab esmit dem position:absolute in "buttons"
gefixt habe ich des durch: display:bock; postition:relative;