• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

z-index

C

ChechenHD

Mitglied
Hallo Liebe Community,

Es geht um den Header.

Ich habe in CSS den body eine Background Farbe gegeben. Für den Header auch. Auf dem Header steht Text der beim hover eine kleinen background Farbe um den text haben soll. Der aber leider hinter dem Header ist.

Leider sehe ich den Background um den Text nur mit z-index und auch nur wenn ich position : absolute auf den Background Text schreibe. Sonst wirkt z-index nicht.

Wenn ich nun den Fenster verkleinere sieht man leider den nachteil der durch absolute entsteht, der Text bleibt einfach stehen.

Was kann ich dagegen tun? Würde gerne auf position : absolute verzichten wollen.

MfG
 
Werbung:
Auf absolute Positionierung verzichten zu wollen ist löblich. Bei einem Aufklappmenü ist es jedoch notwendig. Du müsstest das umgebende <li> relativ positionieren, dadurch wird das absolute positionierte <ul> darin an diesem <li> ausgerichtet statt am Viewport des Browsers.
 
Ohh man.. Hab immer gehofft ich könnte das umgehen. Ich denke ehrlich gesagt nicht das Listen für ein Menü gedacht sind. Auch wenn dieser Weg überall gezeigt wird....

Wie muss deine Idee aussehen? Ich stelle mal meinen Vortschritt hier rein.

HTML: 
<!DOCTYPE html>
<html>

    <head>
        <title>SHOWEVER</title>

        <link href="style.css" type="text/css" rel="stylesheet"/>

    </head>

    <body>

        <header>

            <a href="#"><h1>SHOWEVER</h1></a>

            <div id="serien"><a href="#"><h2>SERIEN</h2></a></div>
            <div id="filme"><a href="#"><h3>FILME</h3></a></div>
            <div id="genres"><a href="#"><h3>GENRES</h3></a></div>
            <div id="informationen"><a href="#"><h3>INFORMATIONEN</h3></a></div>

        </header>

        <section>



        </section>



    </body>

</html>

HTML: 
* {
    margin: 0px;
    padding: 0px;
}

@font-face {
    font-family: Bangers;
    src: url(fonts/Bangers.ttf);
}

@font-face {
    font-family : Helvetica;
    src :url(fonts/Helvetica.ttf);
}

body {
    background-color: #ECF0F2;
    margin-top: 10px;
}

header {
    background-color: #252A2E;
    margin: auto;
    width: 940px;
    height: 50px;
    z-index: 1;
}

header h1 {
    font-family: Bangers;
    font-size: 40px;
    color: #00AFF0;
    padding-top: 5px;
    padding-left: 10px;
    float: left;
}

header a {
    color: white;
    text-decoration: none;
}

<!------ Dies hier gilt für alle anderen Menü Punkte -->

header a:hover h3 {
    background-color: rgba(214,217,217,0.5);
    height: 25px;
    top: -15px;
    left: -24px;
    padding-top: 15px;
    padding-left: 24px;
    padding-right: 24px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: absolute; z-index: 2;

}

<!----------- Ein Menü Punkt ( in dem Fall Serien ) soll hier in Blau sein damit man weis wo man gerade ist ---->

#serien {
    font-family: Helvetica;
    font-size: 9pt;
    color: white;
    letter-spacing: 0.1em;
    position: absolute;
    top: 35px;
    left: 230px;
    float: left;
    background-color: #00AFF0;
    height: 25px;
    top: 20px;
    left: 204px;
    padding-top: 15px;
    padding-left: 24px;
    padding-right: 24px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#filme {
    font-family: Helvetica;
    font-size: 11pt;
    color: white;
    letter-spacing: 0.1em;
    position: absolute;
    top: 35px;
    left: 350px;
    float: left;
}

#genres {
    font-family: Helvetica;
    font-size: 11pt;
    color: white;
    letter-spacing: 0.1em;
    position: absolute;
    top: 35px;
    left: 455px;
    float: left;
}

#informationen {
    font-family: Helvetica;
    font-size: 11pt;
    color: white;
    letter-spacing: 0.1em;
    position: absolute;
    top: 35px;
    left: 585px;
    float: left;
}

section {
    background-color: #00AFF0;
    margin: auto;
    width: 940px;
    height: 3px;
}

Ich empfehle den Fenster kleiner zu machen. Dann erkennt man genau wo die Elemente sein sollten.
 
Werbung:
Schau dir einfach einige der vielen Beispiele im Netz an:
http://www.silent-fran.de/css/tutorial/aufklappmenue.html

Deine div-Suppe hat keinerlei semantische Bedeutung, das wird von Suchmaschinen nicht als Menü erkannt. div-Elemente dienen nur zur Gruppierung, nicht zur inhaltlichen Auszeichnung von Inhalten. Dafür ist HTML nunmal gedacht. Eine Liste (besonders innerhalb eines <nav> bei HTML5) gibt dem Menü die richtige Bedeutung.
 
Hallo.

Zusätzlich zu den von threadi schon erwähnten Fehlern dürfen auch keine Überschriften innerhalb von Links vorkommen.
Das solltest du auch noch dringend ausbessern.

Gruss
Elroy
 
Werbung:
Weil Links als Inlineelemente keine Blockelemente wie Überschriften enthalten dürfen. Andersrum ginge es: Link in Überschriften.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben