Anzeige

CSS list mit eigenem Icon

CSS list mit eigenem Icon | PSD-Tutorials.de

Erstellt von MacLoude, 04.09.2008.

  1. MacLoude

    MacLoude Noch nicht viel geschrieben

    Dabei seit:
    05.09.2006
    Beiträge:
    28
    Ort:
    Kronberg im Taunus / Hessenarea
    CSS list mit eigenem Icon
    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:
    [​IMG]

    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...
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    CSS list mit eigenem Icon
    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 (Text):
    1.  
    2. <!--[if IE 6]>
    3. <style>
    4. /* hier die abweichendenden Styles oder */
    5. </style>
    6. <link rel="stylesheet" href="styles_IE6.css" ... />
    7. <![endif]-->
    8.  
     
    #2      
  3. MacLoude

    MacLoude Noch nicht viel geschrieben

    Dabei seit:
    05.09.2006
    Beiträge:
    28
    Ort:
    Kronberg im Taunus / Hessenarea
    CSS list mit eigenem Icon
    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: 05.09.2008
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    CSS list mit eigenem Icon
    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.
     
    #4      
  5. Thuroc

    Thuroc Profiträumer

    2
    Dabei seit:
    24.05.2007
    Beiträge:
    222
    Geschlecht:
    männlich
    Ort:
    Köln
    Kameratyp:
    Nikon D90
    CSS list mit eigenem Icon
    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...
     
    #5      
  6. Keksinator

    Keksinator Guest

    CSS list mit eigenem Icon
    #6      
  7. MacLoude

    MacLoude Noch nicht viel geschrieben

    Dabei seit:
    05.09.2006
    Beiträge:
    28
    Ort:
    Kronberg im Taunus / Hessenarea
    CSS list mit eigenem Icon
    AW: CSS list mit eigenem Icon

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

    MacLoude Noch nicht viel geschrieben

    Dabei seit:
    05.09.2006
    Beiträge:
    28
    Ort:
    Kronberg im Taunus / Hessenarea
    CSS list mit eigenem Icon
    AW: CSS list mit eigenem Icon

    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 ?
     
    #8      
  9. MacLoude

    MacLoude Noch nicht viel geschrieben

    Dabei seit:
    05.09.2006
    Beiträge:
    28
    Ort:
    Kronberg im Taunus / Hessenarea
    CSS list mit eigenem Icon
    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.
     
    #9      
x
×
×
teststefan