Ankündigung

Einklappen
Keine Ankündigung bisher.

Responsive und Media Queries - was ist 100%

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Responsive und Media Queries - was ist 100%

    Hallo
    Ich habe nun den Rat von tk1234 befolgt und mich in ein bisschen Media Queries eingearbeitet - funktioniert wirklich gut

    Ganz ohne Problem geht es aber nicht:
    Ich habe zwei Boxen nebeneinander, eine mit {width:25%px;} die andere mit {width:75%px;} float=left definiert.
    Diese werden nun aber untereinander angezeigt, wenn ich jedoch 23% und 74% nehme, sind sie wie gewünscht nebeneinander.
    Warum? Liegt das an "margin: 1px" - zählt das auch etwa mit?

    Auch verstehe ich nicht warum beim "verkleinern" der Fenstergrösse am rechten Rand sich der Anstand von der Box bis zum Rand verändert.

    Schönes Wochenende und Grüsse aus dem Süden, Nebbiolo

  • #2
    Schau es dir im Browser an, dann siehst du was alles mitzählt.

    Mit width gibst du die Breite des Elements an. Mit margin den Abstand.

    Angenommen 100% entsprechen 1000 Pixel, du hast ein Element mit 25% Breite und beiderseits 1px Abstand, beansprucht das Element 252 Pixel für sich. Hast du ein weiteres Element mit 75% Breite und beiderseits 1px Abstand, möchte das Element 752 Pixel haben. 252 + 752 = 1004 Pixel. 1004 ist größer als 1000, somit passen beide Elemente nicht nebeneinander.

    Kommentar


    • #3
      Das Gleiche gilt für Paddings und Border. Die werden auch ausserhalb dazu gerechnet
      Pre-Coffee-Posts sind mit Vorsicht zu geniessen!

      Kommentar


      • #4
        Du kannst in der Entwicklerkonsole deines Browsers auch Elemente Untersuchen, dann siehst du auch farblich welchen Einfluss margin, padding und border hat. Neben % und px lohnt es sich auch mal vh und vw anzuschauen:

        Kommentar


        • #5
          Und eventuell möchtest du auch gar kein Float verwenden, sondern Flexbox oder Grid. Aber nachdem von dir so wenig Infos dazu kommen, ist das auch nur geraten.

          Kommentar


          • #6
            Zitat von nebbiolo Beitrag anzeigen
            Warum? Liegt das an "margin: 1px" - zählt das auch etwa mit?
            Ja, das zählt mit und hat mich auch immer gestört.
            Zum Glück kann man das Verhalten des Kastenmodels ändern.

            Einfach im CSS als erstes folgende Zeilen einfügen
            Code:
            html {
              box-sizing: border-box;
            }
            *, *:before, *:after {
              box-sizing: inherit;
            }
            Erklärung hier:
            https://css-tricks.com/inheriting-bo...best-practice/

            Kommentar


            • #7
              Also auf * anwenden ist ja sehr böse. Damit macht man sich dann alles andere kaputt. Und sowas dann noch als "Best Practice" kennzeichnen. Das Internet ist leider voll mit Müll.

              Kommentar


              • #8
                Was soll den schiefgehen, ist ja nur das Boxmodel welches geändert wird so wie es, ich meine MSIE 6 schon auf alle Elemente angewandt hatte.
                Bis jetzt hatte ich damit keine Probleme und sehe auch keine, es sei denn du benennst welche.

                Edit und Ergänzung:
                Auch bei https://wiki.selfhtml.org/wiki/CSS/T...ieg/Box-Modell wird es so gezeigt.
                Richtig ist aber, dass es veraltet ist float zu verwenden seit es flexbox mit Unterstützung aller modernen Browser gibt und somit dieses Vorgehen nicht mehr verwendet werden muss.

                Kommentar


                • #9
                  Zitat von protestix Beitrag anzeigen
                  Was soll den schiefgehen, ist ja nur das Boxmodel welches geändert wird
                  Ja, und das global für alle Elemente.

                  Zitat von protestix Beitrag anzeigen
                  Bis jetzt hatte ich damit keine Probleme und sehe auch keine, es sei denn du benennst welche.
                  Sobald man fremde Komponenten einbindet, die sich darauf verlassen, dass nicht global rumgepfuscht wird, werden die wohl mit hoher Wahrscheinlich kaputt dargestellt.

                  Zitat von protestix Beitrag anzeigen
                  Eine technische Demonstration ist noch lange keine Coding Guideline.

                  Zitat von protestix Beitrag anzeigen
                  Richtig ist aber, dass es veraltet ist float zu verwenden seit es flexbox mit Unterstützung aller modernen Browser gibt und somit dieses Vorgehen nicht mehr verwendet werden muss.
                  Float ist nicht veraltet. Nur wurde Float in der Vergangenheit häufig für etwas verwendet, wofür es nicht gedacht ist. Genauso wenig sind HTML-Tabellen veraltet. Möchte man Tabellen darstellen, sind sie genau das richtige Werkzeug. Und genauso ist Float für herumfließende Inhalte perfekt geeignet.

                  Kommentar


                  • #10
                    Natürlich wieder mal allen vielen Dank für die Tipp's - bei einem Link habe ich gefunden wie man die Breite mit calc definieren kann - nun funktioniert es wie gewünscht

                    PHP-Code:
                    .boxl2
                      
                    {
                      
                    floatleft;
                      
                    widthcalc(25% - 6px);
                      
                    margin1px;
                      
                    padding2px;
                      
                    text-alignleft;
                      
                    background-color#D8D3D3;
                      

                    Kommentar


                    • #11
                      Zitat von hellbringer Beitrag anzeigen
                      Ja, und das global für alle Elemente.
                      Eigentlich nur auf das html Element, der Rest erbt, heisst auch man lässt Raum für Veränderungen. Was anderes wäre es, wenn tatsächlich das Universalelement diese Eigenschaft bekommen hätte.


                      Zitat von hellbringer Beitrag anzeigen
                      Sobald man fremde Komponenten einbindet, die sich darauf verlassen, dass nicht global rumgepfuscht wird, werden die wohl mit hoher Wahrscheinlich kaputt dargestellt.
                      Eigentlich weiss man ja schon was man einbindet und Probleme gab es immer nur mit dem Contentmodell, daher ja auch dieser Beitrag von nebbiolo hier.

                      Zitat von hellbringer Beitrag anzeigen
                      Eine technische Demonstration ist noch lange keine Coding Guideline.
                      Bei CSS ist man ziemlich frei in dem was man machen will. Ob das immer gut ist, ist Ansichtssache.
                      Bei Google, die haben ja immerhin einen Browser in die Welt gebracht, haben einige auch erkannt, dass das Borderboxmodell besser ist als das Contentmodell.
                      Siehe Artikel von Herrn Irish aus 2012 (zu der Zeit war Flexbox noch nicht in allen Browsern verwendbar).
                      Kannst denen ja mitteilen das es Pfusch war.
                      Bootstrap hat in Version von 2 auf 3 auf das borderboxmodell gesetzt.(in Vers. 4 ist dann auf flexbox übergeschwenkt worden).

                      Zitat von hellbringer Beitrag anzeigen
                      Float ist nicht veraltet. Nur wurde Float in der Vergangenheit häufig für etwas verwendet, wofür es nicht gedacht ist. Genauso wenig sind HTML-Tabellen veraltet. Möchte man Tabellen darstellen, sind sie genau das richtige Werkzeug. Und genauso ist Float für herumfließende Inhalte perfekt geeignet.
                      So in etwa meinte ich das auch.

                      Kommentar


                      • #12
                        Zitat von protestix Beitrag anzeigen
                        Eigentlich weiss man ja schon was man einbindet und Probleme gab es immer nur mit dem Contentmodell, daher ja auch dieser Beitrag von nebbiolo hier.
                        Habs mal im Browser testweise hier auf diese Seite angewandt und es werden zumindest gleich mal zwei Komponenten fehlerhaft gerendert: Rechts oben die Suchbox und der Editor unten. Das war, was ich gemeint habe. Wenn man pauschal sowas anwendet, muss man mit Problemen rechnen, deswegen wäre ich da sehr zögerlich mit Empfehlungen dieser Art und ich würde nicht so tun, als wär das gar kein Problem.

                        Edit: Der Bestätigungsdialog ist dann wohl auch kaputt.

                        css_test.png

                        Kommentar


                        • #13
                          hellbringer
                          Die von mir an den TE angedachte Lösung bezog sich auf ihn.
                          Wenn man nun wahllos ohne nachzudenken, das Boxnodell global ändert, ist es wie du ja hier demonstriert hast, nicht ausgeschlossen das es zu Problemen kommen kann.
                          Die Entwickler der Software in einer Firma wissen aber normalerweise was sie tun.
                          Umgekehrt genauso, wenn ich nicht weiss dass das Contentmodell initial voreingestellt ist und ich mich intuitiv drauf verlasse das eine Box von der Breite X diese annimmt und dann noch Padding als Abstand dazu kommt, dann kommt es ebenso zu Darstellungsfehlern.




                          Kommentar

                          Lädt...
                          X