XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Navigation mit "umschlossener" Grafik (http://xhtmlforum.de/showthread.php?t=48060)

name 24.09.2007 16:17

CSS Navigation mit "umschlossener" Grafik
 
Hallo,

ich möchte ein horizontales CSS Navigation mit einer Art "umschlossenen" Grafik erstellen.

Das heißt, ich erstelle eine normale Liste. Vor und nach jedem Eintrag (<li> und </li>) möchte ich möchte ich dass eine bestimmte Grafik erscheint.

Also dass es etwa so aussieht:

(x)HOME(y) (x)KONTAKT(y) (x)USW.(y)

Dabei symbolisieren (x) und (y) die zwei verschiedenen Grafiken.

Ich habe versucht z.B. die Grafik (X) mit hilfe von <p class="before"> einzubetten, indem ich in CSS die Klasse "anfang" definiert habe, diesem feste Breite und Höhe samt ein Hintegrundbild gegeben habe. Das selbe für (Y).

Das ganze sieht dann so aus:

Code:

            <ul id="menu">
            <p class="before"></p><li>Home</li><p class="after"></p>
            <p class="before"></p><li>Menu</li><p class="after"></p>
        </ul>

CSS:
Code:

ul#menu {
        margin:0;
        padding:0;
        list-style:none;
}

ul#menu li {
        display:block;
        float:left;
        height:50px;
}

p.before {
        width:6px;
        height:50px;
        display:block;
        float:left;
        margin:0;
        padding:0;
        background:url(../images/button_left.gif);
}

p.after {
        width:8px;
        height:50px;
        display:block;
        float:left;
        margin:0;
        padding:0;
        background:url(../images/button_right.gif);
}

Doch der IE (sowohl 6 als auch 7) möchte IMMER das was nach </li> kommt eine Zeile nach unten versetzten, ausser es ist selbst ein <li>.

Da ich ein horizontales Menu haben möchte, ist das nicht so gut. Und ich möchte es auch nicht umschreiben zu
Code:

<p class="before"></p><li>Home</li><li class="after"></li>
<li class="before"></li><li>Menu</li><li class="after"></li>

da dies wirklich unschön ist (obwohl es so auch mit dem IE funktioniert...)

Vielleicht könnt ihr mir helfen oder wisst wie man es ganz ohne den <p>'s oder <span>'s machen kann?

Habe es nämlich auch schon mit den pseudos :before und :after versucht, nur funktionieren die leider nicht für den IE...

Vielen Dank schonmal!

fricca 24.09.2007 16:26

p-Elemente können keine direkten Nachfahren von ul sein. Dein Code ist fehlerhaft -- validieren!

Wenn es ein Menü werden soll, dann gibt es sicher Links. Du hast also li-Elemente und a-Elemente und kannst einem jeden eine Hintergrundgrafik verpassen.

name 24.09.2007 20:41

Hallo,

Danke für deine Hilfe!

Leider klappt es immernoch nicht.

Auch wenn ich es als <a>-links definiere verschiebt IE das Bild immernoch nach dem </li> nach unten in eine neue Zeile.
(Auch wenn ich die <a>-tags innerhalb des <li>-tags einfüge!)

Code:

            <ul id="menu">
                <a href="#" class="before"></a><li>Home</li><a href="#" class="after"></a>
        </ul>

Code:

ul#menu, ul#menu ul {
        margin:0;
        padding:0;
        list-style:none;
}

ul#menu li {
        display:block;
        float:left;
        height:50px;
}

ul#menu a.before {
        width:6px;
        height:50px;
        display:block;
        float:left;
        margin:0;
        padding:0;
        background:url(../images/button_left.gif);
}

ul#menu a.after {
        width:8px;
        height:50px;
        display:block;
        float:left;
        margin:0;
        padding:0;
        background:url(../images/button_right.gif);
}


Woran kann das liegen?


Danke nochmals,

MfG,
name

etux 24.09.2007 21:25

Hallo name,
so hat fricca das nicht gemeint. In jedem <li>-Element steht ein <a>-Element. Die Grafik x wird als HG für den <li> links definiert, die Grafik y als HG für das <a> rechts. Ohne "before" und "after".
Nur grob als Beispiel:

Code:

#menu li {
        padding-left: (breite von x)px;
        background: url(x.gif) no-repeat left center;
}
#menu a {
        padding-right: (breite von y)px;
        background: url(y.gif) no-repeat right center;
}

Code:

<ul id="menu">
                <li><a href="#">Home</a></li>
</ul>

Grüße: Emil

name 24.09.2007 23:24

Achso, vielen Dank!

Damit komme ich der Sache schon sehr sehr nah :)

Nur ist mein Problem jetzt, dass ich in Wirklichkeit für das <li> bereits einen Hintergrund definiert habe (ich wollte es nur noch nicht erwähnen, da ich nicht wusste, dass es relevant sein könnte).

Das Hintergrundbild wiederholt sich (also repeat-x), so dass es sich der Breite des Menu-textes (z.B. HOME) anpasst.

Man kann ja leider keine zwei Hintergründe für z.B. ein <li> definieren.

Würde mich wirklich sehr freuen, wenn man mir auch noch dabei helfen kann.


Vielen Dank schonmal!

MfG,
name

fricca 24.09.2007 23:28

Setz in deinen Link noch ein span -- um den Linktext herum, nicht daneben. Dann hast du genug Elemente.


Zitat:

Nur ist mein Problem jetzt, dass ich in Wirklichkeit für das <li> bereits einen Hintergrund definiert habe (ich wollte es nur noch nicht erwähnen, da ich nicht wusste, dass es relevant sein könnte).
Lies bitte das: http://xhtmlforum.de/40080-fuer-frag...twortende.html

name 24.09.2007 23:33

Alles klar, vielen Dank (auch für den Link, hast ja recht - werde ich beim nächten Mal befolgen! :))

So, damit klappt jetzt alles wunderbar!!

Danke nochmals

MfG
name


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:30 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020