zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Navigation mit "umschlossener" Grafik

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.09.2007, 15:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2007
Beiträge: 6
name befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.09.2007, 15:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.09.2007, 19:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2007
Beiträge: 6
name befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von name (24.09.2007 um 19:53 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 24.09.2007, 20:25
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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

Geändert von etux (24.09.2007 um 21:04 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 24.09.2007, 22:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2007
Beiträge: 6
name befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 24.09.2007, 22:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 24.09.2007, 22:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2007
Beiträge: 6
name befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Navigation per CSS dedi02 CSS 1 09.05.2009 04:37
Navigation mit CSS erstellen Boof CSS 7 17.02.2009 15:23
Falsche Darstellung im Internet Explorer rw1981 CSS 3 06.02.2009 12:51
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 17:25
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 18:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:41 Uhr.