Zur Navigation

CSS: Links mit Bilderwechsel - Anfänger braucht Hilfe

1 Geli

Hallo,
ich bastle gerade an meiner 1. Hompage!
Diese besteht aus 1 Startseite + 3 weiteren Seiten.
Alles funktioniert so weit bestens.
Nun arbeite ich noch an der Optik.
Ich möchte dass sich meine Navigationsbuttons (sind kleine Bilder) verändern. a:link a:activ: a:hover etc..
Hierfür möchte ich mit CSS arbeiten – wovon ich leider noch nicht viel Ahnung habe.
Ich weiß einfach nicht:
- wie der Code genau aussehen muß
- und ob ich diesen Code oben in den Head schreiben kann
- oder ob ich ein externes Stylsheet anlegen muß
- und wie ich die jeweiligen Verlinkungen einbauen muß

Hier mal meine Bezeichungen:
1. Button / verlinkt zu index.html
Bildbezeichnungen: (link) start.jpg (hover) start1.jpg (active) start2.jpg

2. Button / verlinkt zu afrika.html
Bildbezeichnung: (link) twin.jpg (hover) twin1.jpg (active) twin2.jpg

3. Button / verlinkt zu rc.html
Bildbezeichungen: (link)rc.jpg (hover)rc1.jpg (active)rc2.jpg

4. Button / verlinkt zu yz.html
Bildbezeichunge: (link) yz.jpg (hover)yz1.jpg (active)yz2.jpg

Ich würde mich sehr freuen, wenn mir jemand helfen könnten!

Gruß Geli

17.12.2008 10:08

2 Jörg Kruse

Hallo Geli,

bei der Gestaltung des Bilderwechsel mithilfe von CSS kann dir dieser Artikel auf SELFHTML vielleicht weiterhelfen:

http://aktuell.de.selfhtml.org/artikel/css/mouseover/

- und ob ich diesen Code oben in den Head schreiben kann
- oder ob ich ein externes Stylsheet anlegen muß

Das ist beides möglich. Ich würde den CSS-Code dann in ein externes Stylesheet auslagern, wenn er sich auf mehreren Seiten wiederholt.

17.12.2008 10:21

3 Geli

Hallo Jörg, danke für den Link.
Seit 3 Tage lese ich bereits alle Anleitungen, die ich zu meinem Problem finden kann. Auf den Link zum selfthtml hatte ich schon gefunden. Dennoch schaffe ich es nicht, den Code so umzugestalten, dass es mit meinen 4 Button funktioniert.
...mh..

17.12.2008 10:41

4 Jörg Kruse

Da du für jeden Link verschiedene Buttons verwendest, müssen diese mit verschiedenen IDs gekennzeichnet werden, z.B. "link1", "link2" etc:

<ul id="menu">
<li id="link1"><a href="index.html">&nbsp;</a></li>
<li id="link2"><a href="afrika.html">&nbsp;</a></li>
<!-- etc. -->
</ul>

Im CSS-Teil kannst du dann hiernach unterscheiden:

ul#menu a {
display:block;
width:120px;
height:30px
}
li#link1 a {
background-image:url(start.jpg);
}
li#link1 a:hover {
background-image:url(start1.jpg);
}
li#link1 a:active {
background-image:url(start2.jpg);
}
li#link2 a {
background-image:url(twin.jpg);
}
/* etc. */

17.12.2008 11:08

5 Geli

Hallo Jörg,
vielen Dank!
Jetzt bin ich ein Stück weiter.
Nun habe ich ein externes Stylesheet angelegt und dieses probeweise mit der Startseite verlinkt:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

Es passiert schon was.... nur an der falschen Stelle und in der falschen Größe.
Die Bildbuttons sind nur ca.2px schmal

habe die Größe aber hier angegeben

ul#menu a {
display:block;
width:140px;
height:40px
}

und vor jedem Bild erscheint ein Aufzählzeichen (ein Punkt).


Wo genau muß ich denn das ID-Menü plazieren?
Meine Bilderbuttons befinden sich in einer Tabelle.
Gleich oben, wo die Tabelle anfängt oder genau in der Zelle <td ..> wo die Buttons liegen?

Muß ich die bisherigen Verlinkungen entfernen und durch das ID-Menü ersetzten? Im Moment erscheinen die bisherigen Bilderbuttons + die neuen aus dem Stylesheet.


