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

Horizontale Navigation

Status
Für weitere Antworten geschlossen.
S

snooze7

Neues Mitglied
Hallo zusammen,

ich probiere jetzt schon ewig rum, aber finde einfach die Lösung nicht.

Hier erstmal mein Html Text (die meta tags und das body schenk ich mir jetzt mal):

Code: 
<ul id="service">
            <li><a>Inhaltsverzeichnis</a></li>
            <li><a>Druckansicht</a></li>
            <li><a>Kontaktformular</a></li>
            <li><a>Technische Hilfe</a></li>
        </ul>

Und meine css Datei:

Code: 
#service {
    background: black url(../images/service_hintergrund.gif) repeat-x left top;
    float: right;
    width: 100%;
    w\idth: 100%;        
    padding: 0 20px 0 0;
}

#service li { 
    float: right;
    list-style-type: none;
}

#service li a { 
    font: 1em/1.5em Arial, sans-serif; 
    color: #dfe1e2; 
    color: white; 
    background-image: url(../images/service_hintergrund.gif); 
    background-repeat: repeat-x; 
    background-attachment: scroll; 
    background-position: left bottom; 
    float: left; 
    margin: 0; 
    padding: 6px; 
    text-align: center; 
    border-left: 1px solid white; 
    border-right: 1px solid black; 
    position: relative;
}

Bisher habe ich das ganze in "position: relative" deklariert. Jedoch möchte ich gerne diese Navigation beliebig auf meiner Seite einsetzen können, sprich die "position: absolute" muss her. Jedoch bekomme ich das nicht hin. Wenn ich einfach "relative" in "absolute" umwandle, verschiebt sich meine ganze Navigation nach rechts auf einen Fleck. Was kann ich tun?!

Am liebsten wäre mir eine Lösung, die ganze "ul" in eine "div"-Ebene zu ziehen und die "div"-Ebene dann die entsprechende Position zuweise. Hat aber bisher auch leider nicht geklappt....

Und ich weiß das in selfhtml etwas über mein Thema steht, jedoch werden dort keine Bilder verwendet und ich sonst immer das Problem habe, dass der Text NICHT in der Mitte des Hintergrundbildes ist.

Hat vielleicht jemand einen Lösungansatz oder fertige Lösung für mich?

Besten Dank

Grüße
 
Zuletzt bearbeitet:
code-tags?! Meinst du damit die fehlenden Meta Tags oder das Body-Element?!
Keine Ahnung was du jetzt genau meinst, aber hier das vollständige Paket:

index.html:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>      
<title>Basisvorlage</title>
<link rel="stylesheet" href="css/basis.css" type="text/css" media="screen">
</head>        

<body>

    <div id="servicenavigation">
    <a name="anker_servicenavigation"><span class="hidden">Servicenavigation</span></a>
        <ul id="service">
            <li><a>Inhaltsverzeichnis</a></li>
            <li><a>Druckansicht</a></li>
            <li><a>Kontaktformular</a></li>
            <li><a>Technische Hilfe</a></li>
        </ul>
    </div>
</body>
</html>

css-Datei


Code: 
#servicenavigation { position: absolute; top: 0; left: 0; width: 100%; height: 30px; }

#service {
    background: black url(../images/service_hintergrund.gif) repeat-x left top;
    float: right;
    width: 100%;
    w\idth: 100%;        
    padding: 0 20px 0 0;
}

#service li { 
    float: right;
    list-style-type: none;
}

#service li a { 
    font: 1em/1.5em Arial, sans-serif; 
    color: #dfe1e2; 
    color: white; 
    background-image: url(../images/service_hintergrund.gif); 
    background-repeat: repeat-x; 
    background-attachment: scroll; 
    background-position: left bottom; 
    float: left; 
    margin: 0; 
    padding: 6px; 
    text-align: center; 
    border-left: 1px solid white; 
    border-right: 1px solid black; 
}
 
Zuletzt bearbeitet:
Moin,

wenn ich das richtig sehe ist das ein grafisches Menü.

Das ist ein einfaches Beispiel eines grafischen Menüs. In diesem Fall ohne Gilder/Levin, da
der Linktext nicht in der Grafik hockt sondern nur normal im Quelltext steht, d.h. die Grafik
bildet nur den Hintergrund zum Linktext.
Das span wird benötigt um den Linktext später auch vertikal per padding in der Grafik zu positionieren.

