Willkommen in der Webstatt Zum Webstatt Blog und Stories
Christian am 03.08.06 12:14

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

netcup.de Warum gibt es hier Werbung?
dookie dookie am 03.08.06 12:34

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>...

Christian am 03.08.06 12:37

sollen links rein

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

dookie dookie am 03.08.06 12:40

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

der_nic der_nic am 03.08.06 12:44

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

Christian am 03.08.06 13:48

vielen dank soweit, habs jetzt so gemacht wie dookie 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:

der_nic der_nic am 03.08.06 13:58

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

Christian am 03.08.06 14:02

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

der_nic der_nic am 03.08.06 15:04

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...

Christian am 03.08.06 20:38

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?

der_nic der_nic am 03.08.06 20:59

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

Christian am 03.08.06 21:48

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..)

der_nic der_nic am 03.08.06 22:37

lies mal meine letzten 3 Zeilen inkl. Link;)

Christian am 03.08.06 22:45

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?

der_nic der_nic am 03.08.06 22:56

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

Christian am 04.08.06 09:16

ah, ich glaube ich beginne zu verstehen :)

vielen dank

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt