Ergebnis 1 bis 2 von 2

Thema: drop-down-side menü

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

    Frage drop-down-side menü

    Hallo liebe Community,

    ich befasse mich erst seit 2 Tagen richtig mit den Themen HTML und CSS.
    bin aber der Meinung, das ich trotz meines noch nicht so ausgereiften Wissens eine doch sehr gute erste Seite kreiert habe.
    Habe ein Foto als Anlage bei getan. So dort seht ihr das ich oben, wie auch unten eine NAV-Leiste habe.
    Nun meine Frage:
    Da der Punkt Saison 14/15 noch weitere 3 Unterpunkte enthält, wäre meine Frage, wie schaffe ich es das ich eine Art drop-down-side Menü was nach links einblendet kreieren kann?

    Akzeptabel wäre es für mich auch, wenn sich beim drauf klicken auf Saison 14/15 ein kleines Menü darunter öffnen würde, mit den 3 anderen Punkten.

    Meine .html:

    Code:
    <!DOCTYPE html>
    <html>
    
    
    <head>
        <meta charset="ISO-8859-1">
        <title>BR Rentfort D1</title>
        <meta name="description" 
              content="Willkommen bei der D1 des BV Rentfort. Hier findet ihr alle wichtigen News und Themen zur aktuellen Saison.">
        <link href="style.css" type="text/css" rel="stylesheet">
    
    
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    
    
    </head>
    
    
    <body>
    
    
    
    
    <header>
    
    
    
    
      
    </header>
    
    
    <div id="wrapper">
    
    
    <nav id="steuerungoben">
    <div class="menu">
    
    
    
    
        <ul>
        
        <li><a class="menu" href="home.html">Home</a></li>
        <li><a class="menu" href="verein.html">Verein</a></li>
        <li><a class="menu" href="anfahrt.html">Anfahrt</a></li>
        <li><a class="menu" href="kontakt.html">Kontakt</a></li>
        </ul>
    
    
    </div>
    </nav>
    <nav id="steuerungrechts">
    <div class="menu2">
    
    
        <li><a class="menu2" href="news.html">News</a></li>
        <li><a class="menu2" href="termine.html">Termine</a></li>
        <li><a class="menu2" href="saison-2014-2015.html">Saison 14/15</a></li>
        <li><a class="menu2" href="eltern-sind-vorbilder.html">Eltern-Vorbilder</a></li>
        <li><a class="menu2" href="links.html">Links</a></li>
        <li><a class="menu2" href="gästebuch.html">Gästebuch</a></li>
    </div>
    </nav>
    
    
    
    
    
    
    <section>
        <p><h1>Willkommen bei der U13 des BV Rentfort 1919/46</h1></p>
    
    
        <p>Wir die 2002er und 2003er der D1, freuen uns euch auf unserer ersten eigenen</p> 
        <p>Internetseite begrüßen zu dürfen.</p> 
        <p>Informiert euch umfassend über Themen der aktuellen Saison 2014/2015 u.v.m.</p>
    
    
        <p>Zu jeden Spiel werdet ihr Spielberichte und auch Fotos finden, zudem würden wir uns freuen,</p> 
        <p>wenn ihr einen netten Eintrag in unsererm Gästebuch hinterlassen würdet.</p>
    
    
        <p>Nun wünschen wir euch viel Spaß auf unserern Seiten!</p>
    
    
        <p><strong><p>eure D1 des BVR!</p></strong></p>
    </section>
    <footer>
    ©2014 Dominik Kisker
    </footer>
    </div>
    </body>
    </html>

    und meine .css:

    Code:
    * {
        margin: 0;
        padding: 0;
    }
    
    
    header, nav, footer, aside, section {
        display: block;
    }
    
    
    header {
         /*background-color: yellow;*/
        background-image: url(img/kopfbild_01.png);
        height: 281px;
        width: 951px;
        margin-left: 280px;
        margin-right: 360px;
    }
    #steuerungoben ul {
        list-style-type: none;
        margin-left: 69.5px;
        padding-top: 9.42px;
        word-spacing: 7em;
    }
    #steuerungoben li {
        display: inline;
    }
    #steuerungoben a {
        display: block;
        width: 192px;
        text-align: center;
        line-height: 26px;
        float: left;
        color: white;
        text-decoration: none;
    }
    #steuerungrechts {
        /*background-color: green;*/
        width: 150px;
        height: 500px;
        float: right;
        padding-top: 30px;
        list-style-type: none;
        line-height: 45px;
        
    }
    #steuerungrechts ul {
        list-style-type: none;
    }
    #steuerungrechts a {
        display: block;
        color: white;
        text-align: center;
        text-decoration: none;
        border-bottom: 3px;
        border-color: #434343;
        border-style: solid;
    }
    section {
        height: 1000px;
        width: 600px;
        /*background-color: orange;*/
        margin-left: 3.5em;
    }
    
    
    footer {
        /*background-color: brown;*/
        float: right;
        padding-top: 585px;
        margin-right: 15px;
    }
    
    
    #wrapper {
        /*background-color: #eeeeee;*/
        background-image: url(img/kopfbild_02.png);
        margin: 0 auto;
        width: 1024px;
        height: 1300px;
        margin-bottom: 300px;
        background-repeat: no-repeat;
    }
    
    
    body {
        text-align: left;
        background-image: url(img/background.jpg);
        background-attachment: fixed;
        font-family: Arial, sans-serif;
    }
    
    
    section p {
        display: block;
        padding-bottom: 1em;
        font-size: large;
        border-width: 3px;
        
    }
    
    
    section h1 {
        padding-top: 1.5em;
        font-size: xx-large;
        
    }
    
    
    #menu {
        width: 734px;
        height: 34.8px;
    }
    a.menu:link {
        color: #000000;
        background-color: transparent;
    }
    a.menu:visited {
        color: #000000;
        background-color: transparent;
    }
    a.menu:hover {
        color: #4c4c4c;
        background-color: #4c4c4c;
    }
    a.menu:active {
        color: #4c4c4c;
        background-color: #4c4c4c;
    }
    
    
    
    
    #menu2 {
        width: 735px;
        height: 34.8px;
    }
    a.menu2:link {
        color: #000000;
        background-color: transparent;
    }
    a.menu2:visited {
        color: #000000;
        background-color: transparent;
    }
    a.menu2:hover {
        color: #4c4c4c;
        background-color: #4c4c4c;
    }
    a.menu2:active {
        color: #4c4c4c;
        background-color: #4c4c4c;


    Ich hoffe das ihr mir schnell weiterhelfen könnt, das ist mir extrem wichtig!

    Danke !
    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 !!!!!
    Angehängte Grafiken Angehängte Grafiken
    Geändert von DoLu2421 (11.09.2014 um 17:26 Uhr)

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

    Standard AW: drop-down-side menü

    Wo ist deine Liste verschachtelt? So kann es nicht gehen. Vielleicht hilft das hier weiter.
    http://www.gipspferd.de/css/anleitung/a20/a20.php

Ähnliche Themen

  1. Drop Down menü
    Von Firewall im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 12.04.2013, 12:01
  2. Drop UP Menü
    Von Flexxi im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 15.03.2010, 19:34
  3. Drop Down Menü
    Von Saphira im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 08.06.2008, 16:27
  4. Kombikühlschrank Whirlpool side by side
    Von puran im Forum Off Topic und Quasselbox
    Antworten: 1
    Letzter Beitrag: 14.08.2007, 11:09
  5. Drop Down Menü
    Von rwo-tony im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.04.2007, 17:54

Stichworte

Berechtigungen

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