Ergebnis 1 bis 4 von 4

Thema: Horizontales Dropdownmenü, Display=Inline und Float funktioniert nicht

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

    Frage Horizontales Dropdownmenü, Display=Inline und Float funktioniert nicht

    Hallo
    Ich habe folgendes Problem. Meine Navigationsleiste hat 2 Dropdownmenüs, die ich beide horizontal haben will.
    Leider funktioniert der befehl Display="Inline" und float="left/right" nicht. Ich glaube es liegt daran, dass beide Tags schon benutzt werde.
    Kann mir bitte jmd helfen?
    Ich weis, dass die Dropdown-Menüs zurzeit nicht anklickbar sind, aber das müsste ich mit Padding ja regeln können.

    CSS-Code
    Code:
    @charset "utf-8";
    
    /* Allgemeines*/
    
    
    * {    padding:0px;    margin:0px; }
    
    
    body {
        background-color:#000000;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color:#FFFFFF;
    }
    
    
    #wrapper {
        max-width: 90%;
        margin: 0px auto;
    }
    
    
    a {    text-decoration:none; }
    
    
    ::selection { background-color: #D5D5D5; }
    
    
    /* Navigation */
    
    
    #navi { float:left; }
    
    
    nav ul li ul { 
        visibility:hidden;
        padding:5px 0 30px 170px;
    }
    
    
    nav ul li:hover > ul { visibility:visible;}
    
    
    #navi li {
        display:block;
        list-style-type: none;
        width:160px;
        height:30px;
        color:#fff;
        background-color:#8F8F8F;
        text-align:center;
        font: 1em/30px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        margin:2px;
        border-radius:10px;
        text-shadow:0 1px 0 #434343;
        box-shadow: 0 1px 0 #313131;
        margin:10px 5px; 10px 0;    
        
    }
    
    
    #navi a {    color:#FFFFFF; }
    
    
    #navi li:hover {
            display:block;
        list-style-type: none;
        width:160px;
        height:30px;
        color:#fff;
        background-color:#767676;
        text-align:center;
        font: 1em/30px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        margin:2px;
        border-radius:10px;
        text-shadow:1px 1px 1px #434343;
        box-shadow: 0 1px 0 #313131;
        margin:10px 5px; 10px 0;    
    }
    
    
    .drop {
    }
    
    
    /* Kopf */
    #head {
        color: #FFFFFF;
        padding: 2% 0 0 0;
        font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
        font-size:1.2em;
        text-align:center;
        text-shadow:0 1px 0 #434343;
        margin-bottom:5px;
    }
    
    
    /* Inhalt */
    #content {
        float:center;
        margin:5px 0 0 10px;
        padding:5px;
        color:#F5F5F5;
    }
    
    
    /* Fuss */
    #end {
    }
    Code:
    <!doctype html><html>
    <head>
    <meta charset="utf-8">
    <title>Chris Koeth´s Website</title>
    <link rel="stylesheet" type="text/css" href="websiten/format.css"/>
    </head>
    
    
    <body>
    <div id="wrapper">
    
    
    
    
    <div id="head">
        <h1>Willkommen auf meiner Website</h1>
        <h3>Photographie, Fotomontagen</h3>
    </div>
    
    
    <hr/>
    
    
    
    
    <div id="navi">
        <nav>
            <ul>
                  <li><a href="">Home</a></li>
            
                <li><a href="">Persöhnliches</a>
                    <ul>
                            <li>Steckbrief</li>
                            <li>Über mich</li>
                    </ul>
                </li>
            
                <li><a href="">Familie</a></li>
            
                <li>
                <a href="">Hobbys</a>
                     <ul class="drop">
                        <li><a href="">Fotografie</a></li>
                        <li><a href="">Photoshop</a></li>
                            <li><a href="">Zeichnen</a></li>
                        </ul> 
                    </li>
             <ul>   
        </nav>
    </div>
    
    
    
    
    <div id="content">
        <p>Auf dieser Website finden sie Informationen über mich,             außerdem präsentiere ich hier von mir aufgenommene Bilder oder erstelle Fotomontagen.</p>
    </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
    HTML Newbie
    Themenstarter

    Registriert seit
    22.02.2015
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Horizontales Dropdownmenü, Display=Inline und Float funktioniert nicht

    Wirklich keiner? Morgen ist Abgabetermin für dieses Projekt :/

  3. #3
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Horizontales Dropdownmenü, Display=Inline und Float funktioniert nicht

    Auf das LI-Element float:left anwenden.

  4. #4
    HTML Newbie
    Registriert seit
    25.12.2014
    Beiträge
    7
    Danke
    0
    Bekam 2 mal "Danke" in 2 Postings

    Standard AW: Horizontales Dropdownmenü, Display=Inline und Float funktioniert nicht

    vielleicht schon zu spät, aber: Du schliesst das letzte <ul> nicht. Ansonsten funktioniert es.
    (P.S.: "Persönliches", kommt von "Person")

    edit:
    Falls du willst, dass die Untermenüs in derselben Zeile beginnen wie der gehoverte Menüpunkt:
    mit margin:-38px 0 30px 170px; in der Angabe nav ul li ul { klappt auch das (im FireFox).
    Geändert von DIO (27.02.2015 um 06:29 Uhr)

Ähnliche Themen

  1. float left funktioniert nicht richtig
    Von CodeMole im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 03.10.2014, 13:04
  2. Antworten: 2
    Letzter Beitrag: 01.10.2011, 19:28
  3. Suche Hz. Dropdownmenü das in jedem browser funktioniert
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 05.10.2010, 08:34
  4. DIV Float:left funktioniert nicht
    Von 1234d1 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 29.07.2009, 11:51
  5. Problem mit display: inline
    Von steven11 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 30.07.2005, 12:40

Stichworte

Berechtigungen

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