zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css Navigation nur mit Bildern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.07.2007, 22:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2007
Beiträge: 2
van-delle befindet sich auf einem aufstrebenden Ast
Standard css Navigation nur mit Bildern

Hallo ich grüße Euch,

ich bin blutiger Anfänger brauche dringend Hilfe!!!

Ich möchte eine Seitennavigation gestalten, die Horizontal angeordnet ist und keinen Text enthält.
Die Navigation soll aus Grafiken bestehen, insgesammt fünf Links und mit Mouseovereffekt versehen werden. Das Grundgerüst habe ich schon fertig und die zehn Bilder habe ich auch schon erstellt.
Leider funktioniert die Darstellung nicht. Es wird auf allen fünf Links die selbe Grafik also die erste Grafik angezeigt. Ich möchte aber, fünf verschiedene Grafiken angezeigt bekommen.
Was muss ich in der HTML und in den css Dateien ändern, damit es funktioniert ?
Danke .....

Hier ein Auszug aus der Html Datei :

</div><div id="menu"><div id="menu"><ul>
<li><a id="selected" href="index.html"><!--Linkbeschreibung--></a></li>
<li><a href="page1.html"></a></li>
<li><a href="page2.html"></a></li>
<li><a href="page3.html"></a></li>
<li><a href="contact.html"></a></li>
</ul></div></div>


Hier ein Auszug aus der css datei, die für das Format zuständig ist:

#menu {
height: 65px;
margin-top: -15px;
width: 1010px;
}
#menu ul {
margin: 15px auto;
}
#menu li {
padding: 25px;
float: left;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}
#menu li a {
padding: 14px 48px 0px;
display: block;
float: left;
height: 22px;
text-decoration: none;
}
#menu2 {
height: 65px;
margin-top: -15px;
width: 1010px;
}
#menu2 ul {
margin: 15px auto;
}
#menu2 li {
padding: 25px;
float: left;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}
#menu2 li a {
padding: 14px 48px 2px;
display: block;
float: left;
height: 22px;
text-decoration: none;
}

Hier ein Auszug aus der css datei, die für das Aussehen zuständig ist:

#menu {
}
#menu li a {
background-image: url(navi_1.jpg);
}
#menu li a:hover, #menu li a#selected, #menu li a#selected:hover {
background-image: url(navi_ak_1.jpg);
}
#menu2 {
}
#menu2 li a {
background-image: url(navi_2.jpg);
}
#menu2 li a:hover, #menu2 li a#selected, #menu2 li a#selected:hover {
background-image: url(navi_ak_2.jpg);
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.07.2007, 23:18
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.864
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Jedes li braucht seine eigene ID für die individuelle Grafik des jeweils enthaltenen a.

Außerdem braucht li keine Höhe, nur eine Breite. Bei a genau umgekehrt, und kein float. Text muß sein, Du kannst ihn aber per text-indent: -9999px; verschwinden lassen (plus font-size: 0; wg. Firefox-Outline).

Du vergibst die ID #menu doppelt (nicht erlaubt), aber das umgebende div#menu solltest Du eh rauswerfen, da überflüssig.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.07.2007, 15:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2007
Beiträge: 2
van-delle befindet sich auf einem aufstrebenden Ast
Standard TExt ausblenden

Hallo Heiko,

vielen dank für die Tips sie haben mir weitergeholfen.
Leider bekomme ich es nicht hin, das der Linktext mit „text-indent: -9999px“, ausgeblendet wird.
Entweder wird nur der erste Linktext entfernt und die anderen Linktexte bleiben erhalten oder es wird die erste Grafikdatei angezeigt und die anderen verschwinden.
Kannst du mir da auch weiterhelfen ? Wo muss ich die text-indent einsetzten ?

Hier ein Ausschnitt des css für die Formatierung

#navi li {

padding: 0px 4px 0px 0px;
float: left;
list-style-type: none;
list-style-image: none;
list-style-position: outside;

#navi li a {

padding: 14px 70px 0px 0px;
display: compact;
float: left;
height: 22px;
text-decoration: none;

Hier ein Ausschnitt des css für die Grafik

#navi li a#navi_1:link, #navi li a#navi_1:visited {
background-image:url(navi_1.jpg);

}
#navi li a#navi_1:hover {
background-image:url(navi_ak_1.jpg);
}

#navi li a#navi_2:link, #navi li a#navi_2:visited {
background-image:url(navi_2.jpg);

}
#navi li a#navi_2:hover {
background-image:url(navi_ak_2.jpg);
}

#navi li a#navi_3:link, #navi li a#navi_3:visited {
background-image:url(navi_3.jpg);
}
#navi li a#navi_3:hover {
background-image:url(navi_ak_3.jpg);
}

#navi li a#navi_4:link, #navi li a#navi_4:visited {
background-image:url(navi_4.jpg);
}
#navi li a#navi_4:hover {
background-image:url(navi_ak_4.jpg);
}

#navi li a#navi_5:link, #navi li a#navi_5:visited {
background-image:url(navi_5.jpg);

}
#navi li a#navi_5:hover {
background-image:url(navi_ak_5.jpg);
Mit Zitat antworten
  #4 (permalink)  
Alt 14.07.2007, 17:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von van-delle Beitrag anzeigen
Wo muss ich die text-indent einsetzten ?

In dem gleichen Element, desssen Text du verschieben willst, also "a"


gaby
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Vertikale CSS Navigation mit Bildern und Text macmensa CSS 2 25.07.2009 17:23
Navigation in CSS datei Linuxonkel CSS 5 01.02.2008 10:30
Aufklappbare Navigation mit CSS webnet CSS 7 20.09.2006 22:45
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04
Css Navigation Adenauer CSS 2 09.02.2006 00:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:35 Uhr.