Lothar: Resp. Webdes.: Problem mit white-space:nowrap und max-width:100%

Responsives Webdesign: Problem mit white-space:nowrap und max-width:100%; bei Nebeneinanderreihung von 3 Bildern

In einem <div> werden 3 Bilder aus einen Ordner eingelesen.
css des div: white-space:nowrap;max-width:100%;width:998px;

Alle 3 Bilder werden im css mit max-width:100%; height: auto;  versehen. Das erste und das 3 Bild wird jeweils gegen einen kleinen Pfeil ausgetauscht. In der ausgegebenen html-Datei stehen die Breite und die Höhe der Bilder.

Wenn ich den Browser in der Breite zusammenschiebe, werden die beiden äußeren, kleineren Bilder (Pfeile) gar nicht verkleinert und das große Mittlere zu wenig. Das bedeutet, die 3 Bilder ragen über das div hinaus.

Mit meinem Android -Mobiltelefon stelle ich keine Änderungen und Fehler fest.

Hier ist eine Beispielseite: http://www.l-seifert.de/bautzen/Bautzener-Dom.html

Grüße und vielen Dank im Voraus für jede Hilfe

  1. Hallo!

    Responsives Webdesign: Problem mit white-space:nowrap und max-width:100%; bei Nebeneinanderreihung von 3 Bildern

    Warum "white-space: nowrap" an dieser Stelle?

    In einem <div> werden 3 Bilder aus einen Ordner eingelesen.
    css des div: white-space:nowrap;max-width:100%;width:998px;

    Warum "white-space: nowrap" an dieser Stelle?

    Alle 3 Bilder werden im css mit max-width:100%; height: auto;  versehen. Das erste und das 3 Bild wird jeweils gegen einen kleinen Pfeil ausgetauscht. In der ausgegebenen html-Datei stehen die Breite und die Höhe der Bilder.

    Wenn ich den Browser in der Breite zusammenschiebe, werden die beiden äußeren, kleineren Bilder (Pfeile) gar nicht verkleinert und das große Mittlere zu wenig. Das bedeutet, die 3 Bilder ragen über das div hinaus.

    Du hast auch an keiner Stelle gesagt, dass dies geschehen soll. Deine Bilder sollen _jeweils_ maximal 100% einnehmen! Wenn ein Bild dann schon die volle Breite einnimmt können die anderen folglich nicht mehr daneben angezeigt werden! Beachte auch Außen- und Innenabstände und verwende ein anderes Boxmodell.

    Mit meinem Android -Mobiltelefon stelle ich keine Änderungen und Fehler fest.

    Was denn nun? Keine Änderungen oder kein Fehler?

    Hier ist eine Beispielseite: http://www.l-seifert.de/bautzen/Bautzener-Dom.html

    Eine oder deine?

    Gruß
    Alex

    1. Beachte auch Außen- und Innenabstände und verwende ein anderes Boxmodell.

      Sollte "oder" statt "und" heißen. Gemeint war, dass du über "box-sizing: border-box", umgehen kannst, dass Innenabstand und Rahmen (nicht aber Außenabstand) noch auf die Breite hinzurechnen musst.

    2. Hallo Alex,

      vielen Dank für Deine Antwort.

      Warum "white-space: nowrap" an dieser Stelle?

      Jeweils 3 Bilder aus einem Ordner werden eingelesen mit:
      echo "<a href='$var2[0].html'><img class='bilder' SRC='$ordner/$files2[$i2]' width='$width' height='$height'></a>".chr(13);

      Die angezeigten Bilder können verschiedene Größen haben. Die beiden äußeren werden durch die Pfeile ausgetauscht, die Links dazu bleiben erhalten, so dass man weiter klicken kann. Die Pfeile sollten neben dem großen angezeigten Bild stehen bleiben, sonst werden sie nach oben und unten umgebrochen.

      Wenn ich den Browser in der Breite zusammen schiebe, werden die beiden äußeren, kleineren Bilder (Pfeile) gar nicht verkleinert und das große Mittlere zu wenig. Das bedeutet, die 3 Bilder ragen über das div hinaus.

      Du hast auch an keiner Stelle gesagt, dass dies geschehen soll.

      Wie kann ich das festlegen?

      Deine Bilder sollen _jeweils_ maximal 100% einnehmen! Wenn ein Bild dann schon die volle Breite einnimmt können die anderen folglich nicht mehr daneben angezeigt werden! Beachte auch Außen- und Innenabstände und verwende ein anderes Boxmodell.

      Mir fällt leider kein anderes Boxenmodell ein. Siehst Du eine Möglichkeit?

      Hier ist eine Beispielseite: http://www.l-seifert.de/bautzen/Bautzener-Dom.html

      Eine oder deine?

      Das ist meine Seite zum testen.

      Ich habe eine Möglichkeit gefunden. Da, wo ich die Bilder vergleiche und gegen die Pfeile austausche, könnte ich z.B. mit
      style="margin: 10px;"
      die beiden Pfeilgrafiken auf das größere Bild verschieben. Nur halte ich das für etwas unpraktisch für die Anzeige auf Mobiltelefonen, da man mit dem Finger die kleinen Pfeile treffen muss.

      Gruß Lothar und schon mal ein schönes Wochenende

      1. Hallo Lothar!

        vielen Dank für Deine Antwort.

        Warum "white-space: nowrap" an dieser Stelle?

        Jeweils 3 Bilder aus einem Ordner werden eingelesen mit:
        echo "<a href='$var2[0].html'><img class='bilder' SRC='$ordner/$files2[$i2]' width='$width' height='$height'></a>".chr(13);

        Die angezeigten Bilder können verschiedene Größen haben. Die beiden äußeren werden durch die Pfeile ausgetauscht, die Links dazu bleiben erhalten, so dass man weiter klicken kann. Die Pfeile sollten neben dem großen angezeigten Bild stehen bleiben, sonst werden sie nach oben und unten umgebrochen.

        Sehe die Notwendigkeit von nowrap nach wie vor nicht. Weiß auch noch nicht genau, was du mit "ausgetauscht" meinst? Ich gehe aufgrund deiner Beschreibung aktuell davon aus, dass du die Bilder nicht - im Nachhinein durch JS - austauschst sondern von vorneherein lediglich deren Link anzeigst. Deinen Ursprungsthread hatte ich da missverstanden. Die Problematik bleibt allerdings im Ergebnis die Gleiche: Du willst 3 Bilder (2 Pfeilgrafiken und 1 "Hauptbild") nebeneinander anzeigen.

        Wenn ich den Browser in der Breite zusammen schiebe, werden die beiden äußeren, kleineren Bilder (Pfeile) gar nicht verkleinert und das große Mittlere zu wenig. Das bedeutet, die 3 Bilder ragen über das div hinaus.

        Du hast auch an keiner Stelle gesagt, dass dies geschehen soll.

        Wie kann ich das festlegen?

        Du vergibst deinem Hauptbild eine feste Breite und aus deinem Ursprungsthread geht noch hervor, dass du zusätzlich eine max-width von 100% mitgibst. Ich hatte jetzt eigentlich vermutet, dass die feste Breite die max-width sowieso überschreibt, aber das war zumindest in dem von mir verwendeten Browser nicht der Fall; ob es dennoch "sauber" ist, weiß ich nicht. Jedenfalls bleibt das Problem, dass du 3 Bilder nebeneinander unterbringen willst und ein Bild schon 100% der Breite einnimmt. Das kann nicht passen. Du müsstest also deine 3 Bilder nehmen, jeden einen %-width-Angabe verpassen und sollest dabei berücksichtigen, dass du in Summe nicht über 100% kommst (beachte, dass ggf. Border und Padding noch zur Breite hinzugerechnet werden müssen).

        Deine Bilder sollen _jeweils_ maximal 100% einnehmen! Wenn ein Bild dann schon die volle Breite einnimmt können die anderen folglich nicht mehr daneben angezeigt werden! Beachte auch Außen- und Innenabstände und verwende ein anderes Boxmodell.

        Mir fällt leider kein anderes Boxenmodell ein. Siehst Du eine Möglichkeit?

        Na, da hab ich mich jetzt wohl im vorherigen Absatz wiederholt, aber ich weiß auch nicht, wie ich es noch klarer formulieren soll. Mit anderes Boxmodell meinte ich, dass du dir die umständliche Berechnung der Gesamtbreite (width + border + padding) mit box-sizing: border-box; auch ersparen könntest, denn dort beinhaltet width dann den Rahmen und Innenabstand.

        Hier ist eine Beispielseite: http://www.l-seifert.de/bautzen/Bautzener-Dom.html

        Eine oder deine?

        Das ist meine Seite zum testen.

        Ich habe eine Möglichkeit gefunden. Da, wo ich die Bilder vergleiche und gegen die Pfeile austausche, könnte ich z.B. mit
        style="margin: 10px;"
        die beiden Pfeilgrafiken auf das größere Bild verschieben. Nur halte ich das für etwas unpraktisch für die Anzeige auf Mobiltelefonen, da man mit dem Finger die kleinen Pfeile treffen muss.

        Hier mal mein Test, den ich gebaut habe (bitte nicht als Musterbeispiel ansehen, sondern nur als Anregung). Hab einfach ein schnelles/schmutziges Beispiel bauen wollen. Gerade die Inline-CSS-Anweisung sollten in einer finalen Version möglichst vermieden werden.

        <div style="margin: 0; padding: 0; max-width: 100%; width: 998px; background-color: green">  
        		<img src="linkspfeil.gif" style="margin: 0; padding: 0; max-width:5%; height: auto;" />  
        		<img src="hauptbild.jpg" style="margin: 0; padding: 0; max-width:90%; width: 1000px; height: auto;" />  
        		<img src="rechtspfeil.gif" style="margin: 0; padding: 0; max-width:5%; height: auto;" />  
        </div>
        

        Gruß
        Alex

        1. Hallo Alex,

          vielen Dank für Deine Antwort.

          Mit anderes Boxmodell meinte ich, dass du dir die umständliche Berechnung der Gesamtbreite (width + border + padding) mit box-sizing: border-box; auch ersparen könntest, denn dort beinhaltet width dann den Rahmen und Innenabstand.

          Das muss ich mir noch genau anschauen, Danke für den Tipp.

          Hier mal mein Test, den ich gebaut habe (bitte nicht als Musterbeispiel ansehen, sondern nur als Anregung).

          <div style="margin: 0; padding: 0; max-width: 100%; width: 998px; background-color: green">

            <img src="linkspfeil.gif" style="margin: 0; padding: 0; max-width:5%; height: auto;" />  
            <img src="hauptbild.jpg" style="margin: 0; padding: 0; max-width:90%; width: 1000px; height: auto;" />  
            <img src="rechtspfeil.gif" style="margin: 0; padding: 0; max-width:5%; height: auto;" />  
          

          </div>

            
          Super, genau das funktioniert sehr gut.  
          <http://www.l-seifert.de/bautzen/Bautzener-Dom.html>  
          Ich kann damit sogar die Pfeilgrafiken etwas weniger verkleinern lassen, was sehr praktisch ist. Manchmal hat man ein Brett vor dem Kopf und sieht eine Lösung einfach nicht. Da die 3 Grafiken mit nur einer Zeile PHP eingelesen werden, muss ich auch die Bildereigenschaften auslesen und dann mit einer Variablen den richtigen style zuordnen. Das klappt. Das große Bild kann verschiedene Abmessungen haben. Die Größe lese ich nun mittels PHP aus und füge die ein bei  
          `style="max-width:90%; height: auto; width:<?php echo "$breite";?>;" />`{:.language-css}  
          Nun kann ich mit dem Umbau meiner Seiten loslegen.  
            
          Nur noch eine Frage hätte ich. Das div Element verschiebt sich beim Verkleinern des Browserfensters vom Header weg nach unten.  
          Dabei habe ich es so positioniert: `margin:0 auto;padding:0;top:0px`{:.language-css}  
          Was kann ich da ändern?  
            
          Dankeschön, viele Grüße und noch schöne Herbsttage wünscht Lothar
          
          1. Super, genau das funktioniert sehr gut.
            http://www.l-seifert.de/bautzen/Bautzener-Dom.html
            Ich kann damit sogar die Pfeilgrafiken etwas weniger verkleinern lassen, was sehr praktisch ist. Manchmal hat man ein Brett vor dem Kopf und sieht eine Lösung einfach nicht. Da die 3 Grafiken mit nur einer Zeile PHP eingelesen werden, muss ich auch die Bildereigenschaften auslesen und dann mit einer Variablen den richtigen style zuordnen. Das klappt. Das große Bild kann verschiedene Abmessungen haben. Die Größe lese ich nun mittels PHP aus und füge die ein bei
            style="max-width:90%; height: auto; width:<?php echo "$breite";?>;" />
            Nun kann ich mit dem Umbau meiner Seiten loslegen.

            Ich habe bisher deinen PHP-Code einfach mal überlesen, weil sich hieraus auch keine Frage ergeben hat. Du solltest dir aber Gedanken darüber machen, die Variablen kontextabhängig zu behandeln. Da gab es hier mal einen schönen Artikel zu, finde diesen aber nicht auf Anhieb. In diesem Zusammenhang nur der Hinweis: Du gibst die Breite hier scheinbar ungeprüft aus. Was ist, wenn $breite keine Zahl beinhaltet? Was, wenn HTML eigene Zeichen enthalten sind? Gut, hier wirst du die $breite sicher über eine Funktion selbst füllen, aber dies auch nur am Rande, mit der Empfehlung sich diesbzgl. einzulesen.

            Nur noch eine Frage hätte ich. Das div Element verschiebt sich beim Verkleinern des Browserfensters vom Header weg nach unten.
            Dabei habe ich es so positioniert: margin:0 auto;padding:0;top:0px
            Was kann ich da ändern?

            Welches DIV? Der Container, der das Bild direkt umgibt? Ich kann das Problem nicht nachvollziehen. Screenshot?  Die Angabe von top 0px macht imho nur Sinn, bei einer absoluten Positionierung / auf jeden Fall ist aber die px-Angabe über: 0% = 0px = 0em = 0

            1. Hallo,

              Da gab es hier mal einen schönen Artikel zu, finde diesen aber nicht auf Anhieb. In diesem Zusammenhang nur der Hinweis: Du gibst die Breite hier scheinbar ungeprüft aus. Was ist, wenn $breite keine Zahl beinhaltet? Was, wenn HTML eigene Zeichen enthalten sind?

              Die Bildergröße hole ich mit:

              $size = getimagesize($bild);  
              $width = $size[0];
              

              Nur noch eine Frage hätte ich. Das div Element verschiebt sich beim Verkleinern des Browserfensters vom Header weg nach unten.

              Welches DIV? Der Container, der das Bild direkt umgibt? Ich kann das Problem nicht nachvollziehen. Screenshot?  Auf jeden Fall ist aber die px-Angabe über: 0% = 0px = 0em = 0

              Entschuldigung, es ist das div von der oberen Grafik, was sich in der Höhe vergrößert, je weiter ich den Browser zusammen schiebe. Der rote Rand im Screenshot ist das div, in dem die obere Grafik eingebettet ist. Habe es mit einer Browserfunktion im Firefox anzeigen lassen.
              Hier ein Screenshot:
              http://www.l-seifert.de/bautzen2/bautzen/1.png

              Hier bei meiner Beipielseite zum probieren:
              http://www.l-seifert.de/bautzen/Spreetal.html

              Hier der css - Code:
              div.kopf{height:153px;margin:0 auto;padding:0;position:relative;max-width:998px}
              Wenn ich height:auto; statt height:153px verwende, habe ich auch einen Abstand zwischen den beiden Blöcken, der da nicht sein sollte. Dieser Abstand hat immer die gleiche Größe, auch beim Verkleinern des Browsers.

              Gruß Lothar

              1. Hallo Lothar,

                hast du über das Wochenende schon eine Lösung gefunden?

                Da gab es hier mal einen schönen Artikel zu, finde diesen aber nicht auf Anhieb. In diesem Zusammenhang nur der Hinweis: Du gibst die Breite hier scheinbar ungeprüft aus. Was ist, wenn $breite keine Zahl beinhaltet? Was, wenn HTML eigene Zeichen enthalten sind?

                Die Bildergröße hole ich mit:

                $size = getimagesize($bild);

                $width = $size[0];

                  
                Also erstmal der Artikel, den ich meinte: [http://wiki.selfhtml.org/wiki/Artikel:Kontextwechsel](http://wiki.selfhtml.org/wiki/Artikel:Kontextwechsel).  
                  
                Das war nicht speziell auf deinen Code bezogen, sondern sollte vielmehr ein grundsätzlicher Hinweis sein.  
                  
                Darüberhinaus:  
                Was ist zum Beispiel, wenn $bild, kein Bild ist?  
                  
                  
                
                > > > Nur noch eine Frage hätte ich. Das div Element verschiebt sich beim Verkleinern des Browserfensters vom Header weg nach unten.  
                > >   
                > > Welches DIV? Der Container, der das Bild direkt umgibt? Ich kann das Problem nicht nachvollziehen. Screenshot?  Auf jeden Fall ist aber die px-Angabe über: 0% = 0px = 0em = 0  
                >   
                > Entschuldigung, es ist das div von der oberen Grafik, was sich in der Höhe vergrößert, je weiter ich den Browser zusammen schiebe. Der rote Rand im Screenshot ist das div, in dem die obere Grafik eingebettet ist. Habe es mit einer Browserfunktion im Firefox anzeigen lassen.  
                > Hier ein Screenshot:  
                > <http://www.l-seifert.de/bautzen2/bautzen/1.png>  
                >   
                > Hier bei meiner Beipielseite zum probieren:  
                > <http://www.l-seifert.de/bautzen/Spreetal.html>  
                >   
                > Hier der css - Code:  
                > `div.kopf{height:153px;margin:0 auto;padding:0;position:relative;max-width:998px}`{:.language-css}  
                > Wenn ich `height:auto; statt height:153px`{:.language-css} verwende, habe ich auch einen Abstand zwischen den beiden Blöcken, der da nicht sein sollte. Dieser Abstand hat immer die gleiche Größe, auch beim Verkleinern des Browsers.  
                  
                Bei mir vergrößert sich da nichts. Du hast ja auch eine feste  Höhe angegeben. Es erweckt für mich höchstens den Anschein, dass sich das DIV vergrößert, weil sich die Grafik darin verkleinert; denn - wie wir beide gelernt haben :-) - überschreibt die max-width-Angabe des Bildes die width-Angabe und zu max-height gibt es - dank Matthias und anderen fleißigen Schreibern - auch einen [schönen Artikel](http://wiki.selfhtml.org/wiki/Max-height).  
                
                
                1. Hallo Alex,

                  vielen Dank für Deine Antwort.

                  Also erstmal der Artikel, den ich meinte: http://wiki.selfhtml.org/wiki/Artikel:Kontextwechsel.

                  schönen Artikel.

                  Die Artikel werde ich mir durchlesen.

                  Ich wünsche Dir eine schöne Woche und es ist toll, dass es Leute gibt die sich die Zeit nehmen, anderen zu helfen.

                  Viele Grüße Lothar

        2. Om nah hoo pez nyeetz, Alex!

          Ich hatte jetzt eigentlich vermutet, dass die feste Breite die max-width sowieso überschreibt, aber das war zumindest in dem von mir verwendeten Browser nicht der Fall; ob es dennoch "sauber" ist, weiß ich nicht.

          min-width überschreibt max-width überschreibt width.

          Siehe min-width bzw. max-width Dort gibt es auch eine Gegenüberstellung von min-width und max-width.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rock und Rock am Ring.

          1. Hallo Matthias,

            Danke für den Hinweis.

            Viele Grüße Lothar

            min-width überschreibt max-width überschreibt width.

            Siehe min-width bzw. max-width

            Matthias

          2. min-width überschreibt max-width überschreibt width.

            Siehe min-width bzw. max-width Dort gibt es auch eine Gegenüberstellung von min-width und max-width.

            Vielen Dank für den Hinweis und für den Artikel :)