Autor |
Nachricht |
Pimpanella
Threadersteller
Dabei seit: 15.01.2008
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Di 03.11.2009 19:34
Titel Verlinkung der Navi klappt nicht! |
|
|
hola!
hab mal ne frage, sitze jetzt schon mehrere stunden an dieser sache und raste langsam aus.
ich weiß nicht, ob einige von euch die aufgabe der zwischenprüfung von 2008 kennen.
dreht sich um die gestaltung einer website für einen "wellfood-verlag münchen".
so weit so gut hab ich alles relativ gut hinbekommen.
jetzt sitze ich immer noch an meiner blöden navi.
habe als navi 5 images wo mit ner bestimmten schriftart die kategorien eingeteilt sind.
diese 5 images möchte ich dann gerne, wie man das so kennt auf die jeweiligen seiten verlinken und kriegs einfach nicht hin.
mir wurde gesagt dass ich die images als background-images anlegne muss, damit man da beim mouseover neue bilder drüberlegen kann.
aber jetzt funzen weder die links noch irgendein hover effekt.
hab in den stylesheets nun also ne div box "home", dann ne div box "home a" und das dazugehörige "home a:hover" und auch display:block angegeben aber es funktioniert immer noch nich.
wär schön, wenn da der ein oder andere mir helfen könnte
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 03.11.2009 20:01
Titel
|
|
|
HTML / CSS Quelltext oder ein Onlinebeispiel wäre dazu recht hilfreich...
Zuletzt bearbeitet von Smooth-Graphics am Di 03.11.2009 20:02, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
accessoire
Dabei seit: 05.02.2007
Ort: -
Alter: 34
Geschlecht:
|
Verfasst Di 03.11.2009 20:14
Titel
|
|
|
So würde ich die HTML-Hierarchie aufbauen.
Code: | <ul>
<li><a id="home" href="home.html">Home</a></li>
<li><a id="menüpunkt2" href="menüpunkt.html">Menüpunkt</a></li>
...
</ul> |
Den einzelnen IDs weist du das jeweilige Hintergrundbild zu, definierst die Pixelmaße (Länge x Breite) und definierst als Displaytyp ein Blockelement, da das a-Tag standardmäßig ein Inline-Element ist.
So in etwa:
Code: | #home {background:url(images/home.jpg); width:100px; heigth:40px; display:block}
|
Ein Quellcode wäre natürlich recht hilfreich.
Zuletzt bearbeitet von accessoire am Di 03.11.2009 20:15, insgesamt 1-mal bearbeitet
|
|
|
|
|
Pimpanella
Threadersteller
Dabei seit: 15.01.2008
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Di 03.11.2009 21:43
Titel
|
|
|
das problem dabei ist halt, dass ich bei dem code
<ul>
<li><a id="home" href="home.html">Home</a></li>
nicht das wort "home" einbinden kann, eben weils ja nur ne grafik ist und kein text.
ich kopier mal n teil des codes hier rein:
quellcode in html:
<div id="navi">
<div id="home"><a href="index.html"></a></div>
<div id="inhalt"><a href="inhalt.html"></a></div>
stylesheet dazu:
#home {
background-image: url(content/home.jpg);
position: absolute;
top: 0px;
left: 0px;
width: 184px;
height: 60px;
}
#home a {
background-image: url(content/home.jpg);
position: absolute;
top: 0px;
left: 0px;
width: 184px;
height: 60px;
display: block;
}
#home a:hover {
background-image: url(content/home_over.jpg)
position: absolute;
top: 0px;
left: 0px;
width: 184px;
height: 60px;
display: block;
}
mit der liste gings auch nich
|
|
|
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht:
|
Verfasst Mi 04.11.2009 00:52
Titel
|
|
|
Ich hab zwar gerade keine Zeit das zu checken aber evtl. liegts an den Selektoren, geb den a Elementen mal direkt die Klasse/Id und das ensptr. display:block Attribut. Reinschreiben brauchst du definitiv nichts, funktioniert durch alle Browser auch ohne Inhalt zwischen <a> und </a>
Diese Art von Navigation funktioniert übrigens etwas eleganter wenn du nur ein Hintergrund-Bild verwendest sowohl für a als auch für a:hover, pack die beiden Bilder dann nebeneinander und ändere für a:hover die background-position um die entspr. Pixelzahl. Damit vermeidest du, dass das Bild erst geladen wird wenn man die Maus darüber bewegt und unter Umständen sichtbar zeitverzögert reagiert.
Mit position:absolute zu arbeiten ist übrigens nicht so toll, machs lieber mit Divs und float.
|
|
|
|
|
accessoire
Dabei seit: 05.02.2007
Ort: -
Alter: 34
Geschlecht:
|
Verfasst Mi 04.11.2009 06:57
Titel
|
|
|
Pimpanella hat geschrieben: | das problem dabei ist halt, dass ich bei dem code
<ul>
<li><a id="home" href="home.html">Home</a></li>
nicht das wort "home" einbinden kann, eben weils ja nur ne grafik ist und kein text.
ich kopier mal n teil des codes hier rein:
quellcode in html:
<div id="navi">
<div id="home"><a href="index.html"></a></div>
<div id="inhalt"><a href="inhalt.html"></a></div>
stylesheet dazu:
#home {
background-image: url(content/home.jpg);
position: absolute;
top: 0px;
left: 0px;
width: 184px;
height: 60px;
}
#home a {
background-image: url(content/home.jpg);
position: absolute;
top: 0px;
left: 0px;
width: 184px;
height: 60px;
display: block;
}
#home a:hover {
background-image: url(content/home_over.jpg)
position: absolute;
top: 0px;
left: 0px;
width: 184px;
height: 60px;
display: block;
}
mit der liste gings auch nich |
Bei mir klappts wunderbar. Genau deshalb gibt man ja display:block an, damit die gesamte Grafik ein anklickbarer Link ist und nicht nur der Text. Text musst du übrigens trotzdem angeben und mit text-indent:-9999px verschieben, damit Leute mit Screenreadern deine Seite auch bedienen können.
Du musst vermutlich nur die ganzen unnötigen CSS-Deklarationen entfernen. Du gibst alles drei Mal an. Unnötig hoch 3 ! Teste mal meinen Quellcode. Der funktioniert prima.
Zuletzt bearbeitet von accessoire am Mi 04.11.2009 07:00, insgesamt 1-mal bearbeitet
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 04.11.2009 09:28
Titel
|
|
|
Da text-indent nicht zuverlässig funktioniert, kann man auch ein weiteres element einbauen und dieses verstecken.
Code: | a > span {
display:none;
} |
Code: | <a href="#" title="foo"><span>bar</span></a> |
|
|
|
|
|
accessoire
Dabei seit: 05.02.2007
Ort: -
Alter: 34
Geschlecht:
|
Verfasst Mi 04.11.2009 09:31
Titel
|
|
|
Kash hat geschrieben: | Da text-indent nicht zuverlässig funktioniert, kann man auch ein weiteres element einbauen und dieses verstecken.
Code: | a > span {
display:none;
} |
Code: | <a href="#" title="foo"><span>bar</span></a> |
|
Ist es nicht so, dass display:none dazu führt, dass Screenreader das Element ignorieren?
|
|
|
|
|
|
|
|
Ähnliche Themen |
Verlinkung klappt nicht
[Flash] Hilfe bei Navi Verlinkung
[Flash] e-Mail Verlinkung klappt nicht!
CSS UL LI NAVI
<div> Verlinkung
Pdf mit Verlinkung
|
|