• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Submenu Elemente verschieben sich

Status
Für weitere Antworten geschlossen.
I-Tiger

I-Tiger

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

}
Und hier der HTML-Code:
HTML: 
  <div id="menu">
    <ul>
      <li class="topmenu">
        <a href="">Menü 1</a>
        <ul>
          <li class="submenu"><a href="">Unterpunkt 1.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 1.2</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Menü 2</a>
        <ul>
          <li class="submenu"><a href="">Unterpunkt 2.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 2.2</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Menü 3</a>
        <ul>
          <li class="submenu"><a href="">Unterpunkt 3.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 3.2</a></li>
        </ul>
      </li>
    </ul>
  </div>

<hr id="linie">
 
    <div id="infobox"><b><center><h2 class="titelbox">INFOBOX    </h2></center>
    <p class="textbox">Infotext</p></div></b>
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
 
Werbung:
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
 
Werbung:
I-Tiger schrieb:
Genauso hatte ich es jetzt auch :D. Nur Unterpunkt 1.1 überdeckt quasi Menü 1.
Zum Vergrößern anklicken....
Ich hab lediglich auf die Verschiebung der nachfolgenden Inhalte reagiert, und auf die Position des Untermenüs nicht weiter geachtet :p
I-Tiger schrieb:
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?
Zum Vergrößern anklicken....
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.
 
Werbung:
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:
 
I-Tiger schrieb:
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ß.
Zum Vergrößern anklicken....

Aus:
CSS: 
#menu a:hover, .topmenu.on a {
  color:black;
  background-color:silver;
}
wird:
CSS: 
#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.
 
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
 
Werbung:
I-Tiger schrieb:
Funktioniert nicht, auf die Idee bin ich auch schon gekommen background wird schwarz und aber Schriftfarbe nicht weiß ;).
Zum Vergrößern anklicken....
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:
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.
I-Tiger schrieb:
P.S. Ich habe mich damit im Detail beschäftigt und auch Tutorials angeschaut
Zum Vergrößern anklicken....
Kein Kommentar...
 
Hallo

Wird ja immer viel gemeckert
Zum Vergrößern anklicken....

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
 
Also meine Variante mit
Code: 
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!
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben