Icon's in 2 Reihen anlegen

Deutsches Forum
1

Hallo,

versuche die ganze Zeit die ICON’s in 2 Reihen anzulegen, aber irgendwie haut es nicht richtig hin. Ich veröffentliche mal den Code und das jeweilige CSS - Code sowie das Screenshot.


<!-- ANFANG ICONS -->
<div id="icons">
...<div>
......<ul>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
......</ul>
...</div>
...<br style="clear: both;">
...<div>
......<ul>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
.........<li> <a href="#"></a> </li>
......</ul>
...</div>
...<br style="clear: both;">
</div>
<!-- ENDE ICONS -->



#icons { width:1000px; }
#icons ul { margin: 0; padding: 0; }
#icons li { margin: 0; display:inline; }
#icons a { display: block; width: 111px; height: 111px; background-image: url(/_oxid_092010/out/basic/img/icons/besteck.jpg); float:left; }
#icons a:active { background-image: url(/_oxid_092010/out/basic/img/icons/besteck_hover.jpg); }
#icons a:hover { background-image: url(/_oxid_092010/out/basic/img/icons/besteck_hover.jpg); }

Ist es möglich die Kategorien mit den jeweiligen ICONS zu verknüpfen? Wichtig ist, dass die Unterkategorieren dann oben im Mittelfeld angezeigt werden. Irgendwie hauts bei mir nicht hin. Jetzt bin ich aber auch noch am überlegen, jedes <li> eine class zuzuweisen, da ja 16 verschiedene ICONS sind.

LG Dirk

2

Hier mal eine Version die funktionieren sollte. Ist noch nicht im IE oder getestet und muss noch an deine Bedürfnisse angepasst werden:


<html>
<head>
<style type="text/css">
#icons { width:1000px; }
#icons ul { margin: 0; padding: 0; }
#icons li { 
float: left;
margin: 0 1px 1px 0;
display: block;
}
#icons a {
background-image: url(/_oxid_092010/out/basic/img/icons/besteck.jpg);
background: green;
width: 111px;
height: 111px;
display: block;
}
icons a:active { 
background-image: url(/_oxid_092010/out/basic/img/icons/besteck_hover.jpg);
 }
#icons a:hover { background-image: url(/_oxid_092010/out/basic/img/icons/besteck_hover.jpg);
background: blue;
}

</style>
</head>
<body>
<!-- ANFANG ICONS -->
<div id="icons">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<br style="clear: both;">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<br style="clear: both;">
</div>
<!-- ENDE ICONS -->
</body>
</html>

Diese Optik lässt sich sicher auch auf die eingebaute Kategorienanzeige in Oxid anwenden.

3

Hallo Christoph,

das Problem ist, diese ICONS sollten genau vorn und hinten mit den orangen Balken bündig sein. So das es nicht mitten drin ist. Weißt wie ich das meine?

Gruß Dirk

4

Du meinst das die Icons genau so breit sind, wie der orange Balken breit ist?
Dann musst du entweder die Größe der einzelnen Icons anpassen oder den Abstand untereinander verändern. Spiel doch mal mit dem margin-Angaben für [B]#icons li { [/B]und den Bildgrößen rum. Das sollte helfen.

5

Nein,

in einer Reihe sollen 8 Icon’s hin und diese 8 sollten so nebeneinander gelegt werden, damit es mit dem orangen Balken bündig sind. Also das erste Icon, soll da sein wo das Balken beginnt und das 8. Icon da wo der Balken aufhört und mitten drin soll überall der gleiche Abstand sein.

LG

6

Probier doch einfach mal aus, was ich vorgeschlagen habe. Pixelgenau wird schwierig, aber das ist der richtige Weg…

7

Hallo,

ich mach mal so wie ich es denke … dann zeig ich dir das mal … denn muss wahrscheinlich mehrere Klassen anlegen, wenn überall ein anderes Bild erscheinen soll.

LG

8

Hallo,

ich habe es nun wie folgt gemacht. Weiß aber nicht ob das so gemacht werden kann.


