Submenu Elemente verschieben sich

html.de-Forum HTML, XHTML & CSS
1

Moin,
mittlerweile habe ich viel Zeit und arbeite viel mit HTML und CSS also seit nicht sauer wegen den vielen Fragen :).
Ich habe das Problem das mein Submenü zwar ausfährt, alles schön und gut, nur meine Infobox die darunter liegt verschiebt sich ständig. Und auch die Linie die eine vorgegebene Größe hat, verändert sich danach.

[CODE]#menu {
height: 40px;
background-color:white;
color:black;
margin-left: 30px;
margin-right: 0px;

}

#menu ul {
text-align:center;
list-style-type:none;
margin:0px;
padding:0px;
}

#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:110px;
text-align:center;
}

.topmenu ul{
display:none;
}

.topmenu a, .submenu a{
padding:0px 5px;

color:black;
font-weight:bold;
text-decoration:none;
background-color:white;
margin:0;
height: 40px;
line-height:40px;

font-weight:bold;

}

.submenu a{
font-size:12px;
width:110px;
position:relative;
clear:both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
color:black;
background-color:silver ;

}

.topmenu:hover ul {
display:block;
z-index:500;
}

.topmenu:hover ul {
display:block;
z-index: 500;
padding:400px;
}

ul.ausruestung li {
list-style-type:none;
line-height:1,7em;
display:block;
}
.topmenu ul {
display:none;
}
.begruß {
padding-top: 10px;
padding-left: 40px;
margin-right: 20px;
line-height:20px;
}
h4.unterschriften {
padding-top: 10px;
padding-left: 40px;

}
p.textbox {
margin-left:10px;
margin-right: 10px;
}

#linie {
margin-left: 30px;
margin-right: 30px;
}

#infobox{
background-color: red;
width: 20%;
height:20%;
margin-left: 30px;
margin-right: auto;
float:left;

}[/CODE]
Und hier der HTML-Code:
[HTML] 


<div id="infobox"><b><center><h2 class="titelbox">INFOBOX    </h2></center>
<p class="textbox">Infotext</p></div></b>[/HTML]

Wenn ich bei .topmenu:hover ul position:absolute; liegt das Subemenü zwar über der Infobox, jedoch liegt das Submenü dann auch auf direkt auf dem Menü und nicht darunter.
MfG

2

Lösung: Die Hauptmenüpunkte relativ, und das Submenü absolut positionieren, um die Verschiebungen der nachfolgenden Seitenelemente zu vermeiden.

Demo: https://jsfiddle.net/spicelab/fkuLu9ze/

3

Genauso hatte ich es jetzt auch :D. Nur Unterpunkt 1.1 überdeckt quasi Menü 1. Hab jetzt eine Lösung gefunden:
.submenu {
margin:40px 0px 0px 0px;
}
eher andere Frage ist die Lösung so okay oder ist es zu unsauber? Wird ja immer viel gemeckert :p:D

4

Ich hab lediglich auf die Verschiebung der nachfolgenden Inhalte reagiert, und auf die Position des Untermenüs nicht weiter geachtet :stuck_out_tongue:

Theoretisch machbar, da sich der obere Abstand mit der Hauptmenühöhe deckt. Fällt dieses Maß aber höher aus, um dazwischen eine optische Lücke zu erzeugen, könnte das Submenü vorzeitig geschlossen werden.

War in der Vergangenheit immer wieder ein Problem, das in diversen Foren vorgestellt wurde.

In diesem Fall ist stattdessen padding zu präferieren.

5

Oder so.
https://jsfiddle.net/fkuLu9ze/4/

6

Korrekt, es gibt bekanntlich viele Wege nach Rom :wink:

7

Ja das Thema hatte ich im anderen Thread gesehen :D.
Nun möchte ich als letztes wenn ich auf einen Menüpunkt gehe, dass der Menüpunkt eine andere Farbe annimmt. Das Submenü erscheint ja nun unter dem Menüpunkt, nun möchte ich noch solange man mit dem Mauszeiger auf den normalen Menüpunkt ist, beispielsweise als hintergrund schwarz und als schrift weiß.
Ich habe schon ewig lange rumprobiert, finde aber leider keine Lösung :confused:

8

Aus:

#menu a:hover, .topmenu.on a { color:black; background-color:silver; }
wird:

#menu a:hover, .topmenu.on a { color:white; background-color:black; }
Kleine Anmerkung: Solche Fragen ergeben sich nur, weil man Quellcodes von Dritten übernimmt (siehe http://www.silent-fran.de/css/tutorial/aufklappmenue.html ), ohne sich damit im Detail vertraut zu machen.

9

Funktioniert nicht, auf die Idee bin ich auch schon gekommen background wird schwarz und aber Schriftfarbe nicht weiß ;).
P.S. Ich habe mich damit im Detail beschäftigt und auch Tutorials angeschaut
Ändere ich die Hintergrundfarbe in rot ist trotzdem alles rot

10

Bei mir funktioniert’s erwartungsgemäß einwandfrei: https://jsfiddle.net/spicelab/fkuLu9ze/

Falls Du aber Deinen Wunsch falsch ausgedrückt haben solltest, wann welcher Menüpunkt welche Hintergrund-/Schriftfarbe erhält, dann implementiere mal testweise diese Zeile im CSS:

.topmenu:hover > a { background:black; color:white}

Mit dieser Regel behält der Hauptmenüpunkt diese Farbeinstellungen, wenn der Mauszeiger sich im Submenü befindet.

Kein Kommentar…

11

Hallo

Wird ja immer viel gemeckert

In der Regel um spätere Probleme zu vermeiden.

Anfänger sitzen häufig vor ihren Desktop-Rechnern mit großen Bildschirmen sowie Mousebenutzung und machen sich über die späteren Besucher im praktischen Einsatz keine Gedanken. Der Frust ist meist groß wenn sie viel Zeit in eine Webseite investiert haben und feststellen müssen, dass ihre Webseite in der der Praxis nicht funktioniert.

Solche Probleme sehe ich auch bei der Navigation.

Mach zum Beispiel mal das Browserfenster schmal um ein Smartphone im Hochformat zu imitieren und probier dann die Navigation aus.

Und ruf die Navigation mal auf einem Touchscreen-Gerät auf und versuche dann die Navigation zu bedienen. Einen hover-Effekt gibt es bei Touchscreen-Geräten bekanntermaßen nicht. Dazu baust du einfach mal konkrete Links in die Navigation ein. Die müssen mit der Beschriftung überhaupt nichts zu tun haben. Alle Links sollten sich dann erreichen lassen. Da sehe ich aktuell noch Probleme.

Gruss

MrMurphy

12

Also meine Variante mit

margin:40px 0px 0px 0px; hätte auch funktioniert, jedoch war da das Problem, dass es wie oben beschrieben nicht ganz funktionierte. Nun habe ich deinen angepassten Code ( https://jsfiddle.net/fkuLu9ze/7/ ) eingesetzt und siehe da, so funktioniert es. Ich danke dir!