Navigation mit Z-Index

html.de-Forum HTML, XHTML & CSS
1

Hallo liebe Leute,

ich sitze hier in einem Kurs für HTML, CSS etc…

Ich habe nun die Aufgabe eine Navigation über den z-Index zu machen, nur irgendwie komme ich nicht auf den letzten Schritt.
Wenn man auf die Button klickt soll man den passenden Inhalt anfezeigt werden…

Hier mein Code:

HTML

<title> Navigationsarten
</title>

<style type="text/css">
    @import url(standart.css);
</style>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

1. Textnavigation

    <ul id="navi">
        <li id="button1"><a href="#inhalt">Link1</a></li>
        <li id="button2"><a href="#inhalt2">Link2</a></li>
        <li id="button3"><a href="#inhalt3">Link3</a></li>
        <li id="button4"><a href="#inhalt4">Link4</a></li>
        <li id="button5"><a href="#inhalt5">Link5</a></li>
    </ul>


    <div id="inhalt">
        <p>
        Weit hinten, hinter den Wortbergen, fern der L&auml;nder Vokalien und 
        Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen 
        an der K&uuml;ste des Semantik, eines gro&szlig;en Sprachozeans. Ein kleines 
        B&auml;chlein namens Duden flie&szlig;t durch ihren Ort und versorgt sie mit 
        den n&ouml;tigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem 
        gebratene Satzteile in den Mund fliegen.
        </p>
    </div>
    
    <div id="inhalt2">
        <p>
        Nicht einmal von der allm&auml;chtigen Interpunktion werden die 
        Blindtexte beherrscht &minus; ein geradezu unorthographisches Leben. 
        Eines Tages aber beschlo&szlig; eine kleine Zeile Blindtext, ihr Name 
        war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der gro&szlig;e 
        Oxmox riet ihr davon ab, da es dort wimmele von b&ouml;sen Kommata, 
        wilden Fragezeichen und hinterh&auml;ltigen Semikoli, doch das Blindtextchen 
        lie&szlig; sich nicht beirren.  
        </p>
    </div>
    
    <div id="inhalt3">
        <p>
        Es packte seine sieben Versalien, schob sich sein Initial in den 
        G&uuml;rtel und machte sich auf den Weg. Als es die ersten H&uuml;gel 
        des Kursivgebirges erklommen hatte, warf es einen letzten Blick zur&uuml;ck 
        auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von 
        Alphabetdorf und die Subline seiner eigenen Stra&szlig;e, der Zeilengasse.
        </p>
    </div>
    
    <div id="inhalt4">
        <p>
        Wehm&uuml;tig lief ihm eine rethorische Frage &uuml;ber die Wange, 
        dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy 
        warnte das Blindtextchen, da, wo sie herk&auml;me w&auml;re sie zigmal 
        umgeschrieben worden und alles, was von ihrem Ursprung noch &uuml;brig 
        w&auml;re, sei das Wort "und" und das Blindtextchen solle umkehren und 
        wieder in sein eigenes, sicheres Land zur&uuml;ckkehren.
        </p>
    </div>
    
    <div id="inhalt5">
        <p>
        Doch alles Gutzureden konnte es nicht &uuml;berzeugen und so dauerte 
        es nicht lange, bis ihm ein paar heimt&uuml;ckische Werbetexter auflauerten, 
        es mit Longe und Parole betrunken machten und es dann in ihre Agentur 
        schleppten, wo sie es f&uuml;r ihre Projekte wieder und wieder mi&szlig;brauchten. 
        Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.
        </p>
    </div>


CSS
*{margin:0; padding:0;}

body
{
margin-left:auto;
width:300px;
margin-right:auto;
margin-top:20px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
position:relative;
z-index:1;
}

#inhalt, #inhalt2, #inhalt3, #inhalt4, #inhalt5
{
padding:10px;
border:solid 1px #660000;
background-color:#FFF;
position:absolute;
width:280px;
height:130px;
}

#inhalt, #button1
{
z-index:6;
}

#inhalt2, #button2
{
z-index:5;
}

#inhalt3, #button3
{
z-index:4;
}

#inhalt4, #button4
{
z-index:3;
}

#inhalt5, #button5
{
z-index:2;
}

#button1, #button2, #button3, #button4,
#button5
{
width:60px;
height:20px;
}

#navi
{
width: 100%;
height:20px;
}

h1
{
font-size:12px;
color:#8A8A8A;
margin-bottom:25px;
text-decoration:underline;
}

/Navigation/
#navi li
{
list-style-type:none;
float:left;
padding-top:4px;
}

#navi li a
{
text-decoration:none;
padding-left:15px;
padding-right:15px;
padding-bottom:4px;
padding-top:2px;
font-weight:bold;
}

#navi :hover, #navi :focus
{
color:#FFF;
}

#navi :hover, #navi :focus
{
background-color:#660000;
}

