Ergebnis 1 bis 9 von 9

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

  1. #1
    HTML Newbie
    Registriert seit
    01.10.2013
    Beiträge
    6
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

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

    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
       =========================================== */
    Hier der HTML Code

    Code:
    <!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>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

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

    Auszug aus den Forenregeln:
    Inhalt von Beiträgen:
    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:

    • extrem politisch oder religiös orientierte Postings
    • strafbare, pornographische, jugendgefährdende, beleidigende oder ehrverletzende Inhalte
    • Warez oder fremde copyrightgeschütze Werke
    • E-Mail Adressen
    • Songtexte
    • persönliche Angaben wie Telefonnummern, Adressen usw (diese bitte per PN austauschen)
    • oder anderweitig inakzeptabel Postings, die hier nicht erfasst wurden, aber gegen geltendes Recht, die guten Sitten, allgemeines Moralempfinden oder eben gegen die Forenregeln verstossen.
    • Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    01.10.2013
    Beiträge
    6
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

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

    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...

  4. #4
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

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

    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:

    <nav>
    <ul>
    ...
    </ul>
    </nav>
    Geändert von resteverwerter (02.10.2013 um 06:55 Uhr)

  5. Folgende User finden die Antwort von resteverwerter gut:


  6. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    01.10.2013
    Beiträge
    6
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

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

    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....

  7. #6
    Bandit
    Gast

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


  8. #7
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

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

    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/dropdown-...-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
    Geändert von resteverwerter (02.10.2013 um 14:07 Uhr)

  9. #8
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

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

    Zitat Zitat von resteverwerter Beitrag anzeigen
    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

  10. Folgende User finden die Antwort von lukasn gut:


  11. #9
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

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

    @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

Ähnliche Themen

  1. Bitte helft mir: Problem mit Dropdown-Navigation
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 17.08.2012, 22:56
  2. Dropdown Navigation
    Von TheNewOne im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 05.08.2008, 10:02
  3. Flash Navigation MouseOver Probleme
    Von raggaman im Forum Flash Forum
    Antworten: 5
    Letzter Beitrag: 30.09.2007, 05:13
  4. Auswahlen im Menü per Dropdown oder Mouseover
    Von webid im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 04.09.2006, 10:55
  5. Rahmen um ganze Website
    Von koehli im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 21.06.2005, 18:20

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •