Dropdownmenü zentrieren von Gunnar Bittersmann, 18.07.2019 14:11

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

Dropdownmenü zentrieren
Lisa 18.07.2019 13:54

design

zu diesem forum
– Informationen zu den Bewertungsregeln
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.
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Dropdownmenü zentrieren
  
  Gunnar Bittersmann Homepage des Autors 18.07.2019 14:19 (Versionen)
  
  css
  – Informationen zu den Bewertungsregeln
  @@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
  https://caniuse.com/ ↩︎
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
Dropdownmenü zentrieren
Gunnar Bittersmann Homepage des Autors 18.07.2019 14:11

css

inclusive design

navigation & menu
– Informationen zu den Bewertungsregeln
@@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
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Jonas Derbe: Dropdownmenü zentrieren

Dropdownmenü zentrieren

Dropdownmenü zentrieren

Dropdownmenü zentrieren

Dropdownmenü zentrieren

Dropdownmenü zentrieren