Quelltext:
Code: 
<ul id="navigation">
 <li id="navi01"><strong><span>Startseite</span><strong></li>
 <li id="navi02"><a href="galerie.htm"><span>galerie</span></a></li>
 <li id="navi03"><a href="kontakt.htm"><span>Kontakt</span></a></li>
 </ul>

Die Menügrafik ist 190x100px groß und beeinhaltet in der oberen Hälfte den Normalzustand der Links
und in der unteren Hälfte den hover/focus-Zustand der Links. Sollte der active-Zustand auch noch mit
drauf, wäre die Grafik 190x150px groß und würde vertikal alle drei Zustände beherbergen.
Dann müsste aber dieser Zustand natürlich auch noch extra deklariert werden.

Die ul bekommt eine feste Breite.
Code: 
#navigation  {
      width:240px;
}

Die Listenpunkte bekommen Breite und Höhe entsprechend den Abmessungen der Grafik bezogen auf einen Linkzustand.
Code: 
#navi01,
#navi02,
#navi03 {
    width:190px;
    height:50px;
}

a und strong bekommen display:block und die volle Größe des Elternelements ( li! )
zugewiesen. Durch text-align:center wird die Schrift horizontal in der Grafik ausgerichtet.
Code: 
#navi01 a,
#navi01 strong,
#navi02 a,
#navi02 strong,
#navi03 a,
#navi03 strong   {
     display:block;
     width:100%;
     height:100%;
     text-align:center;
}

Der Normalzustand der Links wird deklariert
Code: 
#navi01 a,
#navi02 a,
#navi03 a   {
    background:url(grafik.jpg) no-repeat 0 0;
}

Deklaration des hover/focus-Zustandes. Der untere Teil der Grafik wird per background-position nach oben geschoben.
Code: 
#navi01 a:hover,
#navi01 a:focus,
#navi02 a:hover,
#navi02 a:focus,
#navi03 a:hover,
#navi03 a:focus   {
    width:100%;
    height:100%;
    color:#2e5c89;
    background:url(../images/navi.jpg) no-repeat 0px -50px;
}

Damit der aktuelle Menüpunkt immer hervorgehoben ist bekommt strong die Deklaration des hover/focus-Zustandes zugewiesen:
Code: 
#navi01 strong,
#navi02 strong,
#navi03 strong   {
    background:url(grafik.gif) no-repeat 0px -50px;
}

span bekommt display:block und entsprechendes padding-top damit der Linktext auch vertikal in der Grafik richtig positioniert wird.
Code: 
#navigation #navi01 a span,
#navigation #navi01 strong span,
#navigation #navi02 a span,
#navigation #navi01 strong span,
#navigation #navi03 a span,
 #navigation #navi01 strong span, {
    display:block;
    padding-top:15px;
}

Evtl. kann es sein das die Schrift des Menüs beim zoomen unter anderen Elementen verschwindet, dann bekommt li position:relative und a/strong position:absolute;.
Normal ist das aber nicht notwendig.

koslowski
 
snooze7 schrieb:
Am liebsten wäre mir eine Lösung, die ganze "ul" in eine "div"-Ebene zu ziehen und die "div"-Ebene dann die entsprechende Position zuweise.
Zum Vergrößern anklicken....
Mal ne Zwischenfrage: Was soll das bringen?

Du hast ein Block-Element, die Liste. Darum willst Du noch ein Block-Element packen und dieses dann positionieren? Was hindert Dich, die Liste selbst zu positionieren? Oder willst Du am Ende die Liste in ein div, das auch in ein div und das wieder in ein div packen, um dann das äußere zu positionieren? Da denkst Du Dir doch auch "was fürn Schwachsinn!". Aber eine Liste in ein allgemeines Block-Element zu packen, um das dann zu positionieren ist genau das selbe.

<div> ist dazu da, mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren.

Das nur so mal am Rande, weil ich nicht weiß, woher der Irrglaube kommt, man könne nur div-Tags CSS-Eigenschaften zuweisen.

Schöne Grüße,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben