Frage zu float und clear float

    Hallo,
    ich habe 5 Bilder anzuordnen in einer box mit der Weite von 965px. Das 1. Bild ist hochkant w140 x h645, die Bilder 2 bis 5 sind alle gleich groß, je w300 x h 305. So steht also am linken Rand nur das Bild 1, in der Mitte die Bilder 2 und 4 (untereinander), auf der rechten Seite die Bilder 2 und 5 (auch untereinander).
    Die Bilder konnte ich mit dem nachstehenden css-Code auch so einrichten, dass es auf der Homepage optisch jedenfalls "ordentlich" aussieht. Aber ich frage mich, ob der css Code korrekt ist.
    Der Code:

    Meine Fragen: Ist das mit diesen Minusbeträgen richtig oder habe ich grundsätzliche Fehler im Code? Herzlichen Dank für jeden Hinweis.
    Klausi

    Einmal editiert, zuletzt von Arne Drews (19. September 2017 um 21:16) aus folgendem Grund: MOD: Coe-Tags zugefügt

    Hallo

    Was verstehst du unter "ordentlich aussieht"? Damit kann außer dir niemand etwas anfangen.

    Negative Werte sind zwar zulässig, in der Regel aber unsinnig.

    Um Probleme zu vermeiden und den Datentransfer zu verringern hat es sich bewährt (und gehört zu den Standardarbeiten im Hintergrund) Bilder jeweils so zu bearbeiten, dass ihre Größer nicht größer ist als die maximale Anzeigegröße auf der Webseite.

    Insgesamt kann es sinnvoller sein statt float Flexbox zu verwenden. Aber wir kennen weder die Bilder noch, wie schon geschrieben, die von dir gewünschte Ansicht.

    Ebenso ist fragwürdig ob die Breite von 965px überhaupt einen Sinn macht. Anfänger neigen leider gerne dazu, die Seitenbreite von Webseiten ohne einen wirklichen Sinn zu begrenzen.

    Gruss

    MrMurphy

    Wie sieht denn die Seite bei kleinerem Bildschirm aus... Tablet oder SmartPhone? Dann wird sich zeigen, ob das alles so passt. Mir sieht das allerdings sehr nach einer Zwangsjacke für den Browser aus.
    Bild 4 sieht seltsam aus... wenn du einem 300px breitem Bild trotz 'float: left;' noch eine negative margin von 300px geben musst.
    Solltest du anders lösen. zB clear: both , margin-top kleiner und margin-left ganz weg.

    if(!sleep)

    {$sheep++;}

    Hallo,
    mit "ordentlich aussieht" meine ich, dass das angezeigte Ergebnis im Browser meinen Vorstellungen entspricht. Ich bin also mit dem Ergebnis zufrieden. Das meine Seitenbreite auf 965px beschränkt ist habe ich so nicht geschrieben. Die Box ist 965 px groß. Und wenn meine Bilder eine Breite von 300 px haben sind sie (jedenfalls auf meinem Bildschirm) nicht größer als der Bildschirm, sondern decken nur einen kleinen Teil davon ab. Und was das Bilder sind hat doch mit der Fragestellung überhaupt nichts zu tun. Und die von mir gewünschte Ansicht habe ich deutlich beschrieben. Leider habe ich auf meine Frage leider keine Antwort erhalten. Ich darf meine Frage wiederholen: Wo im Code habe ich Fehler oder ist es grundsätzlich falsch Bilder mit einem solchen Code zu platzieren. Wenn dem so ist, wie macht man es besser?
    Danke
    Klausi

    Hallo

    Zitat

    dass das angezeigte Ergebnis im Browser meinen Vorstellungen entspricht.

    Merkst du überhaupt dass wir mit solchen Angaben nichts anfangen können? Wie sollen wir dir damit konkret helfen können?

    Gruss

    MrMurphy

    Herzlichen Dank für die Antwort. Mit "clear both" schiebt sich allerdings das mittlere Bild unter das linke. Geht also leider nicht. Ich habe jetzt noch "position: relative" hinzugefügt und dem Bild 4 ein "float: right" gegeben. Jetzt habe ich auch keine extremen Minuswerte mehr. Nochmals Danke und Gruß an die Nordseeküste. Klausi