#navi li a
{
color:#660000;
}

HILFE

2

Hi, bitte verwende die Codetags und versuch dich ein bisschen genauer auszudrücken, evtl kannst du den code auch etwas kürzen, es reicht ja wenn eine oder zwei Schaltflächen hier diskutiert werden, dann wird dir auch gerne geholfen.

3

Hallo.

Der Bereich mit dem höchsten z-index wird zuoberst angezeigt, die anderen in der Reihenfolge des z-index darunter.
So baut man kein Menü, und so wird das auch nicht funktionieren.

Gruss
Elroy

4

Korrektur

Hier nochmal der Code, hab ihn geordnet:

[HTML]HTML

<title> Navigationsarten
</title>

<style type="text/css">
    @import url(standart2.css);
</style>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

1. Textnavigation

    <ul id="navi">
        <li id="button1"><a href="#inhalt">Link1</a></li>
        <li id="button2"><a href="#inhalt2">Link2</a></li>
        <li id="button3"><a href="#inhalt3">Link3</a></li>
        <li id="button4"><a href="#inhalt4">Link4</a></li>
        <li id="button5"><a href="#inhalt5">Link5</a></li>
    </ul>

    <div >
        <p id="inhalt">
        Weit hinten, hinter den Wortbergen, fern der L&auml;nder Vokalien und 
        Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen 
        an der K&uuml;ste des Semantik, eines gro&szlig;en Sprachozeans. Ein kleines 
        B&auml;chlein namens Duden flie&szlig;t durch ihren Ort und versorgt sie mit 
        den n&ouml;tigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem 
        gebratene Satzteile in den Mund fliegen.
        </p>
    
        <p id="inhalt2">
        Nicht einmal von der allm&auml;chtigen Interpunktion werden die 
        Blindtexte beherrscht &minus; ein geradezu unorthographisches Leben. 
        Eines Tages aber beschlo&szlig; eine kleine Zeile Blindtext, ihr Name 
        war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der gro&szlig;e 
        Oxmox riet ihr davon ab, da es dort wimmele von b&ouml;sen Kommata, 
        wilden Fragezeichen und hinterh&auml;ltigen Semikoli, doch das Blindtextchen 
        lie&szlig; sich nicht beirren.
        </p>
    
        <p id="inhalt3">
        Es packte seine sieben Versalien, schob sich sein Initial in den 
        G&uuml;rtel und machte sich auf den Weg. Als es die ersten H&uuml;gel 
        des Kursivgebirges erklommen hatte, warf es einen letzten Blick zur&uuml;ck 
        auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von 
        Alphabetdorf und die Subline seiner eigenen Stra&szlig;e, der Zeilengasse.
        </p>
    
        <p id="inhalt4">
        Wehm&uuml;tig lief ihm eine rethorische Frage &uuml;ber die Wange, 
        dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy 
        warnte das Blindtextchen, da, wo sie herk&auml;me w&auml;re sie zigmal 
        umgeschrieben worden und alles, was von ihrem Ursprung noch &uuml;brig 
        w&auml;re, sei das Wort "und" und das Blindtextchen solle umkehren und 
        wieder in sein eigenes, sicheres Land zur&uuml;ckkehren.
        </p>
    
        <p id="inhalt5">
        Doch alles Gutzureden konnte es nicht &uuml;berzeugen und so dauerte 
        es nicht lange, bis ihm ein paar heimt&uuml;ckische Werbetexter auflauerten, 
        es mit Longe und Parole betrunken machten und es dann in ihre Agentur 
        schleppten, wo sie es f&uuml;r ihre Projekte wieder und wieder mi&szlig;brauchten. 
        Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.
        </p>
    </div>

CSS
*{margin:0; padding:0;}

body
{
margin-left:auto;
width:300px;
margin-right:auto;
margin-top:20px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
position:relative;
z-index:1;
}

#inhalt, #inhalt2, #inhalt3, #inhalt4, #inhalt5
{
padding:10px;
border:solid 1px #660000;
background-color:#FFF;
position:absolute;
width:280px;
height:130px;
}

#inhalt, #button1
{
z-index:60;
}

#inhalt2, #button2
{
z-index:50;
}

#inhalt3, #button3
{
z-index:40;
}

#inhalt4, #button4
{
z-index:30;
}

#inhalt5, #button5
{
z-index:20;
}

#navi
{
width: 100%;
height:20px;
}

h1
{
font-size:12px;
color:#8A8A8A;
margin-bottom:25px;
text-decoration:underline;
}

/Navigation/
#navi li
{
list-style-type:none;
float:left;
padding-top:4px;
width:60px;
height:20px;
}

#navi li a
{
text-decoration:none;
padding-left:15px;
padding-right:15px;
padding-bottom:4px;
padding-top:2px;
font-weight:bold;
color:#660000;
}

#navi a:hover, #navi a:focus, #navi a:active
{
color:#FFF;
background-color:#660000;
z-index:100;
}[/HTML]

