• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Design zerissen

G

gd0123456

Mitglied
HI kann mir einer bitte sagen, warum das Design zerissen ist? im Emulator von Chrome (wenn ich es mit Handyversionen anschaue) passt die Seite, wenn ich sie mit dem normalen Browser anschaue, wird die Seite zerissen warum?

Hab beim letzten Div die spalte2reihe3 ausgeblendet, dann passt zum. die linke Spalte, sobald ich aber die spalte2reihe3 wieder einblende zereisst es die Seite.

Bilder im Anhang.

HTML: 
<!DOCTYPE html>
<html lang = "de">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "./css/style.css">
    </head>
    <body>
        <div id = 'reihe1'>
            <div id = 'spalte1reihe1'>
            </div>
            <div id = 'spalte2reihe1'>
            </div>
            <div id = 'spalte3reihe1'>
            </div>
        </div>
        <div id = 'reihe2'>
            <div id = 'spalte1reihe2'>
            </div>
            <div id = 'spalte2reihe2'>
            </div>
            <div id = 'spalte3reihe2'>
            </div>          
        </div>
        <div id = 'reihe3'>
            <div id = 'spalte1reihe3'>
            </div>
            <div id = 'spalte2reihe3'>
            </div>
            <div id = 'spalte3reihe3'>
            </div>          
        </div>

    </body>
</html>

Code: 
* { box-sizing: border-box;}

body {
background-color: #3C3C3B; /* Dunkel Grau */
padding: 0px;
margin: 0px;
}

/* Willkommenseite */

#spalte1reihe1 {
width: 25vw;
height: 25vh;
float: left;
background-color: #ECECEC; /* Grau */
}

#spalte2reihe1 {
width: 50vw;
height: 25vh;
float: left;
background-color: #ffffff;
}

#spalte3reihe1 {
width: 25vw;
float: left;
height: 25vh;
background-color: #ECECEC; /* Grau */
}

#spalte1reihe2 {
width: 25vw;
height: 19vh;
float: left;
background-color: #2DAB66; /* Grün */
}

#spalte2reihe2 {
width: 50vw;
height: 19vh;
float: left;
background-color: #ECECEC; /* Grau */
}

#spalte3reihe2 {
width: 25vw;
float: left;
height: 19vh;
background-color: #2DAB66; /* Grün */
}

#spalte1reihe3 {
width: 25vw;
height: 19vh;
float: left;
background-color: #ECECEC; /* Grün */
}

#spalte2reihe3 {
width: 50vw;
height: 19vh;
float: left;
background-color: #ffffff; /* Grün */
}

#spalte3reihe3 {
width: 25vw;
height: 19vh;
float: left;
background-color: #ECECEC; /* Grün */
}


Danke für die Hilfe
 

Anhänge

  • browser.png
    browser.png
    12,2 KB · Aufrufe: 15
  • emulator.png
    emulator.png
    32,7 KB · Aufrufe: 14
Werbung:
Vlt. wg. der vielen Schreibfehler im HTML-Code? Erstell einen sauberen Quellcode der beim Validator nicht angemeckert wird, dann erst könnte man sich Fehldarstellung auch genauer anschauen.
 
Werbung:
Hallo,

du berücksichtigst nicht, dass die Einheit vw nicht der Einheit % entspricht und vom Browser entsprechend anders berechnet wird.

Ersetze die Einheit vw durch % und alles sollte passen.

Gruss

MrMurphy
 
Ist vielleicht einfacher. Und ja, vw durch Prozent ersetzen.
Code: 
<!DOCTYPE html>
<html lang = "de">
<head>
<title>tabelle</title>
<meta charset = "utf-8">
<style>
* { box-sizing: border-box;}
body {
background-color: #3C3C3B;
padding: 0px;
margin: 0px;
display:table;
width:100%;
}
#reihe1 , #reihe2 , #reihe3 {
display:table-row;
background:#ECECEC;
}
#reihe2 {
background:#2DAB66;
}
div {
display:table-cell;
width:25%;
}
div:nth-child(2) {
 width:50%;
 height:19vh;
 background:rgba(255,255,255,.8);
}

</style>
  </head>
  <body>
  <div id='reihe1'>
  <div>reihe1 spalte1</div>
  <div>reihe1 spalte2</div>
  <div>reihe1 spalte2</div>
  </div>
  <div id='reihe2'>
  <div>reihe2 spalte1</div>
  <div>reihe2 spalte2</div>
  <div>reihe2 spalte3</div>  
  </div>
  <div id='reihe3'>
  <div>reihe3 spalte1</div>
  <div>reihe3 spalte2</div>
  <div>reihe3 spalte3</div>  
  </div>
  </body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben