zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Dropdown Menü lässt sich nicht zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.03.2015, 17:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2015
Beiträge: 2
lauramarie befindet sich auf einem aufstrebenden Ast
Frage CSS Dropdown Menü lässt sich nicht zentrieren

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?
Danke im Voraus!

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;
}
Angehängte Grafiken
Dateityp: png Bildschirmfoto 2015-03-30 um 17.36.47.png (906,9 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.03.2015, 07:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.004
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.03.2015, 07:47
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Stichwörter
dropdow menü, dropdown, navigation, zentrieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Dropdown Navigations Cueball CSS 1 04.10.2012 05:42
DropDown Menü verschwindet andre-ne CSS 2 18.11.2009 10:44
CSS Menü zickt rum /IE6/IE7/FF GizmotroniX CSS 3 11.07.2007 08:14
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04
Mysteriöses in CSS Dropdown Menü ph!L CSS 3 21.07.2006 12:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:47 Uhr.