5

Das bringt so nichts! Les dir mal die Forenregeln durch, da steht auch drinnen, dass du die Codetags benutzen sollst. Es wird sich keiner die Mühe machen und versuchen, deinen Code zu interpretieren.

6

Dazu muss wohl JavaScript her.

[html]

<head>
    <title>Navigationsarten</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function () {
        $('#navi li').bind('click', function () {
            var id = $(this).attr('id');
            $('div p').css({display: 'none'});
            $('#inhalt' + id.substr(6)).css({display: 'block'});
        });
    });

    </script>

    <style type="text/css">
        @import url(standart2.css);
    </style>
</head>

<body>
    <h1>1. Textnavigation</h1>

    <ul id="navi">
        <li id="button1"><a href="#inhalt">Link1</a></li>
        <li id="button2"><a href="#inhalt2">Link2</a></li>
        <li id="button3"><a href="#inhalt3">Link3</a></li>
        <li id="button4"><a href="#inhalt4">Link4</a></li>
        <li id="button5"><a href="#inhalt5">Link5</a></li>
    </ul>

    <div>
        <p id="inhalt1">
            Weit hinten, hinter den Wortbergen, fern der L&auml;nder Vokalien und
            Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen
            an der K&uuml;ste des Semantik, eines gro&szlig;en Sprachozeans. Ein kleines
            B&auml;chlein namens Duden flie&szlig;t durch ihren Ort und versorgt sie mit
            den n&ouml;tigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem
            gebratene Satzteile in den Mund fliegen.
        </p>

        <p id="inhalt2">
            Nicht einmal von der allm&auml;chtigen Interpunktion werden die
            Blindtexte beherrscht &minus; ein geradezu unorthographisches Leben.
            Eines Tages aber beschlo&szlig; eine kleine Zeile Blindtext, ihr Name
            war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der gro&szlig;e
            Oxmox riet ihr davon ab, da es dort wimmele von b&ouml;sen Kommata,
            wilden Fragezeichen und hinterh&auml;ltigen Semikoli, doch das Blindtextchen
            lie&szlig; sich nicht beirren.
        </p>

        <p id="inhalt3">
            Es packte seine sieben Versalien, schob sich sein Initial in den
            G&uuml;rtel und machte sich auf den Weg. Als es die ersten H&uuml;gel
            des Kursivgebirges erklommen hatte, warf es einen letzten Blick zur&uuml;ck
            auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von
            Alphabetdorf und die Subline seiner eigenen Stra&szlig;e, der Zeilengasse.
        </p>

        <p id="inhalt4">
            Wehm&uuml;tig lief ihm eine rethorische Frage &uuml;ber die Wange,
            dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy
            warnte das Blindtextchen, da, wo sie herk&auml;me w&auml;re sie zigmal
            umgeschrieben worden und alles, was von ihrem Ursprung noch &uuml;brig
            w&auml;re, sei das Wort "und" und das Blindtextchen solle umkehren und
            wieder in sein eigenes, sicheres Land zur&uuml;ckkehren.
        </p>

        <p id="inhalt5">
            Doch alles Gutzureden konnte es nicht &uuml;berzeugen und so dauerte
            es nicht lange, bis ihm ein paar heimt&uuml;ckische Werbetexter auflauerten,
            es mit Longe und Parole betrunken machten und es dann in ihre Agentur
            schleppten, wo sie es f&uuml;r ihre Projekte wieder und wieder mi&szlig;brauchten.
            Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.
        </p>
    </div>
</body>
[/html]

[code]*{margin:0; padding:0;}

body
{
margin-left:auto;
width:300px;
margin-right:auto;
margin-top:20px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
position:relative;
z-index:1;
}

#inhalt1, #inhalt2, #inhalt3, #inhalt4, #inhalt5
{
padding:10px;
border:solid 1px #660000;
background-color:#FFF;
position:absolute;
width:280px;
height:130px;
}

#inhalt1, #button1
{
z-index:60;
}

#inhalt2, #button2
{
z-index:50;
}

#inhalt3, #button3
{
z-index:40;
}

#inhalt4, #button4
{
z-index:30;
}

#inhalt5, #button5
{
z-index:20;
}

#navi
{
width: 100%;
height:20px;
}

h1
{
font-size:12px;
color:#8A8A8A;
margin-bottom:25px;
text-decoration:underline;
}

/Navigation/
#navi li
{
list-style-type:none;
float:left;
padding-top:4px;
width:60px;
height:20px;
}

#navi li a
{
text-decoration:none;
padding-left:15px;
padding-right:15px;
padding-bottom:4px;
padding-top:2px;
font-weight:bold;
color:#660000;
}

#navi a:hover, #navi a:focus, #navi a:active
{
color:#FFF;
background-color:#660000;
z-index:100;
}[/code]

PS: „standart“ übrigens mit d.