CSS Dropdown Menü, wo ist der fehler?

Dieses Thema im Forum "Web Page Design" wurde erstellt von fallen, 20.01.2007.

  1. fallen

    fallen Thread Starter MacUser Mitglied

    Beiträge:
    531
    Zustimmungen:
    10
    Registriert seit:
    15.12.2003
    guten morgen,

    ich bin gerade an einer homepage, und die brauchte ein menü. da dachte ich mir mal, dass ein css dropdown menü ganz gut wäre. gesagt getan, allerdings passt es irgendwie nicht richtig. das soll oben und links ganz bündig sein, aber es bleibt immernoch weiss vom hintergrund an den rändern. (beim body ist margin 0!)

    wäre toll, wenn jemand den fehler sehen würde...!


    html code:
    Code:
    	<ul id="nav">
    	<li id="menu" class="off"><a href="#">Aktuelles</a>
    	<ul>
      <li><a href="#">Meldungen</a></li>
      <li><a href="#">Termine</a></li>
    	</ul></li>
    	<li id="menu" class="off"><a href="#">Verband</a>
    	<ul>
      <li><a href="#">Aufgaben</a></li>
      <li><a href="#">Leistungen</a></li>
      <li><a href="#">Projekte</a></li>
      <li><a href="#">Vorstand</a></li>
      <li><a href="#">Mitglieder</a></li>
      <li><a href="#">Geschichte</a></li>
    	</ul></li>
    	<li id="menu" class="on"><a href="#">Gewerbe</a>
    	<ul>
      <li><a href="#">Statistik</a></li>
      <li><a href="#">Recht</a></li>
    	</ul></li>
    	<li id="menu" class="off"><a href="#">Service</a>
    	<ul>
      <li><a href="#">Preisempfehlung</a></li>
      <li><a href="#">Broschüren</a></li>
      <li><a href="#">Infos</a></li>
      <li><a href="#">Seminare</a></li>
    
    	</ul></li>
    	<li id="menu" class="off"><a href="#">Kontakt</a>
    	<ul>
      <li><a href="#">Geschäftsstelle</a></li>
      <li><a href="#">Presse</a></li>
    	</ul></li>
    </ul>
    
    mit diesem css code:
    Code:
    	<style type="text/css" media="all">
    	#divNav {
    		margin: 0;
    		padding: 0;
    		height: 53px;
    		width: 999px;
    	}
    	
    	#nav {
    	position: relative;
    	height: 53px;
    	background-image: url(../images/nav.jpg);
    	background-repeat: repeat-x;
    	width: 999px;
    	padding-left: 0px;
    
    	}
    
    	#nav li ul, #nav li ul {
    		margin: 0;
    		padding: 0;
    	}
    
    	#nav a {
    		text-decoration: none;
    	}
    
    	#nav li { /*float the main list items*/
    		margin: 0;
    		float: left;
    		display: block;
    		padding-right: 0px;
    	}
    
    	#nav li ul {
    		display: none;
    	}
    
    	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
    	position: absolute;
    	top: 28px;
    	left: 0;
    	padding-top: 0px;
    	height: 25px;
    	width: 999px;
    	padding-left: 0px;
    	background-image: url(../images/nav2.jpg);
    	}
    
    	#nav li.on ul {
    	background-image: url(../images/nav2.jpg);
    	}
    
    	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
    	background-image: url(../images/nav2.jpg);
    	}
    
    	#nav li a {
    		color: #FFFFFF;
    		font-weight: bold;
    		display: block;
    		width: 124px;
    		padding: 0;
    	}
    
    	#nav li.on a {
    		color: #000000;
    	}
    
    	#nav li.on ul a, #nav li.off ul a {
    		border: 0;
    		float: left; /*ie doesn't inherit the float*/
    	background-image: url(../images/nav2_kl.jpg);
    		width: auto;
    		margin-right: 0px;
    	}
    
    	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
    	background-image: url(../images/nav2_kl.jpg);
    	}
    
    	#nav li.on ul {
    		display: block;
    	}
    
    	#nav li.off:hover ul, #nav li.over ul {
    		display: block;
    		z-index: 6000;
    	}
    
    	#nav li.off a:hover, #nav li.on a:hover { 
    		color: #FFFFFF;
    	}
    
    	/*do the image replacement*/
    
    
    
    	#menu a {
    	display: block;
    	position: relative;
    	height: 28px; /*contains all hover states*/
    	background-image: url(../images/nav.jpg);
    	background-repeat: repeat-x;
    	}
    
    /*first, put the initial states in place*/
    
    #menu a {
    	background-position: 0 0;
    }
    
    /*active area - for this demo - the code could be based on a body class, and probably work better.*/
    
     #menu.on a {
     	background-position: 0px -28px;
     } /*add selectors for the other li's and background-positions*/
    
    /*hover states*/
    
    #menu a:hover, #menu:hover a, #menu.over a {
    	background-position: 0 -28px;
    }
    
    
    
    /*subnav formatting*/
    
    #nav li.off ul a, #nav li.on ul a {
    	display: block;
    	color: #000000;
    	font-family: arial, verdana, sans-serif;
    	font-size: 10px;
    }		
    
    #nav li.on ul a {
    }
    	
    
    	body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
        </style>
     
  2. Jakob

    Jakob MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    Registriert seit:
    05.01.2004
    Ein Link zur betreffenden Seite wäre besser. Vielleicht liegt es ja gar nicht an den geposteten Informationen.
     
  3. fallen

    fallen Thread Starter MacUser Mitglied

    Beiträge:
    531
    Zustimmungen:
    10
    Registriert seit:
    15.12.2003
    danke, hast recht.

    in dreamweaver zeigt er mir links auch noch einen rahmen an...
    und im IE siehts auch seltsam aus...

    http://www.herzflimmern-artwork.de/menu/menu.html

    die schrift steht tatsächlich immer oben links im moment, das kommt dann, wenns alles funktioniert!
     
  4. VMPR

    VMPR MacUser Mitglied

    Beiträge:
    1.084
    Zustimmungen:
    30
    Registriert seit:
    17.02.2005
  5. acid

    acid MacUser Mitglied

    Beiträge:
    472
    Zustimmungen:
    0
    Registriert seit:
    18.08.2005
    Gib dem Body mal padding: 0px mit, momentan hast du nur margin angegeben
     
  6. fallen

    fallen Thread Starter MacUser Mitglied

    Beiträge:
    531
    Zustimmungen:
    10
    Registriert seit:
    15.12.2003
    @VMPR, das design steht schon, aber danke! wie gesagt, schriften und so sind nicht positioniert...

    hab ich gemacht acid, ist aber kein unterschied.
     
  7. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    Registriert seit:
    25.07.2004
    Der Universalselektor sollte helfen:

    Code:
    * {
       margin: 0;
       padding: 0
    }
    
    Dir ist bewusst, dass Du für den IE bis v6 einen Workaround für solcherart Menus brauchst?!

    Ausserdem solltest Du Deine IDs nicht mehrfach im Dokument verwenden (#menu).

    2nd
     
  8. fallen

    fallen Thread Starter MacUser Mitglied

    Beiträge:
    531
    Zustimmungen:
    10
    Registriert seit:
    15.12.2003
    ja und eigentlich ist das auch drin, aber irgendwie gehts grade nicht mehr...
    mensch ist das ein mist...
     
  9. fallen

    fallen Thread Starter MacUser Mitglied

    Beiträge:
    531
    Zustimmungen:
    10
    Registriert seit:
    15.12.2003
  10. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
Die Seite wird geladen...

Diese Seite empfehlen