Gast: überlappung Grafik

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

  1. überlappung Grafik

    Gast
    – Informationen zu den Bewertungsregeln

    okay habs mir grade selbst beantwortet ^^

    Aber vielleicht hilfts ja jmd. anderes!!!!

    im CSS Code war was falsch anstatt:

      
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; }

    sollte man in Spalte:

      
  
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; }

    bei padding: 0em 0em die "0em 0em" durch "0.1em 5%" ersetzen.

    dass ganze sieht dann so aus:

      
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: 0.1em 5%; 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; }

    ^^ Hoffe das hilft vllt dem ein oder anderen....

    Grüße Adrian

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. überlappung Grafik

      Steel
      – Informationen zu den Bewertungsregeln

      Moin!

      Aeh. Sorry, wenn ich das so sage, aber was ist das, was Du da machst? Sieht furchtbar aus, dafuer, dass Du nur eine Navigationliste basteln willst. Allein all das absolute Positionieren... *gruselgrusel*

      Ueber das Bildgefrickel seh ich mal hinweg, aber anderen und Dir hilft vielleicht eher dieser Link: http://css.maxdesign.com.au/listamatic/

      --
      Vergesst Chuck Norris.
      Sponge Bob kann unter Wasser grillen!
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. überlappung Grafik

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Aeh. Sorry, wenn ich das so sage, aber was ist das, was Du da machst? Sieht furchtbar aus, dafuer, dass Du nur eine Navigationliste basteln willst. Allein all das absolute Positionieren... *gruselgrusel*

        Und was noch gruseliger ist: Primärformatierung für IE5 und invalide Hacks für den IE6.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln