Jonas Derbe: Dropdownmenü zentrieren

Hallo,

ich habe folgendes Problem: Ich habe in meine Webseite ein Dropdownmenü eingefügt, dieses ist allerdings am linken Bildschirmrand und nicht in der Mitte des Bildschirmes. Ich hätte es aber gerne zentriert. Zwar könnte ich es mit "padding-left:(x)px" verschieben, allerdings würde dies nur auf PCs mit gleicher Bildschirmgröße funktionieren. Hat jemand eine Idee wie man es automatisch zentrieren kann? Ich würde mich sehr über eine Antwort freuen!

Danke!

Jonas

<!doctype html>
<html lang="de">
  <head>
    <link rel="icon" type="image/gif" href="http://www.photonstorm.com/wp-content/uploads/2011/09/step4.gif">
    <meta charset="utf-8"/>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <title> Test</title>
  </head>
  <body>
	<div id=website>
	
		<div id=header>
			<h1> Testüberschrift - hier steht der Slogan!</h1>
		</div>
		
		<div id=main>
			<div id=menu >
			<ul class="menu" style="margin-top:20px;">
			<li><a href="#wsdesign">Webseitendesign</a></li>
			<li><a style="width: 200px" href="#angebote">Angebote</a>
	          <ul class="submenu">
	            <li><a href="#einrichtungws">Einrichtung Ihrer Webseite</a></li>
	            <li><a href="#preise">Preise</a></li>
			  </ul>
			</li>
			<li style="width: 250px" class="active"><a   href="#fua">Fragen und Antworten</a>      
			</li>
			<li><a href="#kontakt">Kontakt</a></li>
			</ul>
			</div>		
		</div>
	</div>
  </body>
body{
background-color: #FFFACD ;
}

#website{
font-family: Calibri;	
}

#header h1{

	margin-left: auto;
    margin-right: auto;
	text-decoration: underline;
	font-family: TimesNewRoman,Times New Roman,Times;
	font-size: big;	
	text-align: center;
	background-color: #98FB98 ;
	border-radius: 100px;
	width:1000px;
	height:90px;
	font-size:37px;
	padding-top:35px;
}
#menu{
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		
}

.menu, .menu ul {
	

	    list-style: none;

	    padding: 0;


	}

	.menu {
		
	    height: 60px;

	}

	.menu li {

	    background: -moz-linear-gradient(#3B5661, #3B5661);

	    background: -ms-linear-gradient(#3B5661, #3B5661);

	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3B5661), color-stop(100%, #3B5661));

	 	 background: -webkit-linear-gradient(#3B5661, #3B5661);
		 
	    background: -o-linear-gradient(#3B5661, #3B5661);

	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3B5661', endColorstr='#3B5661');

	    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3B5661', endColorstr='#3B5661')";

	    background: linear-gradient(#3B5661, #3B5661);

	    border-bottom: 2px solid #1D9DD0;

	    border-top: 2px solid #1D9DD0;

	  
	}

	.menu > li {


	    display: block;

	    float: left;

	    position: relative;

	}

	.menu > li:first-child {

	    border-radius: 5px 0 0;
		

	}

	.menu a {
		text-align: centre;

	    border-left: 3px solid rgba(0, 0, 0, 0);

	    color: #808080;

	    display: block;

	    font-family: Calibri;

	    font-size: 15px;

	    line-height: 30px;

	    padding: 0 25px;

	    text-decoration: none;

	    text-transform: uppercase;

	}
	
	.menu li:hover {
    background-color: #1c1c1c;
    background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
    background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
    background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
    background: -o-linear-gradient(#1c1c1c, #1b1b1b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
    background: linear-gradient(#1c1c1c, #1b1b1b);
    border-bottom: 2px solid #222222;
    border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
    border-radius: 50px 0 0 0;
    border-left: 3px solid #C4302B;
    color: #C4302B;
}

/* submenu styles */
.submenu {
    left: 0s;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 2px;
    color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}


  1. Hallo,

    es gäbe einige Ansätze dein gewünschtes Ergebnis in deinem Code zu erzwingen, aber ganz offen gesagt, macht das keinen Sinn. Der Code ist ist im Verhältnis zum Ergebnis viel zu überfrachtet, dann noch mit viel veraltetem CSS und Techniken wie Float. Das geht heutzutage wesentlich einfacher und flexibler.

    Wenn Du dennoch ernsthaft bei diesem Entwurf bleiben möchtest, poste den bitte nicht komplett, sondern stell ihn online, sonst macht es hier kaum jemanden Spaß den auseinander zu nehmen.

    lg.

    1. @@Lisa

      Der Code ist ist im Verhältnis zum Ergebnis viel zu überfrachtet

      Weder linear-gradient noch transition (incl. transition-delay) brauchen noch Vendor-Präfixe; perspective und transform maximal noch -webkit- für Blackberry.[1] Kann man aber wohl vernachlässigen (progressive enhancement). Also weg mit allen Zeilen, wo die Eigenschaft oder der Wert mit - beginnt.

      Wenn Du dennoch ernsthaft bei diesem Entwurf bleiben möchtest

      Das möchte er wegen der Unbedienbarkeit des Menüs sicher nicht.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

      1. https://caniuse.com/ ↩︎

  2. @@Jonas Derbe

    ich habe folgendes Problem: Ich habe in meine Webseite ein Dropdownmenü eingefügt, dieses ist allerdings am linken Bildschirmrand und nicht in der Mitte des Bildschirmes.

    Du hast ein noch größeres Problem: Dein Menü ist nicht bedienbar – nicht mit Tastatur. Ein bedienbares Menü ist allein mit CSS kaum zu machen; dazu bedarf es JavaScript.

    Ich habe dazu was geschrieben und das Ganze in diesem Codepen verdeutlicht.

    Von dort kannst du übernehmen, wie man’s richtig macht, d.h. das 3. bzw. 4. Menü.

    Um das Menü zu zentrieren, ist lediglich noch justify-content: center für nav ul hinzuzufügen.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann