Dropdownmenü zentrieren von Jonas Derbe, 18.07.2019 12:50

Dropdownmenü zentrieren

Jonas Derbe 18.07.2019 12:50

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;
}

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Jonas Derbe: Dropdownmenü zentrieren

Beitrag lesen

Dropdownmenü zentrieren

Dropdownmenü zentrieren