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

[thread]21189[/thread]

Frage zu CSS & Positionierung von "Fenstern"

Tags: HTML CSS Ähnliche Threads

Leser: 6

Articles: hide open all | hide show old branches

+9 replies
YAPD

2021-05-06 12:27

User since
2015-09-20
146 Artikel
BenutzerIn

Hallo Leute,

ich habe mal eine Frage zu meiner Website. Ich habe die Inhalte in verschiedene Bereiche oder Fenster unterteilt, habe aber ein bisschen Problemen mit dem Setzen der Margins. Auf dem Bild "Website - Vollbild.jpg" seht ihr wie es eigentlich aussieht.

Wenn ich das Fenster nun aber verkleinere, stimmen die Abstände nicht mehr bzw. die Höhe des Fensters "Articles" stimmt nicht mehr, siehe Bild "Website - Klein".

Ich weiss, dass es damit zu tun dass wenn ich "margin-top" auf die Fenster "Articles" und Banner anwende, sich die Abstände verschieben, aber auch, wenn ich bei den Fenstern "News" und "Anmeldung" die Höhe verringere, stimmt es nicht. Ich komme einfach nicht drauf, wie man das regelt. Ich habe die CSS und die HTML auch angehängt.

Ich hoffe, ihr könnt mir helfen.

Vielen Dank !

Viele Grüße
YAPD
Anhänge

image/png
1440 x 798
Website_Vollbild.PNG

image/png
505 x 792
Website_Klein.PNG

text/html
78 lines
index.html

text/plain
103 lines
Style.css

Last edited: 2021-05-06 12:29:02 +0200 (CEST)
Yet Another Perl Developer
- +2 replies
- GwenDragon
  
  2021-05-06 15:46
  
  User since
  2005-01-17
  14748 Artikel
  Admin1
  
  Warum feste Werte im CSS? Die Kalkulation der Höhen, Breiten und Ränder ist da eher schwierig.
  Ich würde eher rem als Einheit nehmen anstatt %.
  Float-Elemente sind immer nervig zu debuggen.
  
  Muss das Layout so fest sein?
  
  Kennst du CSS Flex-Boxen?
  Last edited: 2021-05-06 15:51:33 +0200 (CEST)
  die Drachin Gwen
  
  Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
  - gelöscht 2021-10-11 18:26
- +2 replies
- haj
  
  2021-05-06 18:25
  
  User since
  2015-01-07
  555 Artikel
  BenutzerIn
  
  Den Vorschlag von GwenDragon, sich die Flexbox-Technik anzuschauen, kann ich nur unterstützen... mit einem aber: Müssen's wirklich so viele Panels sein? Ich bin kein Fan von Webseiten, bei denen ich den eigentlichen Inhalt zwischen allem möglichen Kram raussuchen muss...
  
  Ein paar einfache Sachen trotzdem: Für Dinge, die über die ganze Breite gehen sollen (wie Header, Menü und Footer), ist float nicht sinnvoll, das normale Rendering von div-Elementen ist dafür gut genug.
  
  Floats sind ja eigentlich dazu da, "kleine" Elemente wie Bilder vom Text "umfließen" zu lassen - man kann sie dazu verwenden, Blöcke nebeneinander zu stellen, indem einfach gar nichts umflossen wird. Das ist aber schon etwas grenzwertig, wenn man die Menge der Inhalte nicht genau kennt. Ein schöner Test für Float-Layouts ist immer, in die einzelnen Elemente mal wirklich lange Texte reinzuschaufeln...
  
  Zum Rumprobieren mit Float-Layouts finde ich die Beispiele von W3Schools ganz nett. Da kann man selber rumeditieren und die Resultate gleich online anschauen.
  - gelöscht 2021-10-11 18:26
- +2 replies
- YAPD
  
  2021-05-28 18:43
  User since
  2015-09-20
  146 Artikel
  BenutzerIn
  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 )
  
  1 2 3 4 5 6 7
  
  .text { float: right; color: white; margin-top:-52px; margin-left: 45px; font-size: 16px; }
  
  Media Queries :
  
  Code: (dl )
  
  1 2 3 4 5 6 7 8
  
  @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
  Anhänge
  
  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
  - gelöscht 2021-10-11 18:26
- gelöscht 2021-10-11 18:26
- gelöscht 2021-10-11 18:35

View all threads created 2021-05-06 12:27.