XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit Menü per CSS (http://xhtmlforum.de/showthread.php?t=52955)

jippel 31.07.2008 11:59

Problem mit Menü per CSS
 
MoinMoin,

ich habe ein Menü per CSS gebaut, nun habe ich ein kleines Problem, siehe auch auf dem Bild.

Am Anfang ist alles normal, nur bei Mouseover zieht es auch die oberen Spalten auf die Größe der unteren, ich will aber das die oberen (mit A,B,C...) immer die gleiche Größe behalten und nur das aufgepoppte an den Text anpassen bzw. breiter machen als die oberen.

Ist jetzt nur CSS, oder ist das ohne Javascript nicht möglich ?

http://jippel.lima-city.de/cssproblem.gif

Weiß jemand Rat ? Danke !!!

-------------------------------------------
Code CSS:

#menuebox {
position: relative;
height: 30px;
}

#menue {
position: absolut;
top: 5px;
left: 0;
z-index: 200;
}

span.menutag {
display: block;
cursor: default;
width: 25px;
}

#menue .aussen { /* obere Boxen */
float: left;
display: block;
overflow: hidden;
width: 25px;
height: 22px;
font-weight: bold;
text-align: center;
background-color: #ffffff; /*Hintergrund oberste Boxen*/
color: #000000;
border: 1px solid;
border-color: #000000;
}
#menue .aussen:hover {
width: auto;
height: auto;
background-color: #ffffff; /*Mouseover oberste Boxen */
color: #000000;
}

a.innen {
display: inline;
width: 100px;
padding: 0px;
margin: 5px;
text-decoration: none;
font-weight: normal;
border-bottom: 0px solid #78561d;
background-color: #ffffff;
color: #000000;
}
a:visited.innen {
background-color: #ffffff;
color:#555;
}
a:hover.innen {
background-color: #ffffff;
color: #900;
}

----------------------------------------------

Auszug HTML:

<div id="menuebox">

<div id="menue">
<div class="aussen">
<span class="menutag">A</span>
<a class="innen" href="#">AAAAAA</a>
<a class="innen" href="#">AAAAAB</a>
<a class="innen" href="#">AAAAAC</a>
<a class="innen" href="#">AAAAAD</a>
<a class="innen" href="#">AAAAAE</a>
</div>
<div class="aussen">
<span class="menutag">B</span>
<a class="innen" href="#">BBBB</a>
<a class="innen" href="#">BBBC</a>
<a class="innen" href="#">BBBD</a>
</div>

Crizzo 31.07.2008 21:53

Korrigiere deine Fehler im Markup und gib uns lauffähigen Code, damit wir testen können. ;)

Fehler-Beispiel:
Code:

position: absolute;


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:24 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023