Tabelle oder CSS?

Ich will das folgende Bild in einzelne Teile zerlegen (wie im Raster dargestellt) und als links vewenden

soll ich css oder eine Tabelle dafür verwenden?

http://sucker.sheep24.de/upload/Ausschnitt.jpg


vielen dank schonmal

Du sollst semantisches Markup verwenden. Wenn in die einzelnen Bildteile tabellarische Daten reinsollen, dann nimmst du Tabellen. Wenn da eine Liste reinsoll (z.B. Links), dann nimmst du <ul>...

sollen links rein

aber mit ner liste?
dann wären das 5 listen mit jeweils 3 items, oder?
und zur umsetzung dann float left?

Nee, du nimmst eine Liste, gibst eine feste breite und floatest die <li> elemente nach links.

nicht unbedingt... wenn es 5 verschidene Kategorienen zu Links wären könnte er auch die <ul> floaten!
ich finde in diesem Fall ist es egal ob er <ul> oder <li> floatet... sogar eine Tabelle fände ich nicht so schlimm (klar semantisch nicht korrekt aber was solls?) wäre einfach der Code etwas länger

vielen dank soweit, habs jetzt so gemacht wie user-166 gesagt hat, klappt wunderbar

jetzt ne frage, wie bekomm ich da am einfachsten n hovereffekt rein (wie is der hover der navi hier im forum realisiert? bekomm das ned hin )

hier mein versuch :ugly:

link? ich würde es so lösen:
<ul>
<li><a style="background-image:url(a.jpg); display:block; width:50px; height:50px;"></a></li>
</ul>

und dann im CSS bei a:hover einfach background-image ändern

hm ok, und wie gebe ich das dann bei hover an?

bisheriger code war:

<?php

for($a=1; $a<4; $a++){

	for($i=1; $i<6; $i++){

	    echo '<li><img src="' . $a . $i . '.jpg" width="160" height="160" alt="Anotherstyle Media" onmouseover="this.src=\'' . $a . $i . '.jpg\';" onmouseover="this.src=\'' . $a . $i . '_ho.jpg\';" /></li>';

	    echo "\n";

	}

	echo "<!-- Zeile $a -->  \n";

}

?>

 

die bilder sind folgendermaßen benannt:
normal: 11.jpg, 12.jpg...35.jpg
hover 11_ho.jpg, 12_ho.jpg...35_ho.jpg

in deinem Code machst du den hover aber nicht mit CSS sondern mit Javascript... (du hast 2 mal onmouseover... 1 müsste doch obmouseout heissen oder)
da musst du nur den richtigen pfad zu deiner Grafik einfügen

mit richtigen CSS wäre dass anders, dadurch dass der IE nur :hover bei a tags kennt würde ich dir meine oben genannte Variante empfehlen...

omg kann man dumm sein oO

hm könntest du mir vllt die css methode nochmal genauer (mit bsp vllt) erklären?

irgendwie denke ich, dass ich doch da für jedes bild n eigenen hoverstatus deklarieren muss, oder?

wie gesagt weil der IE nur hover bei a-tags kennt würde ich das so machen

<ul>
<li>
<a href="#" style="display:block; width:50px; height:20px; background-image:url(bg1.jpg);" ></a>
</li>
<li>
<a ....></a>
</li>
usw...
</ul>

beim CSS müsstes du jetzt entweder für jeden einzelnen so bestimmmen

a:hover {
background-image:url(bg1_hover.jpg);
}

das wäre bei bei vielen Bildern sehr mühsam und auswändig, desshalb gibt es die möglichkeit die normale und die hover grafik nebeneinander in eine Datei zu setzen
und dann einfach die position der Grafik zu verändern mehr dazu hier

hm so dachte ich mir das schon auch

aber dann muss ich doch immernoch für jeden link eine eigene klasse mit hovereigenschaft definieren, oder?

ich denke js is hier wirklich die einfachere methode (außer man könnte in css mit php arbeiten..)

lies mal meine letzten 3 Zeilen inkl. Link

hab ich, die frage ob ichs verstanden hab ^^

da ich ja 15 bilder ab, brauch ich diesen teil doch 15 mal:

 #rollovermenu a {background: url("rollovermenu.gif" 0px 0px no-repeat;} 

mit dem jeweiligen bild, oder?

nein... der Code vom Link ist doch so:

<style type="text/css">

#rollovermenu a:hover {background-position: 0px -25px;}

#rollovermenu a:active {background-position: 0px -50px;}

</style>

du musst nur ein div o.ä mit class="rollovermenu" machen und da drin all die a tags
den teil

#rollovermenu a {background: url("rollovermenu.gif" 0px 0px no-repeat;}

musst du direkt in die a tags einbauen also so:

<a href="#" style="background: url("rollovermenu1.gif" 0px 0px no-repeat;"></a>

und das halt für alle 15 stück mit dem jeweiligen bild

ah, ich glaube ich beginne zu verstehen

vielen dank