Hallo im Forum!
ich beschäftige mich seit einiger Zeit mit HTML+CSS und versuche eine ansehnliche Seite zustande zu bekommen.
Da diesmal einige Probleme aufgetreten sind, die ich bei den vorherigen Versuchen nicht hatte, muss ich doch mal in einem Forum um Hilfe bitten. Womöglich sind die Probleme bisher nicht aufgetaucht, da ich bei meinen vorherigen Versuchen für jedes Element noch feste Breiten in Pixeln vergeben hatte. Und zwar geht es beim Menü um Folgendes:
- Wie entstehen die Abstände um das Menü herum? Der Menübalken ist deutlich größer als das eigentliche Menü. Margin 0 hat keine Wirkung unter nav.
- Untermenüs sind etwas nach rechts verschoben. padding 0 bringt etwas Besserung aber mittig oder linksbündig bekomme ich die beiden Untermenüs trotzdem noch nicht.
- Eventuell möchte ich ein einfaches responsive design einbauen. Gibt es eine einfache Möglichkeit, das Untermenü bei kleinen Bildschirmen so darzustellen, dass es beim öffnen die nachfolgenden Punkte nach unten verschiebt? Derzeit überschneiden sie sich einfach.
- max-width und width habe ich an die selbe Breite wie die des Bodys angepasst. Macht das so überhaupt Sinn?
Kennt ihr ansonsten eine Anleitung für ein responsive Menü, die aktuelle Befehle verwendet? Ich habe nur Tutorials gefunden, die teils längst nicht mehr gebräuchliche Befehle verwenden. So benutzt er zum Beispiel häufig den Befehl center in HTML oder gibt Schriftarten in CSS in Pixeln an: https://www.youtube.com/watch?v=NtKkSxUjwvU Ich hatte gelesen, dass beides nicht mehr empfohlen wird. Ähnlich war es bei den anderen Tutorials.
Vielleicht sieht jemand meine Probleme sofort und kann man mir da helfen.
@charset "utf-8";
/* CSS Document */
/*------------------------------------------Beginn neues Menü -----------------------*/
nav
{
max-width:1400px; /*ab 1400px soll sich die Seite nicht mehr an Bildschirmbreite anpassen*/
width:97%;
position: absolute; /*Nimmt Menü aus dem Elementenfluss, Menü wird unsichtbar, wenn entfernt*/
padding:0;
margin: 0 auto;
text-align:center; /* hier gültig für alle Listenelemente*/
font-size:1.2em;
background-image: linear-gradient(#8AB1EC, #3277DE); /*Hintergrundfarbe*/
border-top:#DEE9FA thin solid;
}
nav li /*alle Elemente in des Menüs*/
{
float: left;
position: relative;
list-style:none;
padding-right:0.6em;
padding-left:0.6em;
padding-bottom:0.6em;
border-right:#3277DE thin solid;
border-left:#8AB1EC thin solid;
}
nav ul ul /*Untermenü*/
{
position: absolute;
visibility:hidden;
padding:0; /*damit Untermenü weiter links mittig und nicht nach rechts verschoben, trotzdem noch zu weit rechts*/
margin:0;
background-image: linear-gradient(#3277DE, #164489); /*Hintergrundfarbe*/
}
nav ul li:hover /*hover-Effekt für Menü*/
{
background-color:#112EA2;
}
nav ul li:hover ul /*hover-Effekt für Untermenü*/
{
visibility:visible;
}
nav ul li ul li
{
width:130px;
border-top:#DEE9FA thin solid;
padding-top:0.5em; /*Abstamd oben als Ergänzung der restlichen nav li*/
}
nav ul li ul li:hover
{
background-color:#112EA2;
}
nav a
{
text-decoration:none; /*Unterstreichung verschwindet*/
color:#FFF;
}
/*-------------Ende neues Menü ===========================*/<meta charset="utf-8">
<link href="style.css" type="text/css" media="all" rel="stylesheet" />
<title>Nur Menü Okt 2015</title>
</head>
<body>
<!--´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´-->
<!--Navigation/Menü oben-->
<nav>
<ul>
<li class'active'><a href="index.html">Start</a></li>
<li><a href="#">Meine </a></li>
<li><a href="#">Untermenü1</a> <!--HIER KEIN </ul> rein, da Liste weiter geht-->
<ul><!--Untermenü "Leistungen"-->
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Platzhalter</a></li>
</ul><!--Ende Untermenü von "Leistungen"-->
</li>
<li><a href="#">Untermenü2</a>
<ul><!--Untermenü "Vorgehensweise"-->
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Platzhalter</a></li>
</ul><!--Ende Untermenü von "Vorgehensweise"-->
</li>
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Platzhalter</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav><!--Ende Menü-->
</div><!--Ende div Nav-->
</body>
</html>