<!-- ANFANG ICONS -->
...<div id="icons">
......<ul>
.........<li class="besteck"><a href=""></a></li></ul>
.........<li class="glaeser"><a href=""></a></li></ul>
.........<li class="porzellan"><a href=""></a></li></ul>
.........<li class="toepfepfannen"><a href="#"></a></li></ul>
.........<li class="backen"><a href="#"></a></li></ul>
.........<li class="kuechenkleingeraete"><a href="#"></a></li></ul>
.........<li class="barzubehoer"><a href="#"></a></li></ul>
.........<li class="servicebuffet"><a href="#"></a></li></ul>
.........<br style="clear: both;">
  
.........<li class="behaelter"><a href="#"></a></li>
.........<li class="kombidaempfer"><a href="#"></a></li>
.........<li class="thermik"><a href="#"></a></li>
.........<li class="kuehltechnik"><a href="#"></a></li>
.........<li class="kaffeemaschinen"><a href="#"></a></li>
.........<li class="edelstahlmoebel"><a href="#"></a></li>
.........<li class="spueltechnik"><a href="#"></a></li>
.........<li class="sonderangebote"><a href="#"></a></li>
.........<br style="clear: both;">
......</ul>
...</div>
<!-- ENDE ICONS -->



#icons { 
...width:1000px; 
}

#icons ul { 
...margin:0; 
...padding:0; 
}

#icons li { 
...float:left; 
...display:block; 
}

#icons .besteck a {
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_01a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px 6px 6px 3px;
}

#icons .besteck a:hover, #icons .besteck a:active { 
...background-image: url(/_oxid_092010/out/basic/img/icons/icon_01b.png); 
}

#icons .glaeser a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_02a.png);
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .glaeser a:hover, #icons .glaeser a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_02b.png); 
}

#icons .porzellan a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_03a.png);
...width:111px;
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .porzellan a:hover, #icons .porzellan a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_03b.png); 
}

#icons .toepfepfannen a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_04a.png);
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .toepfepfannen a:hover, #icons .toepfepfannen a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_04b.png); 
}

#icons .backen a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_05a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .backen a:hover, #icons .backen a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_05b.png); 
}

#icons .kuechenkleingeraete a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_06a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .kuechenkleingeraete a:hover, #icons .kuechenkleingeraete a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_06b.png); 
}

#icons .barzubehoer a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_07a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .barzubehoer a:hover, #icons .barzubehoer a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_07b.png); 
}

#icons .servicebuffet a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_08a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px 3px 6px 6px; 
}

#icons .servicebuffet a:hover, #icons .servicebuffet a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_08b.png); 
}

#icons .behaelter a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_09a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px 6px 6px 3px; 
}

#icons .behaelter a:hover, #icons .behaelter a:active { 
...background-image: url(/_oxid_092010/out/basic/img/icons/icon_09b.png); 
}

#icons .kombidaempfer a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_10a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .kombidaempfer a:hover, #icons .kombidaempfer a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_10b.png); 
}

#icons .thermik a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_11a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .thermik a:hover, #icons .thermik a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_11b.png); 
}

#icons .kuehltechnik a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_12a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .kuehltechnik a:hover, #icons .kuehltechnik a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_12b.png);
}

#icons .kaffeemaschinen a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_13a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .kaffeemaschinen a:hover, #icons .kaffeemaschinen a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_13b.png); 
}

#icons .edelstahlmoebel a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_14a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .edelstahlmoebel a:hover, #icons .edelstahlmoebel a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_14b.png); 
}

#icons .spueltechnik a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_15a.png); 
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px; 
}

#icons .spueltechnik a:hover, #icons .spueltechnik a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_15b.png); 
}

#icons .sonderangebote a { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_16a.png);
...width:111px; 
...height:111px; 
...display:block; 
...margin:6px 3px 6px 6px; 
}

#icons .sonderangebote a:hover, #icons .sonderangebote a:active { 
...background-image:url(/_oxid_092010/out/basic/img/icons/icon_16b.png); 
}

Screenshot:

LG Dirk

9

Servus Dirk,

natürlich kann das so gemacht werden. Spricht absolut nix dagegen…

Viele Grüße vom Chris