CSS Menu bricht um bei kl. Fenstern

[Nickbytheriver]

Hi.

Ich habe ein (eigentlich zwei) Probleme mit dem CSS Menu welches ich gerade erstellt habe :(

Funktioniert soweit einwandfrei, soll sich jedoch je nach Fenstergröße anpassen. Nun habe ich aber den Fall, dass bei extrem kl. Fenstern das Menu umbricht (bzw. die Button) in die nächste Zeile. Das würde ich gerne verhindern, aber ansonsten die prozentuale Größe beibehalten, geht das??

Nebenbei habe ich überigens noch die Erscheinung unter IE6, das bei Mouse-over immer ein kleines des rechts liegenden Buttons mitangezeigt wird. Wie kommt das, und kann man das unterbinden???

Es wäre schön, wenn jemand da einen Tip hätte!

[LX]

Es wäre schön, wenn jemand da einen Tip hätte!

Es wäre schön, wenn Du einen Link oder Code geposted hättest. Dann können wir Dir vielleicht auch helfen.

Gruß, LX

[Nickbytheriver]

ok, HTML z.B.:

<div class="menu">
    <ul class="levelone">
      <li><a href="home.html"><b>Home</b></a></li>
      <li><a href="1.html"><b>1</b></a></li>
      <li><a href="2.html"><b>2</b></a></li>
      <li><a href="3.html"><b>3</b></a></li>
      <li class="right"><a href="99.html"><b>99</b></a></li>
    </ul>
  </div>

die Css:

menue {
height:35px;
width:98%;
min-width:10em;
background:url(../img/menue/black_0.gif);
position:relative;
margin-left:-10px;
margin-top: -10px;
font-family:arial, verdana, sans-serif;
font-size:11px;
z-index:1;
}

menue .levelone {
margin:0;
padding:0;
list-style:none;
white-space:wrap;
}

menue li {
float:left;
margin-left:10px;
font-weight: 900;
background:url(../img/menue/black_1.gif);
}

menue li.lrt {
float:right;
margin-right:10px;
font-weight: 900;

background:url(../img/menue/blue_1.gif);
}

menue .levelone a {
display:block;
height:35px;
float:left;
background: url(../img/menue/black_0.gif);
padding:0 10px 0 15px;
text-decoration:none;
line-height:33px;
white-space:nowrap;
color:#fff;
font-weight: 900;

}

menue .levelone li.lrt a {
color:#fff;
}

menue .levelone a b {
display:block;
padding:0 10px 0 15px;
background:url(../img/menue/black_0.gif) right top;
}

menue .levelone li.line a b {
background:url(../img/menue/black_0a.gif) right top;
}

menue .levelone a:hover,
menue .levelone li:hover a {
background: url(../img/menue/black_1.gif);
padding:0 10px 0 15px;
cursor:pointer;
color:#fff;
}

menue .levelone li.lrt a:hover,
menue .levelone li.lrt:hover a {
background: url(../img/menue/blue_1.gif);
}

menue .levelone a:hover b,
menue .levelone li:hover a b {
display:block;
padding:0 10px 0 15px;
background:url(../img/menue/black_1.gif) right top;
cursor:pointer;
}

menue .levelone li.line a:hover b,
menue .levelone li.line:hover a b {
background:url(../img/menue/black_1a.gif) right top;
}

menue .levelone li.lrt a:hover b,
menue .levelone li.lrt:hover a b {
background:url(../img/menue/blue_1.gif) right top;
}

menue .levelone li.lrt a:hover b.arrow,
menue .levelone li.lrt:hover a b.arrow {
background:url(../img/menue/blue_1a.gif) right top;
}

menue .sub {
display:none;
}
menue ul ul {display:none;}

/* IE6 only */
menue table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

menue .sub {
margin:0;
padding:0;
list-style:none;
}

menue .sub li {background:transparent;}

menue .levelone :hover .sub {
height:25px;
display:block;
position:absolute;
float:left;
width:100%;
top:35px;
left:0;
text-align:center;
background:#fff url(../img/menue/fade.gif);
border:1px solid #aaa;
}

menue .levelone :hover .rt li {float:right;}

menue .levelone :hover .sub li a
{display:block; height:25px; line-height:22px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; color:#444;font-size:10px;}

menue .levelone :hover .sub li.subline a {color:#ff99ff;}

menue .levelone :hover .sub li a:hover,
menue .levelone :hover .sub li:hover
{color:#000; line-height:20px; position:relative; background:#fff url(../img/menue/fade.gif) left bottom;}

[Beat]

Hi.

Ich habe ein (eigentlich zwei) Probleme mit dem CSS Menu welches ich gerade erstellt habe :(

Funktioniert soweit einwandfrei, soll sich jedoch je nach Fenstergröße anpassen. Nun habe ich aber den Fall, dass bei extrem kl. Fenstern das Menu umbricht (bzw. die Button) in die nächste Zeile.

Wie?
so
Fall A)
<div>Menu 1</div>
<div>Menu 2</div>

oder so
Fall B)
<div>Menu
1</div>
<div>Menu
2</div>

Das würde ich gerne verhindern, aber ansonsten die prozentuale Größe beibehalten, geht das??

Fall A min-width:10em ?
Fall B s/\s/&nbsp;/g

mfg Beat

[Nickbytheriver]

So (nur eine class, horizontal):

<div class="menu">
    <ul class="levelone">
      <li><a href="home.html"><b>Home</b></a></li>
      <li><a href="1.html"><b>1</b></a></li>
      <li><a href="2.html"><b>2</b></a></li>
      <li><a href="3.html"><b>3</b></a></li>
      <li class="right"><a href="99.html"><b>99</b></a></li>
    </ul>
  </div>

[Nickbytheriver]

Den Fehler mit den Buttons habe ich gelöst, fehlerhafte Werte bei Padding und Margin.. Aber die Fenstergröße - argh!

Nebenbei habe ich überigens noch die Erscheinung unter IE6, das bei Mouse-over immer ein kleines des rechts liegenden Buttons mitangezeigt wird. Wie kommt das, und kann man das unterbinden???

Es wäre schön, wenn jemand da einen Tip hätte!