Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS list mit eigenem Icon“

MacLoude

Noch nicht viel geschrieben

Ich habe per Css eine Box gemacht. Darin sind Links enthalten, die per

<ul>
<li class="raute_yellow"><a href="bla1.html">bla1</a></li>
<li class="raute_yellow"><a href="bla2.html">bla2</a></li>
<li class="raute_yellow"><a href="bla3.html">bla3</a></li>
<li class="raute_yellow"><a href="bla4.html">bla4</a></li>
</ul>

eingebunden sind. Die "class" raute_yellow macht nix anderes, als eine eigene Raute(Icon)vor die Aufzählung zu setzen. In allen Browservarianten habe ich kein Problem mit der Anzeige. NUR mal wieder im IE6, da wird nichts angezeigt bzw. nur der letzte Link in der Liste mit der Raute. Alles anderen links sind ohne Raute.

Der css Teil sieht so aus:

<code>

li.raute_yellow {
display: block;
color: #cc0200;
font-size: 125%;
font-weight: normal;
background-color: transparent;
background-image: url(../images/raute.jpg);
background-repeat: no-repeat;
background-position: 0 0.2em;
text-decoration: none;
margin-left: 5px;
padding-left: 20px;
list-style-type: none;
}

</code>

Hier das Bild als Beispiel:


Hat jemand eine Idee für eine Weiche im IE6, der IE7 macht keine Problem genauso wie FF 2/3, Opera 9.xx und Google Chrome.

Danke schon mal vorab...
 

sokie

Mod | Web

AW: CSS list mit eigenem Icon

wenns nur um den IE 6 geht, dann würde ich Conditional Comments benutzen, um den Style anzupassen:
Code:
<!--[if IE 6]>
<style>
/* hier die abweichendenden Styles oder */
</style>
<link rel="stylesheet" href="styles_IE6.css" ... />
<![endif]-->
 

MacLoude

Noch nicht viel geschrieben

AW: CSS list mit eigenem Icon

Conditional Comments sind doch browserweichen die ich angesprochen hatte oder?

Ich habe das Problem gelöst, in dem ich eine Conditional Comments gemacht habe. Hier habe ich aus dem Class eine ID gemacht, die ich in dem Fall zuweise und dann geht es.

Aber danke für deine Antwort.
 
Zuletzt bearbeitet:

sokie

Mod | Web

AW: CSS list mit eigenem Icon

im Prinzip sind Conditional Comments auch eine Art Browserweiche, jedoch nur was die Verschiedenen Versionen de IE angeht.
Du brauchst auch nicht notwendigerweise einen neuen Selektor (Klasse oder ID). Du kannst oben das Element für alle Browser formatieren,und in den CCs für den speziellen Browser (hier IE6) denselben Selektor mit neuen Formatierungen versehen.
wichtig ist nur, dass der Sonderfall NACH den allgemeinen Formatierungen im Quelltext behandelt wird.
 

Thuroc

Profiträumer

AW: CSS list mit eigenem Icon

Ich würde dir dringlichst dazu raten die Klassen und IDs anders zu beschriften. Falls die raute_yellow irgendwann mal nen roter Kreis wird, ist der Code schon schwieriger zu lesen. Wenn dann 10 Änderungen aufeinander treffen ist der Code fürn Ar***

Gib am besten immer den Inhalt des Elementes an z.B. class="list_mainmenu", dann findest du es immer wieder. Wie immer gilt auch hier, der XHTML Code sollte sich in keinster weise am Erscheinungsbild richten...
 

MacLoude

Noch nicht viel geschrieben

AW: CSS list mit eigenem Icon

Danke für eure Tipps und Anregungen. ich werde das mit dem List-style- image mal versuchen.
 

MacLoude

Noch nicht viel geschrieben

AW: CSS list mit eigenem Icon

Mach es nicht mit background-image sondern [FONT=courier new, courier, mono]list-style-image.

ul {
list-style-image:url(../images/raute.jpg);
}

Laut list-style-image: Aufzählungsgrafik: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets soll das auch der IE können.
[/FONT]

Vielleicht hat ja jemand noch eine Idee....
Mit "list-style-image" klappt das sehr gut nur will ich ja den Abstand des Icons zur Schrift auch definieren. Wo muss ich da noch was angeben ?
 

MacLoude

Noch nicht viel geschrieben

AW: CSS list mit eigenem Icon

Habe es selbst gelöst.

Ich hatte einfach das Problem mit den Zuweisungen. Im IE 6 wie immer ein Problem gegenüber anderen Browserversionen.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben