✔ Css Menü rutscht runter

M

Masy

Mitglied
Hallo :)

Ich möchte ein Css Menü links auf eine HTML Seite als Navigation einbinden. Sobald ich jedoch rechts daneben noch ein Bild und einen kleinen Flashfilm einbinde rutscht das Menü immer weiter runter. Ich werde noch ganz narrisch mit dem Ding :(
Hat jemand eine Idee wie ich das Menü quasi fest machen kann ? Wäre ganz toll !

Ich kopier mal den Code von dem Menü ein:

<style type="text/css"><!--
body {
background-color: #000000;
background-image: url(farbverlauf.jpg);
background-repeat: repeat-y;
color: #000000;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
}
--></style>
<style type="text/css">
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background-image:url(farbverlauf.jpg); z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#FFCC77 url(top_grad_2.gif) center center; color:#000000; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:transparent url;}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 20em; margin: 0; background: transparent; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #FFCC77;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#000000; padding:5px 5px 5px 10px; background:transparent center center;}
.gallery dd a, .gallery dd a:visited {color:#000000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:transparent;}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#FFCC77; color:#000000;}

</style>
 
Hi,

klingt so, wie wenn dir hier die float:left-Deklaration weiterhelfen würde, damit der Menüblock an seiner rechten Seite vom Inhalt umflossen wird.

Genaueres kann ich sagen, wenn ich den dazugehörigen HTML-Code deiner Seite gesehen habe, und weiß, welches der CSS-Menüs von Stu Nicholls du dir da ausgesucht hast.

mfg Maik
 
Hallo Maik,

hier ist der dazu gehörige HTML-Code. Ich habe hier im Forum irgendwann mal einen Link gesehen, draufgeklickt und dort das Menü im Quelltext der Seite gefunden.

<body id="www-cssplay-co-uk">
<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="blubb">Menu1</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="blubb">Menu2</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="blubb">Menu3</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="blubb">Menu4</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="blubb">Menu5</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<dl class="gallery">
<dt><a href="blubb">Menu6</a></dt>
<dd><a href="blubb">Menu6a</a></dd>
<dd><a href="blubb">Menu6b</a></dd>
<dd><a href="blubb">Menu6c</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<dl class="gallery">
<dt><a href="blubb">Menu7</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<div id="adsie">
 
Wenn ich in dem im Anschluß an das Menü folgende (=angedeutete) DIV

Code: 
<div id="adsie">
etwas einfüge, rutscht nicht das Menü nach unten, sondern diese Box unter (hinter) das Menü, was an der position:absolute-Deklaration für #menu liegt, mit der das Element aus dem normalen Textfluß genommen wird.

In welcher vertikalen Position die Content-Box unter (hinter) dem Menü ausgerichtet wird, bestimmt in deinem gezeigten Stylesheet diese Regel:

Code: 
#dlmenu {height:10em;}

Bei mir entspricht es in der angelegten Testseite dem Menüpunkt "Menu6".

Ein Link zu dem Thread oder Menü wäre nicht schlecht, damit ich mal nachschauen kann, ob darin die angesprochene absolute Positionierung auch zum Einsatz kommt bzw. wie Stu Nicholls das in dem Menü mit dem nachfolgenden Inhalt geregelt hat.

mfg Maik
 
Vorschlag:

Code: 
#dlmenu {height:10em; position:relative; float:left; width:20em;}

#content {margin-left:21em;} /* Neue Box für Inhalt */
Code: 
<body>

<div id="dlmenu">
     <ul id="menu">
        ...
     </ul>
</div>

<div id="content"> 
        <!-- Hier folgt ein Bild, ein Flash-File, oder was auch immer --> 
</div>

</body>


mfg Maik
 
Hallo Maik,

erstmal vielen Dank für Deine Bemühungen !
Ich werde Deinen Vorschlag morgen gleich ausprobieren und Bescheid geben. Für heute - nach geschlagenen 4 Stunden rumprobieren - reichts mir.

Ich wünsche Dir noch einen schönen Abend

Liebe Grüße
Masy
 
Hallo Maik,

ich habe vorhin Deinen Vorschlag getestet !
Nach diversen Luftsprüngen vor meinem Schreibtisch wollte ich nur schnell Bescheid sagen: ES KLAPPT ! :):):)

Vielen vielen Dank

Liebe Grüße
Masy
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück