Frage zu CSS & Positionierung von "Fenstern" - #193312 (HTML, CSS und Javascript)

YAPD

2021-05-28 18:43

User since
2015-09-20
146 articles
BenutzerIn

user image

Hallo Zusammen,

vielen Dank erstmal für Eure Antworten und sorry,
dass ich den Beitrag aus den Augen verloren habe. :)
Ich habe das Design nun nochmal angepasst und es
gefällt mir soweit ziemlich gut. Nun habe ich aber
leider ein Problem mit den Media Queries :

Ich habe das Menu so eingebunden, dass es sich wie
der Text flixibel anpasst, je nach Größe des Browser
Fenster. Auf dem Bild "Menuleiste voll" seht ihr
wie es mit maximaler Fenstergröße aussieht und auf
dem Bild "Menuleiste minimiert", dass er beim
Verkleinern den Text der Buttons weglässt.

Genau hier ist mein Problem. Wenn ich das Fenster
verkleinere ( wie auf "Menuleiste minimiert ) und
DANACH wieder großziehe, verschieben sich die Texte
nach oben, wie auf Bild "Menuleiste verschoben"
abgebildet.

Ich habe schon verschiedene Media Queries ausprobiert,
aber ich bekomme es einfach nicht hin, dass das Menu
beim Vergrößern wieder so aussieht wie vorher.

Aufruf in index.html :

Code: (dl )

<li><a href="index.html"><img src="images/tags.png"><div class="text">Services</div></a></li>

CSS :

Code: (dl )

.text {
  float: right;
  color: white;
  margin-top:-52px;
  margin-left: 45px;
  font-size: 16px;
}

Media Queries :

Code: (dl )

@media screen and (min-width: 320px) and (max-width: 700px) {
  .row {   
    flex-direction: column;
  } 
   .text {
   display: none;
 }	
}

Ich hoffe ihr könnt mir helfen und mir eine Tipp geben, wie
ich das Verschieben des Textes verhindere.

Vielen Dank im Voraus.

Beste Grüße
YAPD

Attachments

image/png
462 x 91
menuleiste_minimiert.PNG

image/png
811 x 285
menuleiste_verschoben.PNG

image/png
1394 x 97
menuleiste_voll.PNG

Last edited: 2021-05-28 19:10:30 +0200 (CEST)

Yet Another Perl Developer