XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Dropdown Menü lässt sich nicht zentrieren (http://xhtmlforum.de/showthread.php?t=71879)

lauramarie 30.03.2015 18:47

CSS Dropdown Menü lässt sich nicht zentrieren
 
Liste der Anhänge anzeigen (Anzahl: 1)
Folgendes Problem:
ich habe ein dropdown Menü erstellt, dass mittig auf dem gelben Banner platziert sein soll. Zusätzlich sollen beide stets mittig von der Seite platziert sein, auch wenn das Browserfenster verkleinert wird und hierbei sollen die einzelnen Menüpunkte einen gleichmäßigen Abstand zueinander haben.

Ich habe mir schon viele Threads zu dem Thema durchgelesen, doch leider konnte ich mit keiner Lösung bei Problem beheben. Vielleicht übersehe ich auch etwas? :helpsmil:
Danke im Voraus! :happy:

HTML-Code:

<nav>
                <ul>
                                 
                                          <li class="navi"= "cat1">
                                        <a href="#">Home</a>
                                        </li>
                                       
                                        <li class="navi"= "cat2">
                                        <a href="#">Team</a>
                                                                <ul>
                                                                                <li><a href="#" >Britte Berse</a>
                                                                                <li><a href="#" >Denise Schüttler</a>                       
                                                                                <li><a href="#" >Katharina Will</a>
                                                                                <li><a href="#" >Jasmin Eilau</a>               
                                                                                <li><a href="#" >Stepahnie Steinert</a>
                                                                                <li><a href="#" >Stephanie Kroll</a>       
                                                                                <li><a href="#" >Celina Scott</a>
                                                                                <li><a href="#" >Jeanette Klingen</a>                       
                                                                                <li><a href="#" >Meike Bäck</a>
                                                                                <li><a href="#" >Jana Faubel</a>               
                                                                                <li><a href="#" >Helfer Team</a>
                                                                                <li><a href="#" >Helfermächen und -jungs</a>                       
                                                            </ul>
                                        </li>
                                       
                                        <li class="navi"= "cat3">
                                        <a href="#">Angebot</a>
                                                            <ul>
                                                                                <li><a href="#" >Reiten für Jung und Alt</a>
                                                                                <li><a href="#" >Ferienprogramm</a>                       
                                                                                <li><a href="#" >Kindergeburtstage</a>
                                                                                <li><a href="#" >Schulklassen und Kindergärten</a>               
                                                                                <li><a href="#" >Lehrgänge und Reitabzeichen</a>
                                                                                <li><a href="#" >Turniere</a>               
                                                        </ul>
                                        </li>       
                       
                       
                                        <li class="navi"= "cat4">
                                        <a href="#">Die Höfe</a>
                                                  <ul>
                                                                                <li><a href="#" >Gut Dronsberg</a>   
                                                                                <li><a href="#" >Hof Lembeck</a>                               
                                            </ul>
                                        </li>
                       
       
                                        <li class="navi"= "cat5">
                                        <a href="#">Gästebuch</a>
                                        </li>
                       
                                        <li class="navi"= "cat6">
                                        <a href="#">Kontakt / Anmeldung</a>
                                        </li>
                                       
                               
                                </ul>
                </nav>

Code:

#banner{
                padding-top: 30px;
                position: fixed;
                left: 50%;
                margin-left: -545px;
                }
               
#content{
                width: 977px;
                height: 4000px;
                background-color: lightgrey;
                margin: auto;
                margin-top: -30px;
                }
               
html{
                background-image: url(bild2.jpg);
                }
               
/*Navigation*/

nav {
    width: 1024px;
    position: fixed;
    height: 80px;
    margin-top: 35px;
   
  left: 50%;
                margin-left: -545px;
}

nav ul {       
        padding:0px;
  margin: 0px auto;
  font-family: Helvetica;
  font-weight: lighter;
  font-size: 18px;
 
  }

nav ul:after {
    clear: both;
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
   
nav ul li {
    list-style: none;
    float:left;
 
   
   
    }

nav ul li a {
    text-decoration: none;
    display: block;
    color: #333;
    padding: 14px 34px 14px 34px;
    -webkit-transition: background 0.1s ease-out 0s;
    -moz-transition: background 0.1s ease-out 0s;
    -o-transition: background 0.1s ease-out 0s;
    transition: background 0.1s ease-out 0s;
    border: 1px solid red;
    background-color: pink;
 
 
     
}

nav ul li:hover > ul {
    visibility: visible;
}

nav ul li:hover a, nav ul li:hover > ul li a  {
    background-color: #f7eeb4;
}

nav ul li ul{
    display: inline;
    visibility: hidden;
    position: absolute;
    padding:0px;
}
nav ul li ul li{
    float: none;
}
nav ul li ul li a:hover{
    color: black;
}

/*nav ul li: hover >a = Schrift der Navigation, wenn Maus darüber fährt*/
nav ul li:hover > a {
    color: black;
}
/*nav ul li ul li a = Schrift des Untermenüs, wenn die Maus nicht darüber fährt*/
nav ul li ul li a {
    color: grey;
    }

/*Schrift/Hintergrund des Untermenüs, auf der gerade die Maus ist*/
nav ul li ul li a:hover{
    color: black;
    background-color: #FAFAFA !important;
}


cloned 31.03.2015 08:43

Das sind alle Möglichkeiten, die du zum zentrieren hast.

btw. was soll die navi klasse bringen? Die verwendest du nicht ein mal. Abgesehen davon, dass es redundant ist.

Du sagst es soll immer zentriert sein, auch bei kleineren Browserfenstern. Wie soll die Navigation denn bei zB 480px Breite aussehen? Da geht sich das nämlich gar nicht aus.

etux 31.03.2015 08:47

Validiere als erstes Deinen Quellcode.
Überlege Dir dann, ob es sinnvoll ist, Text enthaltende Elementen auf einer starren Grafik fest zu nageln.
Für den Banner bräuchtest Du nicht unbedingt eine Grafik - Stichwort „Ribbon“ (Begrif googeln).
Dann erst kommt das Zentrieren - es gibt einige Möglichkeiten.
Deine jetzige Variante ist allerdings völlig ungeeignet.


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:54 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023