Navigation mit Dropdown bei Mouseover ver-/entstellt die ganze Website

Medienpixel

Hallo Zusammen

Eigentlich wollte ich dem Forum beitreten um anderen Hilfesuchenden zu helfen, doch nun stecke ich selbst fest und hoffe das mir jemand helfen kann. Ich habe mir nun eine HTML-Seite (Bilder noch nicht fix und richtig, Farben bei diversen Containern dient zur Hilfe) zusammengestellt.

Doch leider habe ich grosse Mühe die Navigation mit Dropdown (bei Mouseover) ordentlich einzubinden. Diese Funktioniert zwar, jedoch ver-/enstellt es bei Mouseover die ganze Seite. Content und News Container verschwinden oder werden verschoben. Ich kann mir nicht erklären weshalb. Zusätzlich ist das Topmenu nicht richtig im Balken zentriert und das Submenu kommt verschoben unterhalb des Topmenu....

Wer kann mir hier helfen oder den entscheidenden Hinweis bieten?

Hier der Link zur Online-Page "Demo" -> http://www.medienpixel.ch/demo_page/

Hier der CSS Code

Code

@charset "utf-8";/* CSS Document */




/*   ====================================================================
CSS Document for screendesign by Sigrist Sascha
Last Update: 29.09.2013
Author: Sigrist Sascha
Media: Screen




Structure:       1 Kalibrierung
              2 Allgemeine Definitionen
              3. Anchors
              4. Screendesign
              5. Navigation    
              6. Form
 ======================================================================== */




/* ==========================================
   1. Kalibrierung
   ========================================== */
*{
    margin:0;
    padding:0;
    border:0;
}
html{
    height:100%;
    margin-bottom:1px;
}
body{
    height:100%;
    width:100%;
}
/*****Abstand nach unten****/
h1,h2,h3,p,ol, ul{
    margin-bottom:1em;
}
/****Verschachtelte Listen**********/
ul ul, ol ol{
    margin-bottom:0;
}
/*****Liste****/
li{
    margin-left:1em;
}    












/* ===========================================
   2. Allgemeine Definitionen
   =========================================== */
*{
} 




body{
    background-color: #000;
}




h1,h2,h3{
}




h1{
}




h2{
}




h3{
}




p{
}




strong{
}




em{
}




address{
}




blockqoute{
}




q{
}




/* ===========================================
   3. Anchors
   =========================================== */








/* ===========================================
   4. Screendesign
   =========================================== */
#wrapper{
    width: 1000px;
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding: 25px;
    background-color: #FFF;
    z-index: 1;
}




#header{
    background-image: url(../images/header.jpg);
    height: 174px;
    width: 1000px;
}




/*#nav{
    background-image: url(../images/keymenu_background.png);
    background-repeat: repeat-x;
    padding: 0px;
    height: 49px;
    width: 1000px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 25px;
    margin-left: 0px;
}*/




#infobox{
    background-color: #999;
    float: left;
    height: 300px;
    width: 300px;
}




#infobox_header{
}




#content{
    width: 675px;
    background-color: #9F3;
    margin-left: 325px;
}




#footer {
    width: 1000px;
    margin-top: 30px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000;
    text-align: center;
}




/* ===========================================
   5. Navigation
   =========================================== */
/*#nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;    
}




#nav ul li {
    background-image: url(../images/disconnector.png);
    background-repeat: no-repeat;
    background-position: left;
    float: left;

}




#nav ul li:first-child {
    background: none;
}




#nav ul li a {
    display: block;
    width: 141px;
    height: 34px;
    font-family: Verdana;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    margin: 0px;
    padding-top: 15px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;    
}




#nav ul li a:hover {
    background-image: url(../images/keymenu_hover.png);
    background-repeat: repeat-x;
}*/




