Anmelden | Registrieren | FAQ
Anonymous

Dropdown zieht sich auseinander

+ Antwort erstellen

2 Beiträge Seite 1 von 1


Dropdown zieht sich auseinander

von Paaax » Di Feb 21, 2012 7:19 pm

Hey Leute,

mein Dropdown-menü zieht sich auseinander. Bin mir sicher, dass viele Fehler in meinem Code sind. Bitte um rege Diskussion ;)

http://www.die-twedde.de/atw/index3.php


CSS
Code: Alles auswählen
body {          background-attachment: fixed;
            background-image: url('Bilder/bg.gif');
            background-repeat: repeat-x;
            background-color: #3482e2;
            text-align: center;
   }
   
#ganzeseite {    position: absolute;
            width: 800px;
            height: 1265px;
            top: 50%;
            left: 50%;
            margin-top: -440px;
            margin-left: -400px;
         }

#kopfbereich {   width: 800px;
            height: 315px;
         }
         
#menu    {   width: 800px;
         height: 30px;
         text-align: left;
         clear: left;
      }

#content {   background: #ffffff;
         width: 800px;
         height: 900px;
         text-align: left;
         padding:0.01em;
      }
         
#fußzeile {   width: 800px;
         height: 20px;
       }
      
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
 
li {
  float: left;
  position: relative;
  width: 10em;
  }
 
li ul {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
  }

li > ul {
   top: auto;
   left: auto;
   }

li:hover ul, li.over ul{ display: block; }

a.home {
    display:block;
    width:100px;
    height:100px;
    background-repeat:no-repeat;
    background-image:url('Bilder/menu_01.gif');
}
a.home:hover {
    background-image:url('Bilder/menu2_01.gif');
    background-repeat:no-repeat;


a.welt {
    display:block;
    width:100px;
    height:100px;
    background-repeat:no-repeat;
    background-image:url('Bilder/menu_02.gif');
}
a.welt:hover {
    background-image:url('Bilder/menu2_02.gif');
    background-repeat:no-repeat;


a.stadt {
    display:block;
    width:100px;
    height:100px;
    background-repeat:no-repeat;
    background-image:url('Bilder/menu_03.gif');
}
a.stadt:hover {
    background-image:url('Bilder/menu2_03.gif');
    background-repeat:no-repeat;


a.bade {
    display:block;
    width:100px;
    height:100px;
    background-repeat:no-repeat;
    background-image:url('Bilder/menu_04.gif');
}
a.bade:hover {
    background-image:url('Bilder/menu2_04.gif');
    background-repeat:no-repeat;


a.gästebuch {
    display:block;
    width:100px;
    height:100px;
    background-repeat:no-repeat;
    background-image:url('Bilder/menu_05.gif');
}
a.gästebuch:hover {
    background-image:url('Bilder/menu2_05.gif');
    background-repeat:no-repeat;



HTML
Code: Alles auswählen
<html>

<head>

<title>Einmal rum!</title>

<link rel="stylesheet" type="text/css" href="_stylesheet.css">

</head>

<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
}
}
window.onload=startList;
</script>

<body>
   <div id="ganzeseite">
      <div id="kopfbereich">
         <img src="Bilder/Header/header.gif">
      </div>
      <div id="menu">
                           <ul id="nav">
                             <li><a href="index3.php" class="home"></a></li>

                             <li><a href="weltkarte.php" class="welt"></a></li>
                            
                            <li><a href="stadt.php" class="stadt"></a>
                              <ul>
                                <li><a href="paris.php" class="paris">Paris, Frankreich</a></li>
                                <li><a href="prag.php" class="prag">Prag, Tschechien</a></li>
                                <li><a href="hamburg.php" class="hamburg">Hamburg, Deutschland</a></li>
                              </ul>
                             </li>

                             <li><a href="bade.php" class="bade"></a>
                              <ul>
                                <li><a href="alanya.php" class="alanya">Alanya, Türkei</a></li>
                                <li><a href="grancanaria.php" class="grancanaria">Gran Canaria, Spanien</a></li>
                              </ul>
                             </li>
                            
                             <li><a href="gästebuch.php" class="gästebuch"></a>
                             </li>
                             <li><img src="Bilder/menu_06.gif"></li>
                           </ul>
      </div>
      <div id="content">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <div id="fußzeile">
      </div>
   </div>
</body>

</html>
Benutzeravatar

Paaax

  • Beiträge: 1
  • Registriert: Di Feb 21, 2012 7:15 pm

Re: Dropdown zieht sich auseinander

von XainPro » So Mär 04, 2012 2:27 pm

Ihre angegebenen Link nicht funktioniert seinem gebrochenen Zutreffendes bitte ankreuzen.
Benutzeravatar

XainPro

  • Beiträge: 3933
  • Registriert: Fr Feb 17, 2012 8:10 pm


+ Antwort erstellen

Seite 1 von 1