Eigene Listenpunkte und zusätzlich Hintergrundbild

[Daniel Torst]

HAllo Community,

ich hab ein problem und mein Verständnis reicht nich aus um das ganze zu lösen :( ich hoffe auf eure Hilfe

Und zwar hab ich ein Menü, das aus einer Liste besteht, das mit eigenen Listenpunkt-Grafiken (rechts )versehen werden soll zusätzlich will ich aber noch eine Trennstrichgrafik zwischen den Menüpunkten verwenden bin mir aber nich klar wie ich das machen kann

Menü:

<div id="menu">  
<ul class="level_1">  
<li>Home</li>  
<li><a href="link1.html">Link 1</a></li>  
<li><a href="link2.html">Link 2</a></li>  
<li><a href="link3.html">Link 3</a></li>  
</ul>  
</div>

wenn ich mit der eigenen Listenpunkt-Grafik das so mache, wie ich es bisher immer getan habe geht das ganze nicht, da ich bereits ein Hintergrundbild einsetze:

Früher:

#menu ul li  
{  
	display:block;  
	margin:0;  
	padding:0 20px 0 22px;  
	line-height:22px;  
	background:url("listImg.gif") left center no-repeat;  
	list-style: none;  
}

der obere code geht nur, wenn ich zusätzlich keinen Trennstrich nutzen will

irgendwie müßte ich wohl nun das ganze NEU  umstellen oder ?

NEU:

  
#menu ul{  
	display:block;  
	padding:0 20px 0 22px;  
	background:url("listImg.gif") right center no-repeat;  
	list-style: none;  
}  
#menu ul li  
{  
	background:url("trennstrich.gif") left bottom no-repeat;  
}  
  

aber leider klappt es dann nich mit der position der eigenen Listenpunktgrafik :(

ich hoffe jemand kann imr helfen, das problem zu lösen!

viele grüße
Daniel

[dave]

Hi,

du könntest die http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_image@title=Listenpunkt-Grafik auch als solche verwenden anstelle des Hintergrundbildes.
Du könntest für die Trennlinie auch eine http://de.selfhtml.org/css/eigenschaften/rahmen.htm#border@title=Rahmenlinie verwenden.

Oder entsprechend nur eins der beiden + wie gehabt eine Hintergrundgrafik.

Oder, falls du nicht alle noch so alten und doofen Browser unterstützen musst (und sich Lösung 1 nicht eignet) kannst du auch mehrere Hintergrundbilder zu einem Element hinzufügen.

~dave

[Daniel Torst]

Hi,

du könntest die http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_image@title=Listenpunkt-Grafik auch als solche verwenden anstelle des Hintergrundbildes.
Du könntest für die Trennlinie auch eine http://de.selfhtml.org/css/eigenschaften/rahmen.htm#border@title=Rahmenlinie verwenden.

Oder entsprechend nur eins der beiden + wie gehabt eine Hintergrundgrafik.

Oder, falls du nicht alle noch so alten und doofen Browser unterstützen musst (und sich Lösung 1 nicht eignet) kannst du auch mehrere Hintergrundbilder zu einem Element hinzufügen.

~dave

ich weiß ja nicht obs an meinem padding oder margin lag, aber mit  list-style-image wurde mir keine grafik angeziegt :( war natürlich mein erster gedanke... bin da echt am verzweifeln

was ältere Browser angeht.. naja. inkl IE 6 muss das noch funktionieren..

[dave]

Hi,

ich weiß ja nicht obs an meinem padding oder margin lag, aber mit  list-style-image wurde mir keine grafik angeziegt :( war natürlich mein erster gedanke... bin da echt am verzweifeln

Mit speziellen Entwickler-Tools (z.B. Firebug für Firefox) findest du das leicht selbst raus.

was ältere Browser angeht.. naja. inkl IE 6 muss das noch funktionieren..

Der IE6 hat in Deutschland keinen großen Wert mehr. Siehe auch Statistik von Statcounter (IE6 2%) oder "Statistik" von Webtrekk (IE6 4.17%).

Außerdem finde ich es nicht gut den Browser weiter zu unterstützen, so lange die Funktionalität gewährleistet ist soll es so aussehen wie es will.

~dave

[dave]

War zu doof die Seite zu bedienen

Statistik von Statcounter (IE6 2%)

Ist ja nur vom 9.-10. Dezember...

Aber von July bis Dezember siehts noch schlechter für IE6 aus.

~dave

[Daniel Torst]

Außerdem finde ich es nicht gut den Browser weiter zu unterstützen, so lange die Funktionalität gewährleistet ist soll es so aussehen wie es will.

~dave

Hi dave,

es handelt sich bei der seite um die eines zahnarztes.. auf dem auch piwik läuft... da haben gut 40% noch den IE6 :(
daher muss ich das berückstigen!

gruss Daniel

[Matthias Apsel]

Om nah hoo pez nyeetz, Daniel Torst!

ich weiß ja nicht obs an meinem padding oder margin lag, aber mit  list-style-image wurde mir keine grafik angeziegt :( war natürlich mein erster gedanke... bin da echt am verzweifeln

was meinst du denn, was list-style: none; bedeutet? Matthias

[Gunnar Bittersmann]

@@Daniel Torst:

nuqneH

<div id="menu">

<ul class="level_1">
<li>Home</li>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
</ul>
</div>

>   
> wenn ich mit der eigenen Listenpunkt-Grafik das so mache, wie ich es bisher immer getan habe geht das ganze nicht, da ich bereits ein Hintergrundbild einsetze:  
  
Mit 'li' und 'a' hast du zwei Elemente, denen du jeweils eine Hintergrundgrafik geben kannst.  
  
Wofür soll eigentlich der Container div[id="menu"] gut sein? Sieht unnütz aus. Du kannst auch dem ul-Element die ID geben.  
  
[Nützlich](http://forum.de.selfhtml.org/archiv/2010/12/t202467/#m1367692) hingegen könnte das ARIA-Attribut @role="navigation" sein.  
  
Und der Menüpunkt der aktuelle Seite sollte kein Link sein. (Punkt 10 der [zehn meist-missachteten Homepage-Design-Richtlinien](http://www.usability.ch/Alertbox/20031110.htm) [Nielsen])  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)