Über einen weiteren Tipp würde ich mich freuen!

Gruß Geli

17.12.2008 15:01

6 Jörg Kruse

Die Listenpunkte kannst du wegformatieren.

ul#menu {
list-style-type:none;
}

siehe auch:

http://de.selfhtml.org/css/eigenschaften/listen.htm

Die Bildbuttons sind nur ca.2px schmal

Kanst du eine Beispielseite verlinken, dass ich mir das Problem konkret anschauen kann - oder zumindest den relevanten Code hier posten?

Wo genau muß ich denn das ID-Menü plazieren?
Meine Bilderbuttons befinden sich in einer Tabelle.
Gleich oben, wo die Tabelle anfängt oder genau in der Zelle <td ..> wo die Buttons liegen?

Muß ich die bisherigen Verlinkungen entfernen und durch das ID-Menü ersetzten? Im Moment erscheinen die bisherigen Bilderbuttons + die neuen aus dem Stylesheet.

Du könntest auch die bisherigen Links entsprechend formatieren. Da ich nicht weiß, wie dein Code aussieht, habe ich für den Beispielcode eine Liste genommen, da diese sich für ein Navigationsmenü normalerweise besser eignet.

17.12.2008 17:03 | geändert: 17.12.2008 17:03

7 Geli

Hallo Jörg,
ich habe es leider noch immer nicht geschafft.

Hier mal mein stylesheet und unten der code:

<style type="text/css">
ul#menu a {
display:block;
width:150px;
height:40px
}
li#link1 a {
background-image:url (./start.jpg);
}
li#link1 a:hover {
background-image:url (./start1.jpg);
}
li#link1 a:active {
background-image:url (./start2.jpg);
}
li#link2 a {
background-image:url (./africa.jpg);
}
li#link2 a:hover {
background-image:url (./africa1.jpg);
}
li#link2 a:active {
background-image:url (./africa2.jpg);
}
li#link3 a {
background-image:url (./rc45.jpg);
}
li#link3 a:hover {
background-image:url (./rc451.jpg);
}
li#link3 a:active {
background-image:url (./rc452.jpg);
}
li#link4 a {
background-image:url (./yz125.jpg);
}
li#link4 a:hover {
background-image:url (./yz1251.jpg);
}
li#link4 a:active {
background-image:url (./yz1252.jpg);
}
</style>

So sah die Tabelle bisher aus.
Die Bildbuttons sind 140x40px groß.

<td width=20%>
<br>
<p align="center"><a href="index.html"><img src="./start.jpg" border="0"></a></p><br>
<p align="center"><a href="africa.html"><img src="./africa.jpg" border="0"></a></p><br>
<p align="center"><a href="rc.html"><img src="./rc45.jpg" border="0"></a></p><br>
<p align="center"><a href="yz.html"><img src="./yz125.jpg" border="0"></a></p><br>
</td>

Und so habe ich nun das Id-Menu am selben Platz angelegt.
(Den ursprünglichen Code habe ich entfernt.)
Hier erscheinen nur noch 2px breite Bildbuttons und wie gesagt die
Aufzählzeichen.
Wenn ich
ul#menu {
list-style-type:none;
}
verwende, erscheint leider garnichts mehr.

<tr>
<td width=20%>
<br>
<ul id="menu">
<li id="link1"><a href="index.html">&nbsp;</a></li><br>
<li id="link2"><a href="africa.html">&nbsp;</a></li><br>
<li id="link3"><a href="rc.html">&nbsp;</a></li><br>
<li id="link4"><a href="yz.html">&nbsp;</a></li><br>
</ul>
</td>

Hoffentlich kannst Du den Fehler finden!

Gruß Geli

18.12.2008 09:18

8 Jörg Kruse

Entferne mal die Leerzeichen zwischen "url" und der Klammer:

li#link1 a {
background-image:url(./start.jpg);
}

18.12.2008 12:46

9 Geli

habe ich jetzt gemacht - hat sich aber nichts verändert :-(

18.12.2008 13:27

10 Jörg Kruse

Das sollte so funktionieren. Wenn ein externes Stylesheet eingebunden ist, solltest du mal mit Strg + F5 aktualisieren oder den Browser-Cache leeren. Ansonsten wäre es hilfreich, wenn du eine Beispielseite verlinken kannst, wo man sich das Problem konkret anschauen kann.

18.12.2008 13:43