|
|
Styles:
Navigation Liste vertikal:
.navcontainerVerti
{
font-family: Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #464545;
text-align: left;
left: 0px;
top: 0px;
width: 190px;
position: absolute;
}
.navlist
{
list-style: none outside none;
margin-left: 16px;
margin-top: 7px;
padding: 0px;
border-bottom: solid 0px;
width: 100px;
font-family: Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
letter-spacing: 0.1em;
}
.navlist li
{
list-style: none;
margin: 0;
padding: 0.4em;
border-top: solid 0px;
}
.navlist li a
{
text-decoration: none;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
}
.navlist a, .navlist a:link, .navlist a:visited
{
color: #464545;
}
.navlist a:active, .navlist li#active, .navlist li a#current, .navlist a:hover, .navlist li#hover
{
color: #8D7A45;
}
Navigation horizontal:
.navHori
{
position: absolute;
border: solid 0px;
margin-left: 195px;
height: 25px;
width: 490px;
background: #B0B0B0 url(/images/B0B0B0_navi.gif);
display: block;
}
.navcontainerHori
{
position: absolute;
margin-left: 20px;
margin-top: 6px;
font-family: Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
letter-spacing: 0.1em;
word-spacing: 2.5em;
}
.horinavi a, .horinavi a:link, .horinavi a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.horinavi a:active, .horinavi #active, .horinavi a#current, .horinavi a:hover, .horinavi #hover
{
color: #8D7A45;
text-decoration: none;
}
Qellcode:
verticale Listennavigation:
<div id="navTop">
<div class="navcontainerVerti">
<ul class="navlist">
<li><a href="#">hafenstolz</a></li>
<li class="active"><a href="#" id="current">grafikdesign</a></li>
<li><a href="#">web</a></li>
</ul>
</div>
</div>
horizontale Navigation:
<div class="navHori" style="margin-top: 125px">
<div class="navcontainerHori">
<div class="horinavi">
<a href="#" class="active" id="current" (neu eingefügt für alte Darstellung, aber dafü wieder nicht valide) >referenzen</a>
<a href="#">ideen</a>
</div>
</div>
</div>
Problem:
Nach Anpassung der Navigation von ID nach Class wird bei der horizontalen Navigation der aktive Zustand nicht mehr angezeigt!!! Durch Einfügen des Attributes id="current" funktioniert die Navigation wieder wie vorher in richtiger farblicher Darstellung der einzelnen Zustände, allerdings habe ich nun wieder zwei Mal im Dokument id="current", daher ist das Dokument wieder nicht valide! Vor der Anpassung der Attribute von ID nach Class wurden die Zustände bei der horizontalen Navigation auch ohne id="current" als aktiv angezeigt - jetzt nicht mehr, durch einfügen dieser Zeile allerdings keine Validität mehr & die Umwandlung von id="current" nach class="current" funzt nicht, da so wohl nicht realisierbar! Wo ist mein Denkfehler? Vorher ging es auch ohne zweites id="current" in der horizontalen Navigation... Wie lässt sich das nun valide miteinander Vereinbaren?
|
|
| 07.04.2006 15:35:46 |
|
Validome
Administrator
Registriert: 04.04.2005
Beiträge: 313
|
|
Hi Visula Agent,
Eine kleine Bitte: Coding-Angelegenheiten wie diese oben gehören ins HTML-, bzw. XHTML-Forum; das "Fehlermeldungen"-Forum dient eigentlich nur für die Bekanntgabe (vermeintlicher) Fehler bei Validierungen.
Grüsse, Yehuda
|
|
| 07.04.2006 15:49:36 |
|
|
|
Ok, für die Zukunft, aber kannst Du mir eventuell auch noch sagen, wo nun der Fehler liegt? Dank vorab & ahoi
|
|
| 07.04.2006 16:13:29 |
|
Validome
Administrator
Registriert: 04.04.2005
Beiträge: 313
|
|
Hallo,
es kann sein, dass ich mich irre, aber die Bedeutung der ganzen "#" im CSS sagen mir nur im Zusammenhang mit ID's etwas.
Da Du die ID's durch Klassen ersetzen möchtet, musst Du das nicht nur im HTML ändern, sondern auch im CSS.
Z. B. a#current durch a.current ersetzen.
mfg
Thomas Mell
|
|
| 07.04.2006 16:54:57 |
|
Wechsel zu
Die letzten Beiträge aus diesen Forum
|
|
