Navigation mit Z-Index

KlTeufelchen84 · 30 November 2010

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title> Navigationsarten
</title>

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

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

</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 id="inhalt">
<p>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und
Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen
an der Küste des Semantik, eines großen Sprachozeans. Ein kleines
Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit
den nö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ächtigen Interpunktion werden die
Blindtexte beherrscht − ein geradezu unorthographisches Leben.
Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name
war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große
Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata,
wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen
ließ sich nicht beirren.
</p>
</div>

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

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

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

</html>

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

roddy · 30 November 2010

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.

Elroy · 30 November 2010

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

KlTeufelchen84 · 3 Dezember 2010

Korrektur

Hier nochmal der Code, hab ihn geordnet:

HTML:

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

    <title> Navigationsarten
    </title>

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

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        
</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="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>
</body>

</html>


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

Timmer · 3 Dezember 2010

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.

mermshaus · 3 Dezember 2010

Dazu muss wohl JavaScript her.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

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

PS: „standart“ übrigens mit d.

Navigation mit Z-Index

KlTeufelchen84

Neues Mitglied

roddy

Mitglied

Elroy

Senior HTML'ler

KlTeufelchen84

Neues Mitglied

Timmer

Mitglied

mermshaus

Senior HTML'ler

Neueste Beiträge