1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Drop Down menü

  • Firewall
  • 10. April 2013 um 17:23
  • Firewall
    Anfänger
    Beiträge
    4
    • 10. April 2013 um 17:23
    • #1

    Hallo zusammen
    Folgendes Problem: bei meinem drop down menü kommt der top mit dem menü runter, ich möchte das nur das untermenü runterkommt :)
    hier mal die seite http://www.speedeurope.de
    hier mal der css code:


    CSS
    <style type="text/css">
    body {
        font: normal .8em/1.5em Arial, Helvetica, sans-serif;
        background: #ebebeb;
        width: 1000px;
        margin: 0px auto;
        color: #e7e0cf;
    }
    a {
        color: #333;
    }
    #nav {
        margin: 0;
        padding: 7px 6px 0;
        line-height: 100%;
    
    
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    
    
        background: #8b8b8b; /* for non-css3 browsers */
        filter:  progid[IMG]http://www.forum-hilfe.de/images/smilies/biggrin.png[/IMG]XImageTransform.Microsoft.gradient(startColorstr='  #a9a9a9', endColorstr='#7a7a7a'); /* for IE */
        background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
        background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */
    
    
        border: solid 1px #6d6d6d;
    }
    #nav li {
        margin: 0 5px;
        padding: 0 0 8px;
        float: left;
        position: relative;
        list-style: none;
    }
    /* main level link */
    #nav a {
        font-weight: bold;
        color: #e7e5e5;
        text-decoration: none;
        display: block;
        padding:  10px 20px;
        margin: 0;
        -webkit-border-radius: 1.6em;
        -moz-border-radius: 1.6em;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    }
    /* main level link hover */
    #nav .current a, #nav li:hover > a {
        background: #d1d1d1; /* for non-css3 browsers */
        filter:  progid[IMG]http://www.forum-hilfe.de/images/smilies/biggrin.png[/IMG]XImageTransform.Microsoft.gradient(startColorstr='  #ebebeb', endColorstr='#a1a1a1'); /* for IE */
        background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
        background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */
    
    
        color: #444;
        border-top: solid 1px #f8f8f8;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        text-shadow: 0 1px 0 rgba(255, 255, 255, .[IMG]http://www.forum-hilfe.de/images/smilies/icon_cool.gif[/IMG];
    }
    /* sub levels link hover */
    #nav ul li:hover a, #nav li:hover li a {
        background: none;
        border: none;
        color: #666;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }
    #nav ul a:hover {
        background: #0399d4 !important; /* for non-css3 browsers */
        filter:  progid[IMG]http://www.forum-hilfe.de/images/smilies/biggrin.png[/IMG]XImageTransform.Microsoft.gradient(startColorstr='  #04acec', endColorstr='#0186ba'); /* for IE */
        background: -webkit-gradient(linear, left top, left bottom,  from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
        background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */
    
    
        color: #fff !important;
        -webkit-border-radius: 0;
    
        text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    }
    /* level 2 list */
    #nav ul {
        background: #ddd; /* for non-css3 browsers */
        filter:  progid[IMG]http://www.forum-hilfe.de/images/smilies/biggrin.png[/IMG]XImageTransform.Microsoft.gradient(startColorstr='  #ffffff', endColorstr='#cfcfcf'); /* for IE */
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
        background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */
        display: none;
        margin: 0;
        padding: 0;
        width: 185px;
        position: relative;
        top: 35px;
        left: 0;
        border: solid 1px #b4b4b4;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    }
    /* dropdown */
    #nav li:hover > ul {
        display: table-header-group;
    }
    #nav ul li {
        float: none;
        margin: 0;
        padding: 0;
    }
    #nav ul a {
        font-weight: normal;
        text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
    }
    /* level 3+ list */
    #nav ul ul {
        left: auto;
        top: 10px;
    }
    /* rounded corners for first and last child */
    #nav ul li:first-child > a {
        -webkit-border-top-left-radius: 9px;
        -moz-border-radius-topleft: 9px;
        -webkit-border-top-right-radius: 9px;
        -moz-border-radius-topright: 9px;
    }
    #nav ul li:last-child > a {
        -webkit-border-bottom-left-radius: 9px;
        -moz-border-radius-bottomleft: 9px;
        -webkit-border-bottom-right-radius: 9px;
        -moz-border-radius-bottomright: 9px;
    }
    /* clearfix */
    #nav:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    #nav {
        display: inline-block;
    }
    html[xmlns] #nav {
        display: block;
    }
    * html #nav {
        height: 1%;
    }
    </style>
    Alles anzeigen

    Einmal editiert, zuletzt von Firewall (10. April 2013 um 19:59)

  • explanator
    Prinz(essin)
    Reaktionen
    1
    Beiträge
    834
    • 10. April 2013 um 18:19
    • #2

    Bitte editiere deinen Beitrag und setz den Quellcode in die dafür vom Editor zur Verfügung gestellten Code-Tags. Die Code-Buttons findest du in der 2. Zeile rechts.


    Danach schau dir mal bitte das Ergebnis des Validaors an und berichtige anschliessend alle Fehler.
    http://validator.w3.org/check?uri=http…=Inline&group=0
    Sollte danach das Problem immer noch vorhanden sein, frage hier noch mal an.

  • Firewall
    Anfänger
    Beiträge
    4
    • 10. April 2013 um 20:05
    • #3

    ok ich seh die fehler aber was hat das mit dem drop down menü zu tun?

    Einmal editiert, zuletzt von Firewall (10. April 2013 um 20:08)

  • explanator
    Prinz(essin)
    Reaktionen
    1
    Beiträge
    834
    • 10. April 2013 um 20:15
    • #4

    Eine Menge, da sie das Problem sein können.

  • Firewall
    Anfänger
    Beiträge
    4
    • 10. April 2013 um 20:57
    • #5

    ok hab alle geändert bis auf 14stk da weis ich nicht was ich ändern soll

  • threadi
    König(in)
    Reaktionen
    4
    Beiträge
    1.391
    • 10. April 2013 um 23:55
    • #6

    Das weißt Du nicht? Du hast noch kein HTML-Grundgerüst sauber drinne. Beendest den body einfach mitten drinne:

    HTML
    </body>
    </html>
    <link href="templatemo_style.css" rel="stylesheet" type="text/css" />

    Solange Du dich nicht an die HTML-Grundregeln hältst wirst Du auch weiterhin HTML-Fehler beim Validator haben.

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 11. April 2013 um 10:08
    • #7

    und noch nen tip am rande:


    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #a9a9a9', endColorstr='#7a7a7a'); /* for IE */

    ist gaaanz großes kino! die kack "filter" ich nenn se lieber schredder von microsoft kannste in vielen fällen getrost in die tonne kloppen.
    ja es sieht annehmbar aus, aber die machen komische sachen mit deiner seite wovon du im ersten moment nichts mitbekommst.
    da wird irgendwo mal nen overflow:hidden dadurch gesetzt was dir elemente abschneiden kann, andere filter zeigen dir alles ganz normal an, aber verschieben dann die sensitiven bereiche für klicks oder mouse-over etc.

    lieber anständig machen mit ner hintergrundgrafik, die gekachelt wird.

  • Bandit
    Gast
    • 12. April 2013 um 11:01
    • #8

    Firewall
    Würdest du dich bitte an die Forenregeln halten, die du mit der Registierung akzeptiert hast:

    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]
    • Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen

Tags

  • www
  • link
  • color
  • style
  • background
  • text
  • star
  • problem
  • code
  • auto
  • bot
  • bottom
  • position
  • font
  • border
  • inline
  • xml
  • css
  • box
  • filter
  • header
  • float
  • padding
  • dropdown
  • css3
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern