zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden horizontale navigation aus meheren grafiken??

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.01.2007, 18:41
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.12.2005
Ort: Oranienburg
Beiträge: 230
celine@23 ist in Verruf geraten
Standard horizontale navigation aus meheren grafiken??

wie schon erwähnt möchte ich ein horizontale navigation anlegen dafür habe ich verschiedene grafiken mit PS angelegt. jede dieser grafiken gibt es ein zweites mal mit einem hovereffekt.
wie realisiere ich das am günstigsten da es durchaus mehere wege gibt.

gibt es dazu irgendwo ein anleitung?
aber bitte schickt mir jetzt nicht irgendein link zum thema grafiken als hyperlink!

mein problem besteht darin das es alles verschiedene grafiken sind und ich nicht weiß wie ich diese logisch in einer reihe horizontal anlege!?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.01.2007, 18:50
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Cascading Style Sheets { Tutorial : Horizontal-Navigation mit gleitenden Hintergründen } viel spaß
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.01.2007, 19:15
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.12.2005
Ort: Oranienburg
Beiträge: 230
celine@23 ist in Verruf geraten
Standard

also das ist nicht das was ich suche!

ich habe sozusagen 8 linkgrafiken + nochmal 8 für den hovereffekt sind also 16 grafiken wie kann ich diese nun sinnvoll mit css horizontal als navigation anlegen!!!?
Mit Zitat antworten
  #4 (permalink)  
Alt 13.01.2007, 19:20
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

macht ne Liste, erstell für jeden einzelenen Link eine Klasse.
Dann gibt den Links die Grafik als background und dann das gleiche nochmal mit a:hover, fertig
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 13.01.2007, 19:58
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.12.2005
Ort: Oranienburg
Beiträge: 230
celine@23 ist in Verruf geraten
Standard

genauso wie du es beschrieben habe ich es bis jetzt ja auch probiert. leider habe ich da probleme bei der ausrichtung. die grafiken werden zum beispiel nur angezeigt wenn ich in den link was reinschreibe. was allerdings nicht nötig ist weil die grafik schon beschriftet ist. gibt es da eine bessere lösung?
weiterhin zeigt mir der IE die grafik ein stück höher an alls der firefox?
Mit Zitat antworten
  #6 (permalink)  
Alt 13.01.2007, 20:00
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

dann gibt dem Listenpunkt die Grafik als background und nicht dem Link.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #7 (permalink)  
Alt 13.01.2007, 20:19
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.12.2005
Ort: Oranienburg
Beiträge: 230
celine@23 ist in Verruf geraten
Standard

habe alles so gemacht wie du es gesagt hast. trotzdem richtet der IE die grafiken ca 1 cm höher aus. weiterhin sind sie auch nicht ganz links wie von mir gewünscht. außerdem sehe ich die grafiken nur zur hälfte es sei denn ich verändere die schriftgröße????

Code:
 

#wechsel1 a {
    background: url(../pics/startseite.jpg) left  no-repeat ; text-decoration:none;
}
#wechsel1 a:hover {
    background: url(../pics/startseitehover.jpg) left  no-repeat; 

}

#wechsel2 a {
    background: url(../pics/referenzen.jpg) left  no-repeat; text-decoration:none;
}
#wechsel2 a:hover {
    background: url(../pics/referenzenhover.jpg) left  no-repeat; 
}

#wechsel3 a {
    background: url(../pics/preise.jpg) left  no-repeat; text-decoration:none;
}
#wechsel3 a:hover {
    background: url(../pics/preisehover.jpg) left  no-repeat;
}



span.wechsel {
    visibility: hidden;
}

ul{
    list-style-type:none;
}
li{
    display:inline;
    min-width: 240px;
    height:35px;
}


div#navmain {
width : 763px;
height : 35px;
padding : 0;
background : #fff;


}






<body>

<div id="wrapper">


<div id="head"></div>


<div id="navmain">
<ul>  
<li id="wechsel1"><a href="#" ><span class="wechsel">Startseite</span></a></li>
<li id="wechsel2"><a href="#" ><span class="wechsel">Referenzen</span></a></li>
<li id="wechsel3"><a href="#" ><span class="wechsel">Preise</span></a></li>
</ul>
</div>


</div>


</div>

</body>
</html>


was mache ich da falsch?
Mit Zitat antworten
  #8 (permalink)  
Alt 13.01.2007, 23:25
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

padding:0px?

stell es mal online und wenns auf funpic.de ist
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ

Geändert von Crizzo (13.01.2007 um 23:30 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 14.01.2007, 00:18
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.863
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

Markup: ul mit normalen Textlinks, li mit jeweils eigener ID.

CSS: erstmal siehe FAQ "CSS Prolog", dann ul list-style: none; geben, li floaten (passende Breite zuweisen!), a als Block darstellen, die nötige Höhe zuweisen, sowie die Grafiken als Hintergrund, und den Text per text-indent: -9999px; verschwinden lassen.

Zum Thema IE siehe mein FAQ-Beitrag.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.01.2007, 00:23
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.12.2005
Ort: Oranienburg
Beiträge: 230
celine@23 ist in Verruf geraten
Standard

also ich habe das problem wie folgt gelöst, die naviagtion ist jetzt richtig angeordnet. jedoch funktionieren die links nicht richtig!? im firefox funktioniert der hovereffekt doch funzen die links nicht

im IE funzt der hovereffekt nicht und die links gehen auch nicht????

hier mal der link!

index.html

also warum funktionieren die links nicht???

ach hier noch der link zur css http://pixeljuggler.net/screendesign.css
Mit Zitat antworten
Sponsored Links
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
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
Horizontale Navigation mit Rollovergrafiken – mit CSS? Kirsten CSS 6 04.06.2006 12:57
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:23 Uhr.