Hallo zusammen,
ich würde gerne eine komplexe Navigation mit Bildern machen, jedoch klappt es einfach nicht so wie ich es mir vorstelle.
Hier mein html code:
Hier die css Datei:
Ich wollte diese Navigation ganz ohne Javascript machen (da gibt es wohl so accordian javascripte, aber eigentlich müsste es auch so gehen).
In meinem Div Container soll die komplette Navigation sein, daher denke ich mal "position: absolut" um den Container genau auszurichten. Jetzt würde ich das ganze so handhaben, dass sich die einzelnen Bilder (Listenelemente) sich ohne eine feste "top" Positionsangabe einfach unter das darüberliegende Bild (Listenelement) setzt - ohne Abstand, ohne nichts.
Das ganze wäre dann auch so zu sehen:
Bild1
Bild11
Bild12
Bild2
Bild21
Bild22
Bild3
Bild31
Bild32
Einfach untereinander ohne Abstand. Im html Code würde ich dann später meine Position in der Navigation festlegen, ungefähr so:
Bild1-on (bei "on" wird das Bild markiert angezeigt)
Bild11-on
Bild12
Bild2
Bild21-off (bei "off" wird das Bild ausgeblendet)
Bild22-off
Bild3
Bild31-off
Bild32-off
Angezeigt werden würde bei diesem Beispiel also nur
Bild1-on
Bild11-on
Bild12
Bild2
Bild3
.... Ich hoffe ganz schwer, dass mir jemand weiterhelfen kann.
Falls es Probleme mit der Vorstellung des Menüs gibt, hier ein Link zu einem Versuch, bei dem jeder Htmlseite eine eigene Stylesheet Datei zugeordnet habe (also absolut kontroproduktiv).
Versicherungsstelle Veronika Cramer
ich würde gerne eine komplexe Navigation mit Bildern machen, jedoch klappt es einfach nicht so wie ich es mir vorstelle.
Hier mein html code:
HTML:
<div id="unternavigation">
<a name="anker_unternavigation"><span class="hidden">Unternavigation</span></a>
<ul>
<li><a class="vers100-on"></a></li>
<ul>
<li><a class="vers110"></a></li>
<ul>
<li><a class="vers111"></a></li>
<li><a class="vers112"></a></li>
</ul>
<li><a class="vers120"></a></li>
<ul>
<li><a class="vers121"></a></li>
<li><a class="vers122"></a></li>
</ul>
</ul>
<li><a class="vers200"></a></li>
<ul>
<li><a class="vers210"></a></li>
<ul>
<li><a class="vers211"></a></li>
<li><a class="vers212"></a></li>
</ul>
<li><a class="vers220"></a></li>
<ul>
<li><a class="vers221"></a></li>
<li><a class="vers222"></a></li>
</ul>
</ul>
HTML:
/* Allgemeine Informationen
------------------------------*/
/* Basisvorlage CSS
www.basisvorlage.de
Start: 19.05.2008
Aenderung: 19.05.2008
*/
span.hidden {
text-decoration: none;
visibility: hidden;
}
/* Unternavigation
---*/
div#unternavigation {
position: absolute;
top: 104px;
left: 50%;
margin-left: 255px;
width: 233px;
height: auto;
}
a.vers100-on {
background-image: url(../images/versicherung1_on.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers100-off {
position: absolute;
height: 0;
visibility: hidden;
}
a.vers100, a.vers100:link {
background-image: url(../images/versicherung1_off.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers100:hover, a.vers100:active, a.vers100:focus {
background-image: url(../images/versicherung1_on.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers110-on {
background-image: url(../images/versicherungen/versicherung1_1_on.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 19px;
}
a.vers110-off {
position: absolute;
height: 0;
visibility: hidden;
}
a.vers110, a.vers110:link {
background-image: url(../images/versicherungen/versicherung1_1_off.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 19px;
}
a.vers110:hover, a.vers110:active, a.vers110:focus {
background-image: url(../images/versicherungen/versicherung1_1_on.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 19px;
}
a.vers200-on {
background-image: url(../images/versicherung2_on.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers200-off {
position: absolute;
height: 0;
visibility: hidden;
}
a.vers200, a.vers200:link {
background-image: url(../images/versicherung2_off.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers200:hover, a.vers200:active, a.vers200:focus {
background-image: url(../images/versicherung2_on.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers300-on {
background-image: url(../images/versicherung3_on.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers300-off {
position: absolute;
height: 0;
visibility: hidden;
}
a.vers300, a.vers300:link {
background-image: url(../images/versicherung3_off.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers300:hover, a.vers300:active, a.vers300:focus {
background-image: url(../images/versicherung3_on.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers400-on {
background-image: url(../images/versicherung4_on.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers400-off {
position: absolute;
height: 0;
visibility: hidden;
}
a.vers400, a.vers100:link {
background-image: url(../images/versicherung4_off.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
a.vers400:hover, a.vers400:active, a.vers400:focus {
background-image: url(../images/versicherung4_on.gif);
background-repeat: no-repeat;
position: absolute;
left: 0px;
width: 255px;
height: 59px;
}
In meinem Div Container soll die komplette Navigation sein, daher denke ich mal "position: absolut" um den Container genau auszurichten. Jetzt würde ich das ganze so handhaben, dass sich die einzelnen Bilder (Listenelemente) sich ohne eine feste "top" Positionsangabe einfach unter das darüberliegende Bild (Listenelement) setzt - ohne Abstand, ohne nichts.
Das ganze wäre dann auch so zu sehen:
Bild1
Bild11
Bild12
Bild2
Bild21
Bild22
Bild3
Bild31
Bild32
Einfach untereinander ohne Abstand. Im html Code würde ich dann später meine Position in der Navigation festlegen, ungefähr so:
Bild1-on (bei "on" wird das Bild markiert angezeigt)
Bild11-on
Bild12
Bild2
Bild21-off (bei "off" wird das Bild ausgeblendet)
Bild22-off
Bild3
Bild31-off
Bild32-off
Angezeigt werden würde bei diesem Beispiel also nur
Bild1-on
Bild11-on
Bild12
Bild2
Bild3
.... Ich hoffe ganz schwer, dass mir jemand weiterhelfen kann.
Falls es Probleme mit der Vorstellung des Menüs gibt, hier ein Link zu einem Versuch, bei dem jeder Htmlseite eine eigene Stylesheet Datei zugeordnet habe (also absolut kontroproduktiv).
Versicherungsstelle Veronika Cramer