Ich bin neu hier und das ist meine erste Frage also bitte habe Erbarmen mit mir und meinem gebrochenen Englisch;)CSS-Untermenü Fehler: ul # [Klasse] -> Position: absolut; Keine Überlappung oder falsche Menübreite
Ich habe einen Fehler auf meiner html Navi. Ich folgte mehreren Hilfslinien und habe jetzt das folgende Problem: Wenn ich den Befehl position: absolute; auf meinem subnavi-Element hinzufüge, ist es möglich, den folgenden Inhalt zu überlappen, aber die Untermenüpunkte sind nicht in der gleichen Größe wie das Hauptmenü! Wenn ich es lösche, stimmt die Größe, aber ich habe keine Überlappung!
Bitte Jungs, ich brauche deine Hilfe, denn dieses Projekt hat eine Note und es muss bis Montag fertig sein!
R. Geist
Scrennshots meiner Ergebnisse: Frame with "postion: absolute" Frame without "postion: absolute"
Und mein Code:
/* CSS Style für Kletterwelt - Allgemeine Inhalte v1.01 vom 17.06.2017*/
/* Allgemeine Daten & Einstellungen */
*
{
\t margin: \t \t 0px;
\t padding: \t 0px;
}
body
{
\t /* Für den Gesamten Inhalt gilt */
\t width: \t \t \t 90%;
\t margin: \t \t \t auto;
\t
\t /* Für den Text des gesamten Inhaltes gilt */
\t font-family: \t arial;
}
header img
{
\t width: \t 100%;
}
/* Navi */
ul.navi
{
\t list-style-type:none;
}
ul#hauptmenu li
{
\t width: \t \t \t 19%; \t \t \t /* Aufteilung der Hauptmenüpunkte in relative Größe */
\t text-align: \t center;
\t position: \t \t relativ; \t /* Untermenüs werden relativ zu ihrem Hauptmenüpunkt zugeordnet */
\t float: \t \t \t left;
\t margin-right: \t 4px;
}
ul#hauptmenu a
{
\t text-decoration: \t none; \t /* Entfernt Unterstriche der Links */
\t display: \t \t \t block; \t /* gesamtes Listenelement wird zum anklickbaren Button, nicht nur das Wort */
\t height: \t \t \t \t 40px;
\t line-height: \t \t 40px; \t /* Wenn Wert mit "height" identisch ist, ist Text vertikal zentriert */
\t background-color: \t #333333;
\t color: \t \t \t \t white;
\t font-weight: \t \t bold;
\t border: \t \t \t \t 2px solid #333333;
\t border-radius: \t \t 5px;
}
ul#untermenu li
{
\t width: \t 100%; \t /* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}
ul#hauptmenu li:hover > a
{
\t background-color: #777777; \t /* markiert Buttons übergeordneter Menüs UND den Button, über den man hovert, grau */
}
ul#hauptmenu li:hover a:hover
{
\t background-color: #FF0000; \t /* markiert Button, über den man hovert, rot (überschreibt Definition)*/
}
ul#hauptmenu ul#untermenu
{
\t display: \t none; \t /* Untermenüpunkte standardmäßig ausblenden*/
\t /* position: \t absolute; \t /* HERE!!! WHY?! */
}
ul#hauptmenu li:hover #untermenu
{
\t display: \t block; \t /* beim Hovern über übergeordneten Menü, soll das untergeordnete eingeblendet werden */
\t z-index: \t 500; \t /* Untermenüpunkte werden über dem Content angezeigt (Ebenen-technisch) */
}<!DOCTYPE HTML>
<html lang="de">
<head>
\t <title>testnavi</title>
\t <link rel="icon" href="./bilder/icon.ico"> \t
\t
\t <meta charset="utf-8">
\t <meta name="Florian Zimmermann, Rudolf Geist & Thomas Kretzer" content="HTML-Projekt: Kletterwelt">
\t <link rel="stylesheet" type="text/css" href="./css/CWAllgemeinStyle.css">
\t <!--<link rel="stylesheet" type="text/css" href="./css/testc.css"> -->
</head>
<body> \t \t
\t <header> \t \t
\t \t <img src="./bilder/headerbild.jpg">
\t
\t \t <!--Hinweis zu Navis! Untermenüs stehen innerhalb der Klammern eines Listenelements li !!! -->
\t \t <ul class="navi" id="hauptmenu">
\t \t \t <li><a href="#">HOME</a>
\t \t \t \t <ul class="navi" id="untermenu">
\t \t \t \t \t <li><a href="#">NEWS</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li><a href="#">VIDEOS</a></li>
\t \t \t <li><a href="#">SCHWIERIGKEITSGRADE</a></li>
\t \t \t <li><a href="#">SICHERUNGSGERÄTE</a>
\t \t \t \t <ul class="navi" id="untermenu">
\t \t \t \t \t <li><a href="#geräteart1">DINGER</a></li>
\t \t \t \t \t <li><a href="#geräteart2">TEILE \t </a></li>
\t \t \t \t </ul>
\t \t \t </li> \t
\t \t \t <li><a href="#">ALLGEMEINES</a></li>
\t \t </ul>
\t \t
\t \t <img src="./bilder/headerbild.jpg">
\t </header>
</body>
</html>Hinweis: Meine index.html wird in einem pr Ojekt-Ordner. In diesem Ordner wird ein "css" -Ordner sein, in dem meine "CWAllgemeinStyle.css" liegt.
Getestet habe ich einige mehr und bekam eine hässliche workarround: ich mit dem folgenden comand und seine fast ok gespielt: ul # Hauptmenu ul # Untermenu { \t Anzeige: \t keiner; \t \t/* Untermenüs Standardmäßig ausblenden */ \t Position: \t absolut; \t Breite: \t \t 17%; } aber vertrauen Sie mir, ich habe keine Ahnung, warum das funktionierte: D –