登录 | 注册 | FAQ
Anonymous

Dropdown zieht sich auseinander

+ 发表回复

2 篇帖子 分页: 1 / 1


Dropdown zieht sich auseinander

Paaax » 周二 2月 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
代码: 全选
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
代码: 全选
<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>
头像

Paaax

  • 帖子: 1
  • 注册: 周二 2月 21, 2012 7:15 pm

Re: Dropdown zieht sich auseinander

XainPro » 周日 3月 04, 2012 2:27 pm

Ihre angegebenen Link nicht funktioniert seinem gebrochenen Zutreffendes bitte ankreuzen.
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm


+ 发表回复

分页: 1 / 1