ich bin am verzweifeln: ich habe hier ein script:
Code
<!--Head-->
<div id="HeadArea">
<div class="TopeHead"></div>
<div class="logo"></div>
</div>
<!--Menü-->
<div class="MenuArea">
<ul id="MenuList">
<!--Das Erste menü Item-->
<li>
<!--Der Text des ersten Menüs, # durch link austauschen-->
<a href="#" onmouseover="OpenMenu('Menu1')" onmouseout="StartClosingTimer()"> Menu1 </a>
<!--Der Container mit den DropDown Items-->
<div id="Menu1" onmouseover="StopClosingTimer()" onmouseout="StartClosingTimer()">
<!--Das erste item des DropDown-->
<a href="#">Item1</a>
</div>
</li>
<!--Das Zweite menü Item-->
<li>
<!--Der Text des Zweiten Menüs, # durch link austauschen-->
<a href="#" onmouseover="OpenMenu('Menu2')" onmouseout="StartClosingTimer()"> Menu1 </a>
<!--Der Container mit den DropDown Items-->
<div id="Menu2" onmouseover="StopClosingTimer()" onmouseout="StartClosingTimer()">
<!--Das erste item des DropDown-->
<a href="#">Item1</a>
</div>
</li>
</ul>
</div>
<!--Main Teil-->
<div id="MainArea">
<div class="HeadBar">
<font>text</font>
</div>
<br>
<div class="Frame">
hier der mittelteil
</div>
</div>
mit einem selbstgemachten popup menü
hier der css code
Code
/*Formatierung: Body-Tag*/
body {
/*Hintergrundfarbe*/
background: #818181;
font: 12px 'Verdana';
}
/*Menu*/
.MenuArea {
padding: 0px 5px;
background: url(Bilder/MenuBg.png) no-repeat;
}
/*DropDownMenu*/
/*hintergrundfarbe kann mit background: url(Bilder/bild.png) no-repeat; durch bildausgetauscht werden*/
#MenuList {
margin: 0;
padding: 0;
z-index: 45;
}
/*Der Überbegriff*/
#MenuList li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 10px arial;
}
#MenuList li a {
/*Wichtig*/
display: block;
/*Eine 1 px große lücke zw den einzelnen items*/
margin: 0 1px 0 0;
/*anpassen der boxgroße*/
padding: 4px 10px;
/*für einheitliche große*/
width: 60px;
/*Hintergrundfarbe für wenn die maus nicht über dem item ist*/
background: #FFF;
/*Text farbe*/
color: #000;
/*damit der text mittig ist*/
text-align: center;
/*damit der text nicht wie ein link dargestellt wird*/
text-decoration: none;
}
#MenuList li a:hover {
/*BG wenn mit maus drüber*/
background: #dedede;
}
/*Die box der Subitems*/
#MenuList div {
/*damit sich die grö0e und pos nicht nach dem übergeordneten item richtet*/
position: absolute;
/*wichtig erst durch javascript sichtbar*/
visibility: hidden;
/*eig überflüssig aber zur sicherheit da*/
margin: 0;
padding: 0;
/*hintergrund der box mit den subitems*/
background: #DDD;
/*ramen um diese box*/
border: 1px solid #dedede;
/*text orientierung in der box*/
text-align: left;
/*wie oben*/
text-decoration: none;
/*text farbe*/
color: #2875DE;
/*text type*/
font: 11px arial;
}
#MenuList div a {
/*nichts ändern wichtig so*/
position: relative;
display: block;
/*nur zur sicherheit*/
margin: 0;
/*größe anpassen damit nicht nur groß wie text*/
padding: 5px 10px;
/*damit sich die boxgröße anpasst*/
width: auto;
white-space: nowrap;
}
#MenuList div a:hover {
/*wenn maus drüber farbwahl ändern*/
background: #DDD;
color: #000;
}
/*Header*/
#HeadArea {
height: auto;
width: 900;
}
#HeadArea .logo {
margin: 0;
padding: 0;
background: url(Bilder/Logo.png) no-repeat;
}
#HeadArea .TopHead {
margin: 0;
padding: 0;
background: url(Bilder/Top.png) no-repeat;
}
/*Mitte*/
#MainArea {
background: url(Bilder/Mid.png);
width: 880;
padding: 5px 10px;
}
#MainArea .HeadBar {
text-align: left;
background: #ffe4b5;
padding: 3px;
}
#MainArea .Frame {
margin: 0;
padding: 0;
}
/*Footer*/
#FootArea {
background: url(Bilder/Footer.png);
}
#FootButtons {
margin: 0;
padding: 0;
}
#FootButtons li {
margin: 0;
padding: 0;
list-style: none;
float: right;
font: 9px arial;
}
#FootButtons li a {
display: block;
margin: 0 1px;
padding: 2px 5px;
width: 60px;
color: transparent;
text-align: center;
text-decoration: none;
}
#FootButtons li a:hover {
background: #ffe4b5;
}problem: das menü liegt neben dem mittelteil(links) und nicht darüber
ps es liegt an dem float:left aber das benötige ich ja damit die items nebeneinander liegen