XHTMLforum - CSS Navigation mit "umschlossener" Grafik

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)

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!

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.

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

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

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

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

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