horizontales css menü mit bildern (kein text)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angeben
blocken
button
code
dank
display
element
grad
http
lesenswert
navigation
nutzen
pfad
richtung
span
text
ungeordnete listen
url
wissen
zusammenhang
-
hallo liebe limaner.
google und die sufu haben mich leider leer ausgehen lassen, darum die frage an euch:
wie baue ich hover und links in das menü ein?
ich kann es jeweils einzeln, aber zusammen scheint es nicht zu gelingen.
hier meine seite http://clan-ppl.lima-city.de/nicht_wp/index.html
danke im vorraus! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Für Navigationsmenüs werden klassischerweise ungeordnete Listen bevorzugt. Daher sollte der generelle Aufbau etwa so aussehen:
<ul id="menu"> <li><a href="#"><span>Link-Text</span></a></li> <li><a href="#"><span>Link-Text</span></a></li> <li><a href="#"><span>Link-Text</span></a></li> <li><a href="#"><span>Link-Text</span></a></li> <li><a href="#"><span>Link-Text</span></a></li> </ul>
Das span wird lediglich hinzugefügt um den Text des Links auszublenden, da du ja Hintergrundbilder dafür nutzen möchtest.
Jetzt sprichst du mit CSS alles an, was du brauchst:
ul#menu {...} ul#menu li a {background:...} ul#menu li a:hover, ul#menu li a:focus {background:...} ul#menu li a span {display:none;}
Den Rest einfach mit den Formatierungen auffüllen. Das scheint ja zu klappen.
Lesenswert wäre in diesem Zusammenhang etwas über CSS-Sprites. -
vielleicht hilft Dir das: http://www.cssplay.co.uk/menus/menuone.html
-
werktags schrieb:
Lesenswert wäre in diesem Zusammenhang etwas über CSS-Sprites.
vielen dank, für den gute tipp. das hab ich gleich implementiert
werktags schrieb:
Das span wird lediglich hinzugefügt um den Text des Links auszublenden, da du ja Hintergrundbilder dafür nutzen möchtest.
ul#menu li a span {display:none;}
das funktioniert leider nicht. wenn ich das mache, dann ist der button einfach weg.
werktags schrieb: Für Navigationsmenüs werden klassischerweise ungeordnete Listen bevorzugt.
warum eigentlich?
ich hab mir jetzt nochmal eine seite angeschaut. http://www.fastcompany.com/
auf der wird es mit einem transparenten .gif spacer gemacht, um den der <a>-tag liegt. so hab ich das jetzt auch uebernommen. kennt noch jemand einen clevereren weg?
Beitrag zuletzt geändert: 2.10.2009 2:32:27 von clan-ppl -
Hi,
also wenn du ein menü bauen willst musst du wissen was Block und Inline-Elemente sind, li = Block, a = Inline
Css
ul.navigation, ul.navigation li { margin:0px; padding:0px; } ul.navigation { list-style-type:none; } ul.navigation li { float:left; } ul.navigation li a { text-decoration:none; color:black; display:block; width:150px; height:25px; line-height:25px; background:#AAAAAA url("pfad/zum/bild.gif") no-repeat; } ul.navigation li a:hover { font-weight:bold; background:#DDDDDD url("pfad/zum/bild2.gif") no-repeat; }
HTML
<ul class="navigation"> <li> <a title="eins" href="#eins">eins</a> </li> <li> <a title="zwei" href="#zwei">zwei</a> </li> <li> <a title="drei" href="#drei">drei</a> </li> </ul>
So benutze ich das i.d.R. -
@ color: hm, ich versteh irgendwie nicht, was du mir sagen willst. das menue steht doch schon.
interessant zu wissen, waere eben nur, ob es einen clevereren workaround um ein transparentes bild gibt, um den button OHNE TEXT klickbar zu machen.
trotzdem danke fuer die antwort. -
achso :D,
mach den link einfach zum block-element und schon kannst du die Fläche angeben und der link is anklickbar.
a.menue { display:block; width:150px; height:20px; }
Das reicht dann, das wäre auch kein Workaround sondern das transparente Bild wäre das Workaround
.
Grüsse
Color -
color schrieb: achso :D,
mach den link einfach zum block-element und schon kannst du die Fläche angeben und der link is anklickbar.
klasse! danke, das wusste ich echt nicht. hab grad bei css4you nochmal nachgelesen, aber es irgendwie immer noch nicht richtig verstanden. naja, jetzt funktionierts erstmal. damit hab ich mir ein paar zeilen code gespart.
kannst du mir vllt trotzdem nochmal erklaeren, warum es so cool ist, das als liste zu machen und nich einfach als divs?
Edit: und wenn du grad dabei bist, kannst du mir vllt verraten, warum die div.misc_top nicht auf der gleichen hoehe ist, wie die div#blog_top.
Beitrag zuletzt geändert: 3.10.2009 4:17:52 von clan-ppl -
clan-ppl schrieb:
werktags schrieb: Für Navigationsmenüs werden klassischerweise ungeordnete Listen bevorzugt.
warum eigentlich?
Benutzerfreundlich, vor allem aber geht es in Richtung Berrierefreiheit. Thema Brailzeile für Blinde oder Screenreader z.B.
Außerdem ist es so wesentlich einfach für die Zukunft ein neues Navidesign zu machen, nur durch ändern der CSS.
Gruß -
tom-moeller schrieb:
Benutzerfreundlich, vor allem aber geht es in Richtung Berrierefreiheit. Thema Brailzeile für Blinde oder Screenreader z.B.
Gruß
daran hab ich gar nicht gedacht. vielen dank ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
