ol list mit Grafik links

[demo1987]

Hallo zusammen,

ich habe ein Mega Menu bzw. möchte eins aufbauen und habe demnach ein Haupt Menü mit li-Tags als Menü-Einträge und bei einigen habe ich in der li eine neue ul und dieser sind weder mehrere ol's unterstellt:

<ul class="menu" id="responsive">

	<li><a href="index.html" id="current"><i class="halflings white home"></i> Home</a></li>

	<li><a href="#"><i class="halflings white list"></i> Mega-Menu</a>
		<!-- Mega Menu / Start -->
		<ul class="cols4">
			<li class="col4">
				<h4>Slogan</h4>
			</li>
			<li class="col1">
				<h5>List 1</h5>
				<ol>
					<li><a href="#">Punkt 1</a></li>
					<li><a href="#">Punkt 2</a></li>
				</ol>
			</li>
			<li class="col1">
                <h5>List 2</h5>
				<ol>
                    <li><a href="#">Punkt 1</a></li>
					<li><a href="#">Punkt 2</a></li>
					<li><a href="#">Punkt 3</a></li>
				</ol>
			</li>

Nun möchte ich bei einigen der unter-lists, eine Grafik neben die List-Punkte angezeigt haben, wie mache ich das im CSS ambesten, wie sollte ich die class aufbauen damit dei Grafik richtig angezeigt wird.

Das img kommt dann denke ich am besten vor den ersten list-Punkt oder?
also so:

...
<ul class="cols4">
			<li class="col4">
				<h4>Slogan</h4>
			</li>
			<li class="col1">
				<h5>List 1</h5>
				<ol>
<img src="#" class="?" />					
<li><a href="#">Punkt 1</a></li>
					<li><a href="#">Punkt 2</a></li>
				</ol>
			</li>
...

jemand ne Idee?

Danke für eure Hilfe!

 

[Jan-Frederik Stieler]

Hallo,
da diese Grafiken semantisch keine Rolle spielen nimm bitte die CSS Pseudoklassen :before oder :after.

Als Beispiel

ol li:first-child:before {
  content:url(pfad_zum_bild.jpg);
  padding-right:5px;
}

Viele Grüße

 

[demo1987]

Hey,

danke für die Antwort.

Also das Icon wird angezeigt aber nicht neben den List-Punkte sondern über (also als erster List-Punkt.

Und mein Problem mit diesen allgemeinen CSS Codes, ich kann nur ein Bild angeben. Ich möchte aber für mehrere Listen, verschiedene Bilder angezeigt haben.

Danke

 

[Jan-Frederik Stieler]

Hi,

eine Grafik neben die List-Punkte angezeigt haben

So hattest du das geschrieben gehabt. Also wo soll das Icon nun hin?

Um keine ol li für das CSS verwenden zu müssen gibt es Klassen, für diese funktionieren Pseudoklassen auch.

.menuicon:before {
  content:url(pfad_zum_bild.jpg);
  padding-right:5px;
}

Hier kannst du dir ein Beispiel für beide Varianten ansehen und abschreiben
http://jsbin.com/emiPiQi/2/edit

Grüße

 

[demo1987]

ok, ich habe mich glaube ich blöd ausgedrückt, deshalb hier ein beispiel

mein mega menu sieht ungefähr so aus
http://designmodo.com/create-css3-mega-menu/

man sueht auf dem bild 4 unter-listen mit jeweils der überschrift HOME, neben jeder dieser listen möchte ich kleine unterschiedliche bilder anzeigen die sich vertical über alle list punkte erstrecken

also so wie bei einem table tag bei dem ich in einem td tag den parameter rowspan setzen würde.

 

[Jan-Frederik Stieler]

Hi,
habe das JsBin Beispiel mal auf dein Megamenü geändert.
Ich habe leider immer noch nicht so ganz verstanden was du mit den Icons willst?

http://jsbin.com/emiPiQi/4/edit

Grüße

 

[demo1987]

ich möchte die unter-listen kategorisieren,

also als beispiel in dem mega menu werden fahrzeuge angezeigt, die erste liste sind autos, dann werden die autos aufgezählt und links daneben ist ein Bild von einem der Modelle welches sich vertikal über die ganze liste (oder entsprechend seiner höhe) erstreckt,

die zweite Liste sind LKW, hier auch wieder die liste der modelle und ein lkw als bild,

dann kommen motoräder usw.

ich hoffe man kann so verstehen was ich meine

 

[Jan-Frederik Stieler]

Ganz ehrlich ich verstehs nicht.
Zeichne das doch mal bitte in ein Bild des Menüs rein wo sich das icon befinden soll?

Grüße

 

[demo1987]

ok, hier nochmal mit bildern:

mein Menu sieht zurzeit so aus:


und ich möchte bilder einfügen die dann so dargestellt werden:


ist es jetzt verständlicher?

 

[demo1987]

hmm, ich hab mal das netz durchforscht nach mega menus und auch sehr viele gefunden aber nicht eins was so eine anforderung umgesetzt hat. Ist meine Anforderung denn wirklich so außergewöhnlich? :-(