Gast: überlappung Grafik

Beitrag lesen

SELF-Forum

überlappung Grafik

Gast
– Informationen zu den Bewertungsregeln

Hi!

hoffe hab meine Frage richtig eingeordnet!
bin grad am schreiben meines ersten richtigen Projekt ganz ohne Frames
und auch ohne Tabellenlayout.
Leider häng ich grad fest. Ich hätte mein Hintergrund sowie das Logo das zentriert ist gern je nach Fenstergröße angepasst was auch ganz gut klappt:

CSS hierzu:

  
#background{position:absolute; z-index:1; width:100%; height:100%; top:0px; left:0px; }  
#logo{position:absolute; z-index:1; width:50%; height:10%; left:50%; margin-left:-25%; }

HTML hierzu:

<body>  
<div>  
<img id="background" src="background1.jpg" alt="" title="" />  
<img id="logo" src="Logo_TCW_Gruen2.jpg" alt="" title="">

klappt Prima!
Nun hätt ich noch ganz gern ne navigationsleiste horizontal ebenfalls angepasst an Fenstergröße mit Bildern doch leider seh ich nur einen Button.

Screenshot von meinem Problem mit der Navigationsleiste

hier der Css-Code dazu:

  
#buttonhome{position:absolute; z-index:1; width:10%; height:5%; left:auto; top:14%; }  
#buttongigs{position:absolute; z-index:2; width:10%; height:5%; left:auto; top:14%; }  
#buttonfotos{position:absolute; z-index:3; width:10%; height:5%; left:auto; top:14%; }  
#buttonband{position:absolute; z-index:4; width:10%; height:5%; left:auto; top:14%; }  
#buttonkontakt{position:absolute; z-index:5; width:10%; height:5%; left:auto; top:14%; }  
#buttongb{position:absolute; z-index:6; width:10%; height:5%; left:auto; top:14%; }  
#buttonlinks{position:absolute; z-index:7; width:10%; height:5%; left:auto; top:14%; }  
#buttonmedia{position:absolute; z-index:8; width:10%; height:5%; left:auto; top:14%; }  
  
  
ul#Navigation {margin: 0.1; padding: 0.1em; text-align: center;border: 0.1px solid black; background-color:black; left:50%; margin-left:-10%; }  
ul#Navigation li {list-style: none; display: inline; padding: 0.1; }  
  
ul#Navigation a, ul#Navigation span {padding: 0em 0em; text-decoration: none; font-weight: bold; border: 0px solid black; border-left-color: black; border-top-color: black; color: black; background-color:black; }  
  
  * html ul#Navigation a, * html ul#Navigation span {width: 0.1em;    /* nur fuer IE 5.0x erforderlich */  
                                                     w/idth: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */}  
  
ul#Navigation a:hover, ul#Navigation span {border-color: black; border-left-color: black; border-top-color: black; color: black; background-color: black; left:auto; }

und hier der Html Teil:

  
<ul id="Navigation">  
    <li a><a href="#Beispiel"><img id="buttonhome" src="Buttons_Navi/home_button.jpg" alt="" title="" border="0"></a></li>  
    <li b><a href="#Beispiel"><img id="buttongigs" src="Buttons_Navi/gigs_button.jpg" alt="" title="" border="0"></a></li>  
    <li c><a href="#Beispiel"><img id="buttonfotos" src="Buttons_Navi/fotos_button.jpg" alt="" title="" border="0"></a></li>  
    <li d><a href="#Beispiel"><img id="buttonband" src="Buttons_Navi/band_button.jpg" alt="" title="" border="0"></a></li>  
    <li e><a href="#Beispiel"><img id="buttonkontakt" src="Buttons_Navi/kontakt_button.jpg" alt="" title="" border="0"></a></li>  
    <li f><a href="#Beispiel"><img id="buttongb" src="Buttons_Navi/guestbook_button.jpg" alt="" title="" border="0"></a></li>  
    <li g><a href="#Beispiel"><img id="buttonlinks" src="Buttons_Navi/links_button.jpg" alt="" title="" border="0"></a></li>  
    <li h><a href="#Beispiel"><img id="buttonmedia" src="Buttons_Navi/multimedia_button.jpg" alt="" title="" border="0"></a></li>  
  </ul>  
</div>  
  
  
</body>

Die Code kommen bei mir direkt nach dem oben geschrieben.
Was mach ich hier falsch oder funktioniert das so per CSS gar nicht?

Bin für Hilfe sehr dankbar

Grüßle Adrian

Beitrag melden
–
Informationen zu den Bewertungsregeln