nicht verändernde Graphik in der CSS-Navigationsleiste

    Hallo zusammen,

    Ich habe vor einer Woche angefangen meine HP mit css zu erstellen. Bis jetzt hat das auch ganz gut funktioniert. Aber jetzt hab ich aus einem Tuturial eine Navigationsleiste erstellt.

    Mein Problem ist, dass ich die Button der Navigationsleiste je nach Status (aktuell oder nicht angeklickter Button) mit verschiedenen Grafiken hinterlegen möchte.

    Auch sollen sich die Seiten die durch die Navigationsleiste angesteuert werden in einem anderen bzw. übergeordneten Div öffnen.

    ich habe aus dem Tutorial folgenden Code für die HTML-Datei und CSS-Datei erstellt.

    Vielleicht könnt Ihr mir ja hierbei weiterhelfen.


    HTML-Code:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>TestSeite</title>
    <link href="style_copy.css" rel="stylesheet" media="screen" type="text/css">
    </head>

    <body>


    <div id="main">
    <div id="header">
    <ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">ueber mich</a></li>
    <li><a href="#">Ausbildung</a></li>
    </ul>
    </div>
    </div>



    </body>
    </html>



    und der CSS-Code:

    body
    {
    margin: 20px 0px;
    padding: 0px;
    background: white;
    font: 10px Arial;
    color: black;
    border: 1px dotted black;
    }

    #site
    {
    width: 950px;
    height: 800px;
    margin: 0px auto;
    border: 1px dashed red;
    background: transparent;
    }

    #main
    {
    margin-top: 2px;
    width: 745px;
    height: 650px;
    float: ;
    border: 1px dotted orange;
    background: ;
    }

    #header
    {
    float:left;
    width:100%;
    font-size:100%;
    line-height:normal;
    background: url(graphics/navbar_graphics/background_header_transparent.png) repeat-x
    bottom;
    border: 1px solid blue;
    }

    #header ul
    {
    margin:0;
    padding:5px 10px 0;
    list-style:none;
    }

    #header li {
    float:left;
    background:url(graphics/navbar_graphics/button_left.png) no-repeat left top;
    line-height: 100%;
    margin:0;
    padding:0 0 0 20px;
    }


    #header a {
    float: left;
    display:block;
    background:url(graphics/navbar_graphics/button_right.png) no-repeat right top;
    text-decoration:none;
    font-weight:bold;
    color:white;
    }

    /* Commented Backslash Hack
    hides rule from IE5-Mac \*/
    #header a {float:none;}
    /* End IE5-Mac hack */


    #header a, #header strong, #header span {

    display:block;
    background:url(graphics/navbar_graphics/button_right.png) no-repeat right top;
    padding:5px 20px 4px 0px;
    }

    #header #current {
    background-image:url(graphics/navbar_graphics/button_left_on.png);
    }

    #header #current a {
    background-image:url(graphics/navbar_graphics/button_right_on.png);
    padding-bottom:6px;

    }


    Es wird weder eine andere Graphik angezeigt, wenn ich einen Button der Navigationsleiste drücke, noch kann ich die Links in einem Div öffnen lassen.

    Ich habe hierzu schon verschiedene Einträge in Foren gelesen, aber ich verstehe das noch nicht so ganz. Vielleicht könnt Ihr mir ja helfen. Bin schon fast am verzweifeln.

    Danke schon mal für Eure Mühe

    Grüsse

    Mucki

    Weise den Elementen, die eine BG-Grafik haben noch einen width- und height-Wert zu, welcher der jeweiligen Grafik entspricht.

    Der IE 6 hat übrigens Probleme mit transparenten PNG-Dateien.

    Wenn li gefloatet ist, musst du a nicht auch noch floaten.

    Zu deiner andren Frage, ob sich der Inhalt in einem neuen Div öffnet:
    Nein, tut er nicht. Das ist eben ein wesentlicher Unterschied zwischen CSS und Frames. Es wird immer eine Seite komplett geladen.
    Siehe hierzu http://www.ohne-css.gehts-gar.net/0033.php

    hallo sejuma,

    Vielen Dank das du dir Zeit für mich nimmst.

    Ich habe dies ausprobiert mit den height und width-Werten zuordnen bzw. hab ich die Höhen und Breitenangaben dem li-Element zugeordnet. Aber was ist eine BG-Graphik? Ich habe quasi eine Navigationsleiste mit so einem Slidedoor-Effekt. Wenn ich nun bspw. dem li-Element eine feste Höhe und Breite zuordne haut es mir die Navigationsleiste zusammen, denn die hinterlegten Graphiken sind größer als das angezeigte Format. Laut dem Tutorial soll das so sein, da ich auch mal längere Wörter eingeben will und sonst ein Spalt zwischen der linken und der rechten Seite des Buttons entsteht.
    Aber was ich immer noch nicht so ganz verstehe, wie wird den bei drücken eines Buttons die andere Graphik angezeigt. Hab ich im HTML-Code was falsch gemacht?

    Das heißt, du hast eine Kachelgrafik, die sich der Breite des jeweiligen Links anpasst.
    Die width- und height-Werte solltest du nicht li zuweisen, sondern a.
    Wenn es aber eine Kachelgrafik ist, müsste es auch ohne Breiten- und Höhenangabe gehen.
    Ich kann das abstrakt ohne die Grafiken schlecht beurteilen.
    Kannst du die Seite einmal hochladen und einen Link reinstellen?
    Im Prinzip funktioniert es wie hier beschrieben; allerdings kommt es in deinem Fall vielleicht auch auf die Grafkien an. http://www.ohne-css.gehts-gar.net/0022.php

    Ja genau, eine Kachelgrafik. Achso, in das a-Element. ich habe momentan noch keine Internetadresse, somit kann ich die Homepage noch nicht raufladen. Ich könnte dir das ganze als zip Datei per email schicken, wenn dir das nichts ausmacht.

    Vielen Dank !!!

    Mucki

    Die Grafiken werden bei mir sowohl im IE7 als auch im FF angezeigt.
    Der mittlere Link "über mich" hat dabei die hellere Grafik.
    Das entspricht auch dem Code, weil dieser Link noch zusätzlich den ID "current" hat, dem die hellgraue Grafik zugewiesen ist.

    Du brauchst im Prinzip auf jeder Seite eine unterschiedliche Navi.
    Jeweils der Seite, die gerade geöffnet ist, weist du den ID "#current" zu.

    Auf der index.html weist du dem Link zur index.html den ID #current zu und allen anderen Links nicht.
    Auf der Seite "über mich" eben diesem Link und sonst keinem usw.
    Das findest du hier nochmal erklärt, nur nicht mit Grafiken, sondern Farben: http://www.ohne-css.gehts-gar.net/0016.php

    Wenn du zusätzlich noch beim "Überfahren mit der Maus" (Hover) einen Effekt haben willst, dann müsstest du entsprechend noch CSS-Angaben dafür einbauen für #header a:hover

    Ah Ok. ach jetzt hab ichs geschnallt. Ich brauch die Navi in jeder seite... Hört sich so im nachhinein logisch an, aber muss man erst mal draufkommen. Aber auf jedenfall vielen Dank.

    Ich hoffe ich habe deine Nerven nicht zu überstrapaziert!

    viele Grüße

    Mucki