Ergebnis 1 bis 2 von 2

Thema: Navigation Bar Problem

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

    Frage Navigation Bar Problem

    Hallo,

    ich bin gerade dabei mir eine Hompage zu erstellen und verzweifle jetzt an der Navigation Bar.
    Ich kann Sie nicht über die ganze Seite strecken mit width:100% und kann die Elemente des div tags auch nicht mittig ausrichten.

    Hier mal was ich bisher habe:
    HTML:

    <div id="Rahmen"><ul id="Navigation">
    <li><a href="index.html">Startseite</a></li>
    <li><a href="sites/angebote.html">Angebote</a>
    <ul>
    <li><a href="#">Reparaturen</a></li>
    <li><a href="#">EDV Dienstleistungen</a></li>
    </ul></li>
    <li><a href="sites/kontakt.html">Kontakt</a></li>
    <li><a href="sites/impressum.html">Impressum</a></li>
    <li><a href="sites/über_uns.html">Über uns</a></li>
    </ul></div>

    CSS:
    #Rahmen {
    margin:-14px;
    margin-left:5px;
    margin-right:5px;
    text-align:center;
    background-color: #99CCFF;


    }


    div#Rahmen div {
    margin:-14px;
    margin-left:0px;
    margin-right:0px;
    clear:none;
    position: fixed;
    width:100%;


    }
    ul#Navigation {


    text-align: center;
    background-color: #99CCFF;

    }


    ul#Navigation li {
    list-style: none;
    float:left;
    position: relative;

    }


    ul#Navigation li ul {
    margin:0;
    padding:0;
    position: fixed;
    display: none;
    }


    ul#Navigation li:hover ul {

    display:block;


    }
    ul#Navigation li ul li {
    float: none;
    display: block;


    }


    ul#Navigation a, ul#Navigation span {
    display: block;
    width: 12em;
    padding: 1em 2.3em;
    text-decoration: none;
    text-align:center;
    color: white; background-color: #99CCFF;
    }



    Schon ein Mal danke im vorraus, denn ich verzweifle seit Stunden .
    Mit freundlichen Grüßen

    Phil
    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
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Navigation Bar Problem

    Was auch immer du mit deinen margin Angaben da versuchst ...

    100%-Breite deiner Liste erhälst du nur, wenn auch dein body kein margin und padding mehr hat.
    Ebenfalls, wozu ist der "Rahmen"?

    HTML-Code:
    <style type="text/css">
    html, body {
    margin:0;padding:0;text-align:center;
    }
    
    ul#Navigation {
    margin:0;width:100%;
    padding:0;
    position:absolute;
    text-align: center;
    background-color: #99CCFF;
    height: 50px;
    }
    
    
    ul#Navigation li {
    list-style: none;
    float:left;
    position: relative;
    }
    
    
    ul#Navigation li ul {
    margin:0;
    padding:0;
    position: relative;
    display: none;
    z-index:1001;
    }
    </style>
    
    <ul id="Navigation">
    <li><a href="index.html">Startseite</a></li>
    <li><a href="sites/angebote.html">Angebote</a>
    <ul>
    <li><a href="#">Reparaturen</a></li>
    <li><a href="#">EDV Dienstleistungen</a></li>
    </ul></li>
    <li><a href="sites/kontakt.html">Kontakt</a></li>
    <li><a href="sites/impressum.html">Impressum</a></li>
    <li><a href="sites/über_uns.html">Über uns</a></li>
    </ul>
    Außerdem habe ich mal für dein CSS-Dropdown noch einen z-index hinzugefügt.
    Wenn du sonst unter das Menü deinen Content packst, dürfte der Content vor dem Dropdown sein.


    Wenn du nun aber nicht die ganze Breite belegen willst, musst du deine ul einfach einen anderen margin Wert geben:
    margin: 0 auto 0 auto;
    Dies zentriert deine Liste mittig, ob es bei mit dem text-align vom body reicht, weiß ich grad nicht.


Ähnliche Themen

  1. Problem bei Liste (Navigation)
    Von amigooo im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.08.2008, 17:19
  2. Problem mit Navigation
    Von Gastmann im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 01.05.2006, 21:55
  3. Problem mit Navigation
    Von Basti_rsl2 im Forum HTML & CSS Forum
    Antworten: 32
    Letzter Beitrag: 27.01.2006, 02:55
  4. HTML Problem - Navigation !!
    Von Masterfummel im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 15.07.2005, 14:54
  5. Problem mit Navigation Firefox vs. IE
    Von Calimero78 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 19.03.2005, 04:17

Stichworte

Berechtigungen

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