1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Responsive Webdesign - Darstellung falsch

Dieses Thema im Forum "CSS" wurde erstellt von Matlox, 15. Februar 2017.

  1. Matlox

    Matlox Mitglied

    Hallo liebe CSS´ler,
    ich möchte mich gerne mehr mit Responsiven Webdesig in HTML und CSS befassen.

    Ich bin das Tutorial von Grid durchgegangen und das klappt auch soweit ganz gut, nur mag der Internet Explorer mal wieder nicht mitspielen.

    [​IMG] (https://pl.vc/rdigt)

    Wie man sieht, ist im Firefox alles wie ich will und im Internet Explorer verschiebt sich ein DIV nach unten, doch warum?

    INDEX.html
    HTML:
    1. <!DOCTYPE html>
    2.  
    3. <title>TEST</title>
    4. <meta name="viewport" content="width=device-width, initial-scale=1">
    5.  
    6. <link rel="stylesheet" href="css/grid.css">
    7.  
    8. </head>
    9.  
    10.  
    11. <div class="head">
    12.   <div class="row clearfix">
    13.     <div class="headcolumn half">
    14.       TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK
    15.     </div>
    16.   </div>
    17. </div>
    18.  
    19. <div class="container">
    20.   <div class="row clearfix">
    21.     <div class="column fourth">
    22.       TEST2
    23.     </div>
    24.     <div class="column half">
    25.       TEST2
    26.     </div>
    27.     <div class="column fourth">
    28.       TEST2
    29.     </div>
    30.   </div>
    31. </div>
    32.  
    33. </body>
    34. </html>
    GRID.css
    Code (CSS):
    1. *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box;mbox-sizing: border-box; background-color:#070C0A;}
    2. html {font: 100%/1.5 "Open Sans", sans-serif;font-weight: 400;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
    3.  
    4. @media (min-width: 40rem) {html { font-size: 112%;}}
    5. @media (min-width: 64rem) {html { font-size: 120%;}}
    6.  
    7. body {background-color: #fff; color: #555; padding: 0; margin: 0;}
    8.  
    9. .head {margin: 0 auto; max-width: 100%; width: 100%; margin-bottom:50px;}
    10. .headcolumn {padding: 0; margin: 0; background-color:#555555;}
    11.  
    12. @media (min-width: 40rem) {
    13. .headcolumn {margin: 0; padding-left: 1rem; padding-right: 1rem;}
    14. .headcolumn.full { min-width: 100%; }
    15. .headcolumn.two-thirds { min-width: 66.7%; }
    16. .headcolumn.half { min-width: 50%;}
    17. .headcolumn.third { min-width: 33.3%; }
    18. .headcolumn.fourth { min-width: 25%; }
    19. .headcolumn.flow-opposite { float: right; }
    20. }
    21.  
    22. .container {margin: 0 auto; max-width: 100%; width: 90%; border-style: dotted; border-width: 5px;}
    23. .column {padding: 0; margin: 0; background-color:#F2F2F2; border-style: double; border-width: 5px; }
    24.  
    25. @media (min-width: 40rem) {
    26.   .column {
    27.     float: left;
    28.     margin: 0;
    29.     padding-left: 1rem;
    30.     padding-right: 1rem;
    31.   }
    32.  
    33.   .column.full { width: 100%; }
    34.   .column.two-thirds { width: 66.7%; }
    35.   .column.half { width: 50%; }
    36.   .column.third { width: 33.3%; }
    37.   .column.fourth { width: 25%; }
    38.   .column.flow-opposite { float: right; }
    39. }
    40.  
    41.  
    42. .clearfix:before,
    43. .clearfix:after {
    44.   content: " ";
    45.   display: table;
    46. }
    47.  
    48. .clearfix:after { clear: both; }
    49. .clearfix { *zoom: 1; }
    Vielen Dank für eure Hilfe.
    Lg Matlox
     
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Der Grund ist doch auf dem Bild deutlich zu erkennen o_O

    Die Frage hätte daher eher lauten müssen, warum IE alle drei Blöcke breiter darstellt, als die übrigen Browser.

    Und spätestens hier wäre Dir dann auch in den Sinn gekommen, dass die prozentuale Definition/Zuordnung der Breiten unterschiedlich interpretiert wird.

    Ausgangspunkt ist die Klasse .container mit width:90%. Die Summe der drei darin eingebetteten Blöcke ergibt aber als Mindestbreite 100%.

    Firefox, Chrome, usw. mögen es noch so umsetzen, und 2*25% + 50% von 90% rechnerisch ermitteln, IE hingegen beharrt auf den 100%.

    [edit]Tipp-Ex[/edit]
     
    Zuletzt bearbeitet: 15. Februar 2017
  3. Matlox

    Matlox Mitglied

    Hallo SpiceLab,
    danke schon einmal für deine Hilfe.

    Das gleiche hab ich mir auch gedacht, ist aber nicht die Lösung.
    Ich habe nun den .container auf width: 100%; gesetzt, nun passiert das gleiche nur in groß.

    Lg Matlox

    [​IMG] (http://www.fotos-hochladen.net/view/csst2bgrfy8q9.jpg)
     
    Zuletzt bearbeitet: 15. Februar 2017
  4. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Kommando zurück - hab vorhin in Deinem CSS einen Tippfehler übersehen :oops:
    Code (CSS):
    1. mbox-sizing: border-box;
    kennt IE nicht.

    Dafür aber
    Code (CSS):
    1. box-sizing: border-box;
    Womit padding u. border nicht mehr zu width addiert werden, wie's gedacht ist.
     
    Matlox gefällt das.
  5. Matlox

    Matlox Mitglied

    Ich glaubs nich, es lag wirklich daran, vielen lieben Dank!
     
  6. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Matlox gefällt das.
Die Seite wird geladen...