mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 05:53 Benutzername: Passwort: Auto-Login

Thema: Verlinkung der Navi klappt nicht! vom 03.11.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Verlinkung der Navi klappt nicht!
Seite: 1, 2  Weiter
Autor Nachricht
Pimpanella
Threadersteller

Dabei seit: 15.01.2008
Ort: -
Alter: 35
Geschlecht: Weiblich
Verfasst Di 03.11.2009 19:34
Titel

Verlinkung der Navi klappt nicht!

Antworten mit Zitat Zum Seitenanfang

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 *zwinker*
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 03.11.2009 20:01
Titel

Antworten mit Zitat Zum Seitenanfang

HTML / CSS Quelltext oder ein Onlinebeispiel wäre dazu recht hilfreich... Lächel

Zuletzt bearbeitet von Smooth-Graphics am Di 03.11.2009 20:02, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
accessoire

Dabei seit: 05.02.2007
Ort: -
Alter: 34
Geschlecht: Männlich
Verfasst Di 03.11.2009 20:14
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Pimpanella
Threadersteller

Dabei seit: 15.01.2008
Ort: -
Alter: 35
Geschlecht: Weiblich
Verfasst Di 03.11.2009 21:43
Titel

Antworten mit Zitat Zum Seitenanfang

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 *Schnief*
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Mi 04.11.2009 00:52
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
accessoire

Dabei seit: 05.02.2007
Ort: -
Alter: 34
Geschlecht: Männlich
Verfasst Mi 04.11.2009 06:57
Titel

Antworten mit Zitat Zum Seitenanfang

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 *Schnief*


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 *zwinker*! Teste mal meinen Quellcode. Der funktioniert prima.


Zuletzt bearbeitet von accessoire am Mi 04.11.2009 07:00, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 04.11.2009 09:28
Titel

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
accessoire

Dabei seit: 05.02.2007
Ort: -
Alter: 34
Geschlecht: Männlich
Verfasst Mi 04.11.2009 09:31
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.