Ergebnis 1 bis 5 von 5

Thema: Darstellung CSS Navigation

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

    Frage Darstellung CSS Navigation

    Hallo zusammen
    nun will ich mich auch mal etwas ins CSS reinleben. Leider stosse ich gleich zu anfang an schon an ein problem.

    Ich habe untenstehenden Code. Das ganze ist eigentlich fast nach meinem geschmack gelungen. Eine "Kleinigkeit" macht mir aber zu schaffen.
    Wenn Ich das Submenu öffnen lasse verschiebt es mir das ganze Hauptmenu nach rechts. Gedacht war das das Hauptmenu Fix (also ohne verschiebung, wenn das Submenu geöffnet wird) stehen bleibt.

    Hat mir da vielleicht jemand einen Tipp

    Gruss und danke im vorherein scchon mal

    Harry

    HTML-Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Navigation zu allen wichtigen Bereichen</title>
            <link href="css/style.css" type="text/css" rel="stylesheet">
        </head>
        <body>
            <header>
                <menu>
                    <ul>
                        <li class="topmenu">
                            <a href="index.html">Menu 1</a>
                            <ul>
                                <li class="submenu"><a href="#">Submenu<br> Produktiv</a></li>
                                <li class="submenu"><a href="#">Submenue 2</a></li>                        
                            </ul>
                        </li>
                        <li class="topmenu">
                            <a href="#">Produkte</a>                        
                            <ul>
                                <li class="submenu"><a href="#">submenue1</a></li>
                                <li class="submenu"><a href="#">submenue2</a></li>
                            </ul>
                        </li>                                
                        
                    </ul>      
                    
                </menu>
                
            </header>
        </body>
    </html>
    Code:
    /* Menue Leiste */
    
    /* Zuerst das kommplete Menue*/
    menu
    {
        font-size: 16px;
        position: absolute; 
        font-family: Arial;    
        margin-left: 20em;
        margin-top: 10em;
    
    }
    
    /* Menu Reset*/
    menu ul
    {
        list-style-type: none;
        list-style-image: none;
        margin: 0;
        padding: 0;
    }
    
    menu li.topmenu
    {
        float: left;
    }
    
    .topmenu a
    {
        float: left;
        height: 50px;
        width: 80px;
        text-align: center;
        background-color: #009de0;
        border-radius: 4px;    
        border: 2px solid #ffffff;    
    }
    
    .topmenu ul
    {
        display: none;
    }
    
    .topmenu a, .submenu a
    {
        padding: 12px 18px;
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
        margin: 0;
    }
    
    .submenu a
    {
        font-style: 12px;
        width: 9.3em;
        position: relative;
        clear: both;
        height: 20px;
        background-color: #e0f6ff;    
        color: #004394;
        border-radius: 0px;    
        text-align: left;
        border: 9px solid #e0f6ff;
        border-top-style: #ffffff;
        border-top: #999999 2px solid;
        
    }
    
    menu a:hover,  .topmenu.on a
    {
        color: #ffffff;
        background-color: #e20019;
    }
    
    .topmenu:hover ul
    {
        display: block;
        z-index: 500; 
    }
    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
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Darstellung CSS Navigation

    Probier mal. Die Farben musst du dir wieder anpassen.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    
    <style type="text/css">
    * {
     margin:0;
     padding:0;
     list-style:none;
     text-decoration:none;
     box-sizing:border-box;
    }
    
    nav {
        float: left;
        width: 100%;
        background: #424242;
        font-size: 16px;
    }
    
    
    nav ul {
        margin: 0;
        padding: 0;
    }
    
    
    nav a {
        display: block;
        color: #fff;
        text-decoration: none;
    }
    
    
    nav ul li{
        position: relative;
        float: left;
        list-style: none;
    }
    
    
    nav ul li:hover {
        background: #DF0101;
    }
    
    
    nav ul li a {
        padding: 20px;
    }
    
    
    nav ul ul {
        position: absolute;
        top: -9999px;
        left: -9999px;
        background: #333;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.6);
    }
    
    
    nav ul ul li {
        float: none;
        width: 200px;
        border-bottom: 1px solid #555;
    }
    
    
    nav ul ul li a {
        padding: 10px 20px;
    }
    
    
    nav ul li:hover > ul {
    top:auto;
    left:0;
    }
    
    
    </style>
    <title></title>
    
    
    </head>
    <body>
    <nav>
    <ul>
     <li class="topmenu"><a href="index.html">Menu 1</a>
        <ul>
           <li class="submenu"><a href="#">Submenu Produktiv</a></li>
           <li class="submenu"><a href="#">Submenue 2</a></li>                        
        </ul>
     </li>
     <li class="topmenu"><a href="#">Produkte</a>                        
        <ul>
           <li class="submenu"><a href="#">submenue1</a></li>
           <li class="submenu"><a href="#">submenue2</a></li>
        </ul>
     </li>                                
    </ul>      
    </nav>
    </body>
    </html>

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    28.06.2016
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Darstellung CSS Navigation

    Hallo djheke
    Hmmm.... auf die ganz schnelle: Danke, dein Code Flutscht. Ich schaue mal ob ich heute Abend das ganze wieder hinbekomme mit den Farben usw.

    Infos folgen noch

    Gruss

    Harry

  4. #4
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    146
    Danke
    9
    Bekam 11 mal "Danke" in 11 Postings

    Standard AW: Darstellung CSS Navigation

    Moin
    also ich habe in Deiner CSS nur in dem Selrctor
    .submenu a
    {
    font-style: 12px;
    /* width: 9.3em; */
    position: relative;
    clear: both;
    height: 20px;
    background-color: #e0f6ff; color: #004394;
    border-radius: 0px;
    text-align: left;
    /* border: 9px solid #e0f6ff; */
    border-top-style: #ffffff;
    border-top: #999999 2px solid;
    }

    die zwei Zeilen auskommentiert.

    Gruß modem-kind

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    28.06.2016
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Darstellung CSS Navigation

    Hallo modem-kind
    danke dir für die Antwort.
    Leider war das nicht die lösung da die Untermenus breiter und auch weniger hoch sein müssen, als das Hauptmenu.

    Am Wochenende sollte ich ev. wirklich etwas Zeit haben um den Code nochmals zu Prüfen

    Gruss

    Harry

Ähnliche Themen

  1. Darstellung im IE9 sieht aus wie IE6...
    Von Teron Gerofied im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 11.03.2012, 13:19
  2. Navigation / Webseite darstellung
    Von FlinkerWiesel im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 20.11.2011, 15:44
  3. Darstellung ok?
    Von Foulfang im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 25
    Letzter Beitrag: 04.05.2008, 18:11
  4. Anfängerfrage zur Darstellung
    Von wurzl im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 08.01.2007, 13:17
  5. probleme mit der darstellung im ie6.0
    Von desperate_andy im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 08.11.2006, 21:13

Stichworte

Berechtigungen

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