#menu {
    background-image: url(../images/keymenu_background.png);
    background-repeat: repeat-x;
    width: 1000px;
    height: 49px;
    font-size: 12px;
    padding: 0px;
    margin-bottom: 20px;
    z-index: 2;
}




#menu ul {
  list-style:none;
  margin:0px;
  padding:0px;
}




#menu li.topmenu {
  float:left;
}




.topmenu a {
  float:left;
  width:141px;
  text-align:center;
}




.topmenu ul{
  display:none;
}




.topmenu a, .submenu a{
  width: 141px;
  height: 34px;
  padding-top: 15px;
  marigin: 0;
  text-align: center;
  font-size: 12px;
  font-family: Verdana;
  color: #FFF;
  text-decoration: none;
}




.submenu a{
    background-image: url(../images/keymenu_background.png);
    background-repeat: repeat-x;
      font-size:12px;
      width:141px;
      /*position:relative;*/
      clear:both; /* special IE6 */
}




#menu a:hover, .topmenu.on a {
    background-image: url(../images/keymenu_hover.png);
    background-repeat: repeat-x;
}




.topmenu:hover ul {
      display:block;
    z-index:2000;  
}




/* ===========================================
   6. Form
   =========================================== */

Alles anzeigen

Hier der HTML Code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FC Lobsigen - der Imaginäre Fussbalverein</title>
<link rel="stylesheet" type="text/css" href="css/screen.css"/>
</head>




<body>
    <div id="wrapper">
        <div id="header">
            FC Lobsigen    
        </div>
        <div id="menu">
            <ul>
                  <li class="topmenu"><a href="index.html">Startseite</a></li>
                  <li class="topmenu"><a href="der_verein">Der Verein</a>
                    <ul>
                          <li class="submenu"><a href="">Unterpunkt 2.1</a></li>
                          <li class="submenu"><a href="">Unterpunkt 2.2</a></li>
                    </ul>
                  </li>
                  <li class="topmenu"><a href="die_mannschaft">Die Mannschaft 3</a>
                    <ul>
                          <li class="submenu"><a href="">Unterpunkt 3.1</a></li>
                          <li class="submenu"><a href="">Unterpunkt 3.2</a></li>
                    </ul>
                  </li>
                <li class="topmenu"><a href="fanzone.html">Fanzone</a>
                    <ul>
                          <li class="submenu"><a href="">Unterpunkt 3.1</a></li>
                          <li class="submenu"><a href="">Unterpunkt 3.2</a></li>
                    </ul>
                  </li>
                <li class="topmenu"><a href="die_sponsoren">Die Sponsoren 3</a>
                    <ul>
                          <li class="submenu"><a href="">Unterpunkt 3.1</a></li>
                          <li class="submenu"><a href="">Unterpunkt 3.2</a></li>
                    </ul>
                  </li>
                <li class="topmenu"><a href="kontakt.html">Kontakt</a></li>
            </ul>
          </div>
        <div id="infobox">
            <div class="infobox_header">
                Aktuelles News
               </div>
          </div>
        <div id="content">
            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. 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.   




Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   




Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   




Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   




Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   




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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
           </div>
        <div id="footer">
            © Copyright 2011 FC-Lobsigen.ch | Design by Sascha Sigrist
        </div>    
    </div>
</body>
</html>

Alles anzeigen

Bandit

Auszug aus den Forenregeln:

Zitat

