nicht angemeldet
menü mit grafik
0 0 
MudGuard
0 0
menü mit grafik
hallo zusammen
ich versuche gerade ein grafisches menü mit css zusammenzustellen.
folgendes soll erreicht werden:
- jeder button hat unterschiedliche grafiken
- jeder button hat einen mousover-effekt (wechsel der grafik durch verschieben der hintergrundgrafik)
- hinter der grafik soll der listen-text der links versteckt sein (stichwort barrierefreiheit)
- auf der aktuellen seite soll der betreffende button durch id=current mit einem komplett neuen hintergrundbild ersetzt werden
was bei mir bisher nicht gelingen will:
- der hover effekt will ums verrecken nicht klappen
- das mit id current kriege ich auch nicht hin
nicht wirklich ein neues problem, aber ich kriegs einfach nicht hin.
es wäre wirklich nett wenn mir hier jemand helfen könnte.
grüße
oliver
ach ja, der bisherige code
html:
<html>
<head>
<title>Start</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="layout/layout.css">
</head>
<body>
<div id="navcontainer">
<ul>
<li id="start"><a href="#" id="current"><span></span>start</li>
<li id="praxis"><a href="praxis.html"><span></span>praxis</a></li>
<li id="therapie"><a href="therapie.html"><span></span>therapie</a></li>
<li id="massage"><a href="massage.html"><span></span>massage</a></li>
<li id="kontakt"><a href="kontakt.html"><span></span>kontakt</a></li>
</ul>
</div>
</body>
</html>
css:
#navcontainer
{
height:80px;
}
#navcontainer ul
{
margin:0;
padding:0;
list-style-type:none;
}
#navcontainer li
{
display:block;
width:60px;
position:relative;
display:inline;
}
#navcontainer li span
{
display:block;
position:absolute;
width:54px;
height:55px;
}
#kontakt span
{
background-image:url(buttons/kontakt.gif);
background-repeat:no-repeat;
}
#kontakt span a:hover
{
background-position: 0 -55px;
}
#kontakt span a:current
{
background-image:url(buttons/kontakt-aktuell.gif);
background-repeat:no-repeat;
}
#massage span
{
background-image:url(buttons/massage.gif);
background-repeat:no-repeat;
}
#therapie span
{
background-image:url(buttons/therapie.gif);
background-repeat:no-repeat;
}
#praxis span
{
background-image:url(buttons/praxis.gif);
background-repeat:no-repeat;
}
#start span
{
background-image:url(buttons/start.gif);
background-repeat:no-repeat;
}
-
Hi,
- hinter der grafik soll der listen-text der links versteckt sein (stichwort barrierefreiheit)
dafür hast Du eine interessante Variante gewählt/erfunden.
- der hover effekt will ums verrecken nicht klappen
Which means?
- das mit id current kriege ich auch nicht hin
Du selektierst nirgendwo das entsprechende Element. Statt dessen hast Du eine mir unbekannte Pseudoklasse :current verwendet.
html:
<html>
Verwende *unbedingt* einen hinreichend günstigen DOCTYPE. Bei XML-Derivaten wie z.B. XHTML solltest Du zudem dem Root-Element ein xmlns-Attribut mitgeben.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="layout/layout.css">Was ist es denn nun, HTML oder XHTML?
<li id="start"><a href="#" id="current"><span></span>start</li>
Es macht keinen Sinn, die aktuelle Seite zu verlinken. "current" ist zudem oft günstiger als Klasse untergebracht: Ein "current" Element kann mehrmals vorkommen.
<li id="praxis"><a href="praxis.html"><span></span>praxis</a></li>
Wenn Du dermaßen mit IDs um Dich schmeißt, solltest Du übrigens an Namespaces denken. Hier würde sich etwa "navPraxis" anbieten.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Es macht keinen Sinn, die aktuelle Seite zu verlinken.
Genau. Und es _hat_ auch keinen Sinn ;-)
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi tempus!
was bei mir bisher nicht gelingen will:
- der hover effekt will ums verrecken nicht klappen
- das mit id current kriege ich auch nicht hin
Kein Wunder. Deine Selektoren sind falsch geschachtelt.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:) -
Hi,
- hinter der grafik soll der listen-text der links versteckt sein (stichwort barrierefreiheit)
wenn Dir wirklich etwas daran liegt, könnte http://www.1ngo.de/web/bildwechsel.html für Dich interessant sein.
freundliche Grüße
Ingo