Ergebnis 1 bis 4 von 4

Thema: Horizontale Navigationsleiste mit Dropdown

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

    Ausrufezeichen Horizontale Navigationsleiste mit Dropdown

    Hallo,

    ich vesuche aus diversen Gründen meine Homepage (www.fr*nzisk*-h*ering.weebly, bitte * durch "a" ersetzen) neu mit HTML und CSS in Microsoft Expression Web zu schreiben. Bitte habt Verständnis mit mir, denn ich kenne ich mit diesem Thema eigentlich nicht aus.

    Leider funktioniert mein Dropdown-Menü in der Navigationsleiste nicht, d. h. wenn ich mit dem Mauszeiger über Galerie fahre erscheint nichts. Dazu ist noch zu sagen, dass das Dropdown-Menü vertikal unter dem Punkt Galerie erscheinen soll.

    Hier mein HTML-Code:
    Code:
    <!DOCTYPE HTML>
    <html>
    
    <head>
        <title>a.a</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
        
    </head>
    
    <body>
    
    
        
            <div id="top">
                <div id="logo">
                    <img src="images/Logo WS.png" />
                </div>
                
                
                <div id="nav">
                    <ul><li><a href="index.html">Galerie</a><li>
                        <ul>
                            <li><a href="portrait.html">Portrait</a><li>
                            <li><a href="paare.html">Paare</a><li>
                            <li><a href="freunde.html">Freunde</a><li>
                            <li><a href="schwangerschaft.html">Schwangerschaft</a><li>
                            <li><a href="babys.html">Babys</a><li>
                            <li><a href="kinder.html">Kinder</a><li>
                            <li><a href="familie.html">Familie</a><li>
                            <li><a href="hochzeit.html">Hochzeit</a><li>
                            <li><a href="tiere.html">Tiere</a><li>
                        </ul>
                    <li/>
                            <li><a href="preise.html">Preise</a></li>
                            <li><a href="about.html">Über mich</a></li>
                            <li><a href="contact.html">Kontakt</a></li>
                    </ul>
                </div>
            </div>        
                        
            <div id="content">
                <a href="portrait.html"><img src="images/Galerie Portrait.png" width="280px" height="229px"></a>
                <a href="babys.html"><img src="images/Galerie Babys.png" width="280px" height="229px"></a>
                <a href="hochzeit.html"><img src="images/Galerie Hochzeit.png" width="280px" height="229px"></a>
                <a href="tiere.html"><img src="images/Galerie Tiere.png" width="280px" height="229px"></a>
                <a href="paare.html"><img src="images/Galerie Paare.png" width="280px" height="229px"></a>
                <a href="freunde.html"><img src="images/Galerie Freunde.png" width="280px" height="229px"></a>
                <a href="schwangerschaft.html"><img src="images/Galerie Schwangerschaft.png" width="280px" height="229px"></a>
                <a href="kinder.html"><img src="images/Galerie Kinder.png" width="280px" height="229px"></a>
                <a href="familie.html"><img src="images/Galerie Familie.png" width="280px" height="229px"></a>
            </div>
                    
            <div id="footer">
                <div id="footer-links">
                    <ul>
                        <li> Gutscheine</li>
                        <li> </li>
                        <li>Impressum</li>
                        <li>Datenschutzerklärung</li>
                        <li>&copy; 2014 - a.a</li>
                    </ul>
                </div>
    
                <div id="footer-social-media">
                    <ul>
                        <li><a href=“http://www.facebook.com/a.a“><img src=”Bild Facebook auswählen” /></a></li>
                        <li><a href=“mailto:a@a.de“><img src=”Bild E-Mail auswählen” /></a></li>
                    </ul>
                </div>
            </div>
            
    
        
    </body>
    </html>
    Hier mein CSS-Code:
    Code:
    /* Reset */
    
    html, body {
        margin:0;
        padding:0;
        border:0;
        background:transparent;
        font-size:10px;
        }
        
    div,span, article, aside, footer, header, hgroup, nav, section,
    h1, h2 h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
    table, tr, th, td, tbody,tfoot, thead {
        margin:0;
        padding:0;
        border:0;
        vertical-align:baseline;
        background: transparent;
        }
        
    img {
        margin: 0;
        padding: 0;
        border: 0;
        }
        
    table, tr, td, td, tbody, tfoot, thead {
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
        background: transparent;
        }
        
    table {
        border-collapse: collapse;
        border-spacing: 0;
        }
        
    input, select, textarea, form, fieldset {
        margin: 0;
        padding: 0;
        border: 0;
        }
        
    article, aside, dialog, figure, footer, header; hgroup, nav, section {
        display: block;
        }
        
    h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
        font-family:"Open Sans";
        font-size: 100%;
        font-weight: normal;
        font-style: normal;
        line-height: 100%;
        text-indent: 0;
        text-decoration: none;
        text-align: left;
        color: #464646;
        }
        
    ol, ul {
        list-style: none;
        }
        
        
    /* Global */
    
    html             {    }
    body            { background-color: #ffffff;    }
        
        
    /* Headings */
    h1, h2, h3, h4, h5, h6 { font-weight: bold;    color: #464646; }
         
    h1                 { font-size: 22px; }
     
    h2                 { font-size: 14px; }
    
    h1 img, h2 img, h3 img, h4 img, h5 img, h6 img  h1 { margin: 0; }
    
    
    /* Text Elements */
    
    p                { color: #464646; font-size: 14px; line-height: 100%; }
    p .left            { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
    p .right        { margin:1.5em 0 1.5em 1.5em; padding: 0; }
    
    a                {    }
    a:link            { color: #464646; }
    a:visited        { color: #464646; }
    a:active        { color: #b0b0b0; }
    a:focus            { color: #b0b0b0; }
    a:hover            { color: #b0b0b0; }
    
    blockquote        { color: #000; font-size: 12px; }
    
    strong            { font-weight: bold; }
    em                { font-style: italic; }
    
    
    /* Containers */
    
    #top                { background-color: #ffffff; width: 100%;  overflow: hidden;
                            border-bottom: 1px #e7e7e7 solid; height:200px; text-align:center; z-index:20;    }
    
    
    #logo                { margin:0px auto; }
        
    #nav                {  
        text-align:center;
        }
    
    #nav ul            { 
        padding:0px;
        width:100%; 
        margin: 0px;
        display:block; 
        }
    
    #nav li        { 
        display: inline-block;    
        }
        
    #nav ul li {
        list-style:none;
        }
        
    #nav ul li a        { 
        display:block;float: left; padding: 10px 20px;    
        }
    
    #nav ul li ul {
        display:inline;
        visibility:hidden;
        position:absolute;
        padding:0px;
        }
        
    #nav ul li ul li {
        float:none;
        }
                
    #content            { float: left; width: 900px; padding: 15px;    }
    #content h1            { margin: 0 0 20px 0; font-size: 22px; padding: 20px 0;    }
    #content p            { margin: 5px 0; line-height: 160%; text-align:justify;    }
    #content h2            { margin: 20px 0 0 0;    }
    Vielen Dank vorab.
    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 !!!!!
    Geändert von Anthony89 (21.10.2014 um 20:49 Uhr)

  2. #2
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Horizontale Navigationsleiste mit Dropdown

    Eine Domain http://www.franziska-haering.weebly/ gibt es nicht. Worin besteht dein Problem die richtige URL zu posten?

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    05.09.2014
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Horizontale Navigationsleiste mit Dropdown

    Sorry, ich habe das .com dahinter vergessen. Das ist aber nur die Homepage, die ich nun mit Microsoft Expression Web nachbauen möchte. Den Link habe ich nicht ausgeschrieben, weil ich nicht in Google gefunden werden möchte...

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    05.09.2014
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Horizontale Navigationsleiste mit Dropdown

    Ich habe es nun mit einer Beschreibung endlich hinbekommen.

    Allerdings habe ich noch einige Probleme mit der Navigation:
    - die Schrift des Dropdown-Menüs wird beim Aufklappen (sprich, wenn man über "Galerie" fährt) hellgrau #b0b0b0 angezeigt. Die Schrift soll allerdings dunkelgrau #464646 sein und erst wenn man über das jeweilige Dropdown-Element fährt, hellgrau #b0b0b0 erscheinen
    - wie richte ich das Dropdown-Menü wie unter www.fr*nzisk*-h*ering.weebly aus? Das Dropdown-Menü fängt zu weit unten nach Galerie an, die Schrift steht nicht genau unter Galerie und den weißen Abstand, der links und rechts neben Portrait bis Tiere ist, hätte ich gerne ein bisschen kleiner
    - wenn man von Galerie nach Kontakt fährt sind zwischen Galerie, Preise, Über mich und Kontakt immer Verlinkungen (Hand-Symbol). Bei meiner weebly Adresse sind immer Leerräume dazwischen (Pfeil-Symobl), in denen man nichts anklicken kann.

    Ich weiß nicht, ob ich dafür ein neues Thema aufmachen muss: Wie kann ich die Navigationsleiste inkl. Linie beim Scrollen fixieren (siehe auch meine Weebly Seite)?

    Code:
    <!DOCTYPE HTML>
    <html>
    
    <head>
        <title>FFFotografie</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
        
    </head>
    
    <body>
    
    
        
            <div id="top">
                <div id="logo">
                    <img src="http://xhtmlforum.de/images/Logo WS.png" />
                </div>
                
                
                <div id="nav">
                    <ul>
                        <li><a href="index.html">Galerie</a>
                            <ul>
                                <li><a href="portrait.html">Portrait</a></li>
                                <li><a href="paare.html">Paare</a></li>
                                <li><a href="freunde.html">Freunde</a></li>
                                <li><a href="schwangerschaft.html">Schwangerschaft</a></li>
                                <li><a href="babys.html">Babys</a></li>
                                <li><a href="kinder.html">Kinder</a></li>
                                <li><a href="familie.html">Familie</a></li>
                                <li><a href="hochzeit.html">Hochzeit</a></li>
                                <li><a href="tiere.html">Tiere</a></li>
                            </ul>
                        </li>
                                <li><a href="preise.html">Preise</a></li>
                                <li><a href="about.html">Über mich</a></li>
                                <li><a href="contact.html">Kontakt</a></li>
                        </ul>
                </div>
            </div>        
                        
            <div id="content">
                <a href="portrait.html"><img src="http://xhtmlforum.de/images/Galerie Portrait.png" width="280px" height="229px"></a>
                <a href="babys.html"><img src="http://xhtmlforum.de/images/Galerie Babys.png" width="280px" height="229px"></a>
                <a href="hochzeit.html"><img src="http://xhtmlforum.de/images/Galerie Hochzeit.png" width="280px" height="229px"></a>
                <a href="tiere.html"><img src="http://xhtmlforum.de/images/Galerie Tiere.png" width="280px" height="229px"></a>
                <a href="paare.html"><img src="http://xhtmlforum.de/images/Galerie Paare.png" width="280px" height="229px"></a>
                <a href="freunde.html"><img src="http://xhtmlforum.de/images/Galerie Freunde.png" width="280px" height="229px"></a>
                <a href="schwangerschaft.html"><img src="http://xhtmlforum.de/images/Galerie Schwangerschaft.png" width="280px" height="229px"></a>
                <a href="kinder.html"><img src="http://xhtmlforum.de/images/Galerie Kinder.png" width="280px" height="229px"></a>
                <a href="familie.html"><img src="http://xhtmlforum.de/images/Galerie Familie.png" width="280px" height="229px"></a>
            </div>
                    
            <div id="footer">
                <div id="footer-links">
                    <ul>
                        <li> Gutscheine</li>
                        <li> </li>
                        <li>Impressum</li>
                        <li>Datenschutzerklärung</li>
                        <li>&copy; 2014 - FFFotografie</li>
                    </ul>
                </div>
    
                <div id="footer-social-media">
                    <ul>
                        <li><a href=“http://www.facebook.com/fffotografie“><img src=”Bild Facebook auswählen” /></a></li>
                        <li><a href=“mailto:f@ff.de“><img src=”Bild E-Mail auswählen” /></a></li>
                    </ul>
                </div>
            </div>
            
    
        
    </body>
    </html>
    Code:
    <!DOCTYPE HTML>
    <html>
    
    <head>
        <title>FFFotografie</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
        
    </head>
    
    <body>
    
    
        
            <div id="top">
                <div id="logo">
                    <img src="http://xhtmlforum.de/images/Logo WS.png" />
                </div>
                
                
                <div id="nav">
                    <ul>
                        <li><a href="index.html">Galerie</a>
                            <ul>
                                <li><a href="portrait.html">Portrait</a></li>
                                <li><a href="paare.html">Paare</a></li>
                                <li><a href="freunde.html">Freunde</a></li>
                                <li><a href="schwangerschaft.html">Schwangerschaft</a></li>
                                <li><a href="babys.html">Babys</a></li>
                                <li><a href="kinder.html">Kinder</a></li>
                                <li><a href="familie.html">Familie</a></li>
                                <li><a href="hochzeit.html">Hochzeit</a></li>
                                <li><a href="tiere.html">Tiere</a></li>
                            </ul>
                        </li>
                                <li><a href="preise.html">Preise</a></li>
                                <li><a href="about.html">Über mich</a></li>
                                <li><a href="contact.html">Kontakt</a></li>
                        </ul>
                </div>
            </div>        
                        
            <div id="content">
                <a href="portrait.html"><img src="http://xhtmlforum.de/images/Galerie Portrait.png" width="280px" height="229px"></a>
                <a href="babys.html"><img src="http://xhtmlforum.de/images/Galerie Babys.png" width="280px" height="229px"></a>
                <a href="hochzeit.html"><img src="http://xhtmlforum.de/images/Galerie Hochzeit.png" width="280px" height="229px"></a>
                <a href="tiere.html"><img src="http://xhtmlforum.de/images/Galerie Tiere.png" width="280px" height="229px"></a>
                <a href="paare.html"><img src="http://xhtmlforum.de/images/Galerie Paare.png" width="280px" height="229px"></a>
                <a href="freunde.html"><img src="http://xhtmlforum.de/images/Galerie Freunde.png" width="280px" height="229px"></a>
                <a href="schwangerschaft.html"><img src="http://xhtmlforum.de/images/Galerie Schwangerschaft.png" width="280px" height="229px"></a>
                <a href="kinder.html"><img src="http://xhtmlforum.de/images/Galerie Kinder.png" width="280px" height="229px"></a>
                <a href="familie.html"><img src="http://xhtmlforum.de/images/Galerie Familie.png" width="280px" height="229px"></a>
            </div>
                    
            <div id="footer">
                <div id="footer-links">
                    <ul>
                        <li> Gutscheine</li>
                        <li> </li>
                        <li>Impressum</li>
                        <li>Datenschutzerklärung</li>
                        <li>&copy; 2014 - FFFotografie</li>
                    </ul>
                </div>
    
                <div id="footer-social-media">
                    <ul>
                        <li><a href=“http://www.facebook.com/fffotografie“><img src=”Bild Facebook auswählen” /></a></li>
                        <li><a href=“mailto:f@ff.de“><img src=”Bild E-Mail auswählen” /></a></li>
                    </ul>
                </div>
            </div>
            
    
        
    </body>
    </html>
    Vielen lieben Dank vorab und einen schönen Abend!
    Angehängte Grafiken Angehängte Grafiken
    • Dateityp: jpg HP.jpg (30,2 KB, 2x aufgerufen)

Ähnliche Themen

  1. Horizontale Navigationsleiste mit JQuery
    Von phzu im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 22.09.2011, 21:02
  2. Horizontale Navi aufklappbar!
    Von CroweHammer im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 25.06.2007, 20:59
  3. Horizontale Scrollbalken
    Von aizn im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 21.02.2006, 17:38
  4. horizontale Bildlaufleiste?!
    Von Flaah im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 28.08.2005, 13:19
  5. AS tweening? horizontale verschiebung???
    Von im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 26.08.2004, 10:56

Stichworte

Berechtigungen

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