Bilder - Texte überschneiden sich

  • Hallo,


    habe vor kurzem angefangen mit HTML und CSS zu arbeiten. Mein Problem ist, wenn ich das Fenster kleiner mache, überschneiden sich meine Texte und Bilder. Wie könnte ich mein Problem lösen ? Bitte keine Voururteile haben erst vor einigen Tagen angefangen.




  • Dann erst Mal willkommen im Forum!

    Fangen wir mit dem Kernproblem an: Die Bilder, Videos und Texte überschneiden sich. Das liegt daran, dass Du ausgiebig von position: fixed; und position: absolute; Gebrauch gemacht hast. Dazu musstest Du die Positionen mit margin-top und top so anpassen, dass es bei einem breiten Browserfenster passt. Wird das Browserfenster jetzt schmaler, brechen die Text auf mehrere Zeilen um und weil die Positionen gleich bleiben kommt es zu den Überlagerungen. Ein häufiges Problem.

    Meine Empfehlung: Lass das position weg, dann werden die Elemente untereinander angeordnet, die Höhen passen sich an die Inhalte an und es gibt keine Überlagerungen.

    Bei dem Menü bzw. der Navigation ist es jedoch gängige Praxis, dass es fixiert ist und auch beim Scrollen immer sichtbar. Weiterer Vorschlag: Gib diesem ein position: sticky;, wie hier beschrieben:

    https://www.html-seminar.de/css-position-sticky.htm

    Es gibt sicher noch mehr zu deinem Layout anzumerken aber ich lasse es erst Mal hierbei bewenden.

  • Ich konnte nicht gleich Antworten, weil ich auf dem nach Hause weg war.


    Ich hab das Problem so gelöst, dass ich das Nav im Html als ersten Code eingetragen habe und so weiterhin die anderen.

    Meine Frage ist jetzt. Ich habe auch ein Logo im Bild, das überschreibt trotzdem alles. Muss ich mit Grid oder Flexbox zwingend arbeiten damit meine Seite sozusagen responsive ist ?

  • Zitat

    Ich habe auch ein Logo im Bild, das überschreibt trotzdem alles.

    Dann stimmt da noch etwas nicht. Poste das neue HTML und CSS.

    Zitat


    Muss ich mit Grid oder Flexbox zwingend arbeiten damit meine Seite sozusagen responsive ist ?

    Wie ich sehe, hast Du dich schon gut informiert. Einfache Layouts kann man auch ohne das realisieren, aber wenn es etwas komplizierter wird, geht es leichter mit Grid und Flex. Sieh es nicht als Belastung sondern als Techniken, die die Sache einfacher machen.

  • So, ich habe mit dem neuen Code wieder eine Testdatei gemacht und dort ist zunächst mal aus meiner Sicht alles OK. Du schriebst:

    Zitat

    Ich habe auch ein Logo im Bild, das überschreibt trotzdem alles.

    Das passiert bei mir nicht. Sowohl im HTML als auch im CSS zeigt mein Editor mir jedoch diverse Fehler an. Es ist möglich, dass dadurch dein Browser den Text anders interpretiert als meiner (ich habe Opera).


    Im CSS fehlte eine schließende Klammer:

    Code
    1. .navbar {
    2. top: 0px;
    3. position: sticky;
    4. /* hier fehlte die schließende Klammer: */
    5. }
    6. /*about.html */
    7. #body2 {
    8. /* usw. */

    Und im HTML passte einiges mit den schließenden Divs nicht:

    Ein guter Editor erleichtert einem das Leben sehr, denn er rückt den Code automatisch ein, so dass man die Struktur besser erkennt und er zeigt Fehler an. Selber benutze ich Visual Studio Code.

  • Zitat

    Das Problem mit Grids (besonders damit)und flexbox ist, dass ich mir da Videos angeguckt habe, die aber irgendwie nicht umsetzen konnte. Aber ich denke mit Flexbox wäre das einfacher als Grid oder ?

    Ich glaube nicht, dass das eine einfacher ist als das andere. Beide sind jedoch unterschiedlich und es kann die Sache erschweren, wenn man z. B. versucht, mit Grid ein Layout umzusetzen, für das sich Grid nicht eignet und umgekehrt mit Flex.

    Es ist sicher zu empfehlen, am Anfang kleine Brötchen zu backen und sich Layouts vorzunehmen, die nicht zu kompliziert sind.

    Hier bei HTML-Seminar gibt es auch eine Einführung in Flex:

    https://www.html-seminar.de/css-flexbox.htm

    nicht jedoch für Grid, wenn ich nicht etwas übersehe.

  • Nun Gut ich hab das zusätzliche div eingefügt aber mein Visual Studio hat mir bei dem ersten </div>, das ausserhalb des Kommentars sein muss keinen Fehler angezeigt. Auf den optischen ersten Blick sah nichts anders aus.


    Ich möchte meine responsive machen, muss ich jetzt alle Objekte in ein Grid oder eine Flexbox einfügen ? Oder nur z.B. mein Logo ?


    Danke dir für die Links ich werde sie mir sofort durchlesen. :D

  • Jetzt habe ich mein Logo in ein <div> getan, mit einer id=flex und habe dann im CSS display: flex; rieingeschrieben und

    flex-direction: row;. Ich denke es ist so gut oder ?


    Da ich ja schon angefangen habe, tue ich die einzelnden Objekte in Flex rein. Ist das möglich oder führt das zu Komplikationen ?

  • Zitat

    Nun Gut ich hab das zusätzliche div eingefügt aber mein Visual Studio hat mir bei dem ersten </div>, das ausserhalb des Kommentars sein muss keinen Fehler angezeigt.

    Dann braucht es dafür wahrscheinlich eine Erweiterung. Selber habe ich HTMLHint installiert, versuche es damit.

    Zitat

    Auf den optischen ersten Blick sah nichts anders aus.

    Die Browser sind sehr tolerant gegenüber Fehlern im HTML. MrMurphy hat das hier in Posting #5 ausführlich erklärt:

    Wann werden obsolete Elemente/Atrribute/Dinge entfernt?

  • Zitat

    Jetzt habe ich mein Logo in ein <div> getan, mit einer id=flex und habe dann im CSS display: flex; rieingeschrieben und

    flex-direction: row;. Ich denke es ist so gut oder ?


    Da ich ja schon angefangen habe, tue ich die einzelnden Objekte in Flex rein. Ist das möglich oder führt das zu Komplikationen ?

    Diese Fragen kann man nur beantworten, wenn man weiß, was Du dir für eine Anordnung vorstellst und wie dein letztes HTML und CSS aussieht. Es kann auch sinnvoll sein, wenn Du dir Webspace besorgst und das Ganze online stellst, dann kann man das HTML und CSS jederzeit einsehen und auch die Bilder sind verfügbar. Für den Anfang und zum Testen ist bplaced.net ganz brauchbar.

  • Ich habe meine Webseite auf einem Sever hochgeladen. und die Webseite sieht eig. gut aus, auch wenn ich das Fenster kleiner mache, es überschneidet sich nichts.


    Ich lad mir mal Webspace und folgendes was du aufgezählt hast runter und lese mal den Text. Danke dir. :D

  • Zitat

    Ich habe meine Webseite auf einem Sever hochgeladen

    Wenn Du einen Server hast, hast Du ja schon Webspace und alles ist gut. Dann brauchst Du in Zukunft nur noch die URL zu posten.

    Zitat

    die Webseite sieht eig. gut aus, auch wenn ich das Fenster kleiner mache, es überschneidet sich nichts.

    Das ist ja schon ein wesentlicher Fortschritt gegenüber deiner Anfangsversion.