Inhalt von Beiträgen:
[FONT=Verdana, Arial, Helvetica, sans-serif]Forum-Hilfe behält sich das Recht vor, jederzeit Beiträge zu löschen, zu verschieben oder zu überarbeiten, die nicht den Forumsregeln entsprechen. Dies geschieht ohne vorherige Information des Verfassers. Die User ist alleine für die von ihnen publizierten Inhalte (Texte; Bilder oder andere Veröffentlichungen) verantwortlich und bestätigt auch damit, das er keine Copyrightgeschütze Werke und Texte hier im Forum veröffentlicht.
Verboten oder auch unerwünscht sind folgende Inhalte: [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]extrem politisch oder religiös orientierte Postings [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]strafbare, pornographische, jugendgefährdende, beleidigende oder ehrverletzende Inhalte[/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Warez oder fremde copyrightgeschütze Werke [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]E-Mail Adressen [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Songtexte [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]persönliche Angaben wie Telefonnummern, Adressen usw (diese bitte per PN austauschen) [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]oder anderweitig inakzeptabel Postings, die hier nicht erfasst wurden, aber gegen geltendes Recht, die guten Sitten, allgemeines Moralempfinden oder eben gegen die Forenregeln verstossen.[/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen[/FONT]

Medienpixel

Auch an die User in diesem Forum, entschuldigt das Crossposting meinerseits. Wollte niemanden verärgern, sondern es war eine reine Verzweiflungstat. Wird also nicht mehr vorkommen...

resteverwerter

Gib der

#navigation ul ul li.submenu
oder besser

#navigation ul ul.submenu

einen z-index:99; der das Menu obrhalb der normalen Seite schweben lässt.

LG Matthias

PS: Deine SeitenStruktur wird übersichtlicher, wenn du html5-Elemente verwendest:

Medienpixel

Ich sehe nicht ganz wo ich den z-index setzen soll... Auch um ehrlich zu sein, wo und wie Du das #navigation ul ul.submenu siehst... "Wichtig darf keinen HTML5 Code enthalten..
Nun habe ich ein Logo positioniert, nun wird das ganze noch schlimmer....

Bandit

Da fehlt was, siehe http://validator.w3.org/check?verbose=…%2Fdemo_page%2F

resteverwerter

in Teil 5. deiner css hast Du in Zeile 238:

.topmenu ul{ display:none; }

Dadurch wird die der Klasse .topmenu nachgelagerte Liste nicht angezeigt.

In Zeile 268 hast du
.topmenu:hover ul {
display:block;
z-index:2000;
}

Sobald die Maus über das Menü schwebt wird das Untermenü angezeigt und schwebt im Layout.

Lies mal : http://www.html.de/threads/dropdo…t-inhalt.23133/

und versuche deine Unterliste absolut zu positionieren.

LG Matthias Scharwies

PS:
1. Ich würde im Jahr 2013 nichts mehr für den IE6 entwerfen (Zeile 260 im css)
2. Eine id=logo" darfst Du nur einmal vergeben, sonst musst Du eine klasse verwenden.
3. Ich würde den Listen die Klasse .submenu geben und die Listenelemente ohne Klasse schreiben.
In der css würde das dann so aussehen:

.topmenu ul.submenu li {
}
wenn du die Listenelemente definieren willst.

und:
html5 ist halt der neue, aktuelle Standard

lukasn

Zitat von resteverwerter

und:
html5 ist halt der neue, aktuelle Standard

Sorry für das Off-topic, aber seit wann ist HTML5 Standard? Meines Wissens nach soll der neue Standard erst ab nächstem Jahr eingeführt werden...? Natürlich kann HTML5 schon in den meisten noch relevanten Browsern verwendet werden, aber von einem Standard sind wir noch weit entfernt. Ich könnte da z.B. die neuen Formularelemente als Beispiel nennen....

Gruss,
-Lukas

resteverwerter

lukasn

Du hast recht und ich habe für die älteren Browser html5siv eingebaut:

Code

<!--[if lte IE 8]>         
   <link rel="stylesheet" media="screen, projection" href="/site/css/ie.css"/>          
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]-->

Was mir bei den html-Problemen am meisten auffällt ist aber, dass überproportional viele Anfänger Tabellen-Layout, Frames oder wie hier IE-6 fixe im css haben, weil sie irgendwoher alten Code kopiert haben.
Ich glaube, dass man mit einer neuen Struktur vielleicht einige Probleme / Unübersichtlichkeiten von vorneherein beseitigen könnte.

LG Matthias

Tags