ich bin am verzweifeln: ich habe hier ein script:
Alles anzeigen
mit einem selbstgemachten popup menü
hier der css code
Alles anzeigen
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
Quellcode
- <!--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
Quellcode
- /*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