Guten Tag zusammen,
ich hab mir ein Aufklappmenue im Internet gesucht, und versuche nun, es meinen Wünschen anzupassen.
Das Problem ist aber, dass das aufgeklappte Menue den Inhalt darunter verschiebt, zumindest im FF.
Im IE wird nichts verschoben, wobei ich auf ein Fehler in meinem Code und einer Fehlinterpretation von IE ausgehe ;)
Hab auch schon die Suche betätigt, finde sogar was, aber ich möchte möglichst keine absolute Positionierung verwenden, also fällt "z-index" weg (richtig?).
Geht das überhaupt?
Ich poste mal ein bisschen Code, wenn was wichtiges fehlt, bitte Bescheid sagen
Achso, vielleicht noch ein paar Details zur Website:
ich habe ein 800x600 Kasten in die Mitte gesetzt, wo sich die ganze Website befinden soll.
Oben in dem Kasten Logo und Name, darunter die Navigation und darunter der Inhalt.
HTML:
CSS:
ich hab mir ein Aufklappmenue im Internet gesucht, und versuche nun, es meinen Wünschen anzupassen.
Das Problem ist aber, dass das aufgeklappte Menue den Inhalt darunter verschiebt, zumindest im FF.
Im IE wird nichts verschoben, wobei ich auf ein Fehler in meinem Code und einer Fehlinterpretation von IE ausgehe ;)
Hab auch schon die Suche betätigt, finde sogar was, aber ich möchte möglichst keine absolute Positionierung verwenden, also fällt "z-index" weg (richtig?).
Geht das überhaupt?
Ich poste mal ein bisschen Code, wenn was wichtiges fehlt, bitte Bescheid sagen
Achso, vielleicht noch ein paar Details zur Website:
ich habe ein 800x600 Kasten in die Mitte gesetzt, wo sich die ganze Website befinden soll.
Oben in dem Kasten Logo und Name, darunter die Navigation und darunter der Inhalt.
HTML:
Code:
<div id="menuebox">
<div id="menue">
<div class="aussen">
<a href="../../index.html"><span class="menutag">Home</span></a>
<!--<a class="innen-1" href="#">Systeme</a>
<a class="innen" href="#">Speicher</a>
<a class="innen" href="#">Laufwerke</a>
<a class="innen" href="#">Monitore</a>
<a class="innen" href="#">Drucker</a>
<a class="innen" href="#">Zubehör</a>-->
</div>
<div class="aussen">
<a href="../../index.html"><span class="menutag">Leistungen</span></a>
<a class="innen-1" href="#">Finanzbuchhaltung</a>
<a class="innen" href="#">Lohnbichhaltung</a>
<a class="innen" href="#">Buchhaltungsservice</a>
</div>
<div class="aussen">
<a href="../../index.html"><span class="menutag">Kontakt</span></a>
<a class="innen-1" href="#">Adresse</a>
<a class="innen" href="#">Mail</a>
<a class="innen" href="#">Impressum</a>
</div>
</div>
</div>
CSS:
Code:
#menuebox {
margin-left:auto;
margin-right:auto;
height: 30px;
z-index:2;
}
.stupidie {
display: none;
}
#menue {
font-family:Microsoft Sans Serif, Verdana;
top: 5px;
margin-left:85px;
margin-right:auto;
z-index:2;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 210px;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #888888;
color: #513913;
border: 1px solid;
border-color: #dddddd #dddddd gray gray ;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}
a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 209px;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}