Ergebnis 1 bis 9 von 9

Thema: nicht verändernde Graphik in der CSS-Navigationsleiste

  1. #1
    HTML Newbie
    Registriert seit
    13.09.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    13.09.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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?

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    13.09.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du kannst dir einen kostenlosen Test-Account einrichten, z.B. bei www.funpic.de.
    Kannst aber auch alles incl. Grafiken zippen und hochladen.

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    13.09.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Also ich hab jetzt mal das ganze als Zip Datei mit angehängt.

    Ich hoffe so ist es leichter.

    Vielen Dank
    Angehängte Dateien Angehängte Dateien

  8. #8
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  9. #9
    HTML Newbie
    Themenstarter

    Registriert seit
    13.09.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

Ähnliche Themen

  1. Navigationsleiste wird in Firefox nicht angezeigt
    Von Baldwin im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 10.12.2007, 17:21
  2. Animation von Graphik funktioniert nicht
    Von Corraggiouno im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 02.08.2007, 16:44
  3. Seiten sollen nicht in Navigationsleiste auftauchen
    Von Manuela im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 7
    Letzter Beitrag: 21.06.2007, 13:53
  4. Graphik und Hyperlink
    Von mauritius im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 6
    Letzter Beitrag: 16.10.2003, 23:53
  5. Web und Graphik
    Von Vivie im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 1
    Letzter Beitrag: 04.04.2003, 09:02

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •