Hallo zusammen,
ich bin dabei ein einfaches Layout zu erstellen und benutze hierbei das Flexmodell.
Hier ist die Seite zu finden: www.smartris.de/test
Nun ist es allerdings so, dass ich Probleme mit der Breite habe. Wenn die Seite rausgezoomt wird, klappt alles ohne probleme (also z.b. auf 70%), aber alles was reingezoomt wird (oder die Seite auf einer kleineren Auflösung betrachtet oder das Browserfenster kleiner gemacht wird) , nimmt die Seite etwas auseinander und zwar in der Breite.
Hier Screenshots, was ich meine.
http://gyazo.com/52608f8edd18a6fab72911d48fa60bdd
http://gyazo.com/39df2a5d84d00e2c1e548f938e89408a
Ich habe schon probiert, mit min-width,max-width, width=100% rumzuspielen, klappt aber alles nicht. Woran könnte das liegen?
Hier der Code:
ich bin dabei ein einfaches Layout zu erstellen und benutze hierbei das Flexmodell.
Hier ist die Seite zu finden: www.smartris.de/test
Nun ist es allerdings so, dass ich Probleme mit der Breite habe. Wenn die Seite rausgezoomt wird, klappt alles ohne probleme (also z.b. auf 70%), aber alles was reingezoomt wird (oder die Seite auf einer kleineren Auflösung betrachtet oder das Browserfenster kleiner gemacht wird) , nimmt die Seite etwas auseinander und zwar in der Breite.
Hier Screenshots, was ich meine.
http://gyazo.com/52608f8edd18a6fab72911d48fa60bdd
http://gyazo.com/39df2a5d84d00e2c1e548f938e89408a
Ich habe schon probiert, mit min-width,max-width, width=100% rumzuspielen, klappt aber alles nicht. Woran könnte das liegen?
Hier der Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>
</title>
</head>
<body>
<div class="top">
<div class="logo"><img src="pictures/logo.png"></div>
<div class="hotbutton"><img src="pictures/hotbutton.png"><img src="pictures/hotbutton.png"><img src="pictures/hotbutton.png"><img src="pictures/hotbutton.png"><img src="pictures/hotbutton.png"></div>
</div>
<div class="navibar"></div>
<div class="wrapper">
<div class="left">
Lorem ipsum dolor sit amet....
</div>
<div class="right">
Lorem ipsum dolor sit amet....
</div>
</div>
</body>
</html>
HTML:
@CHARSET "ISO-8859-1";
body, html
{
margin:0px;
height:100%;
color:black;
}
.wrapper
{
display:flex;
min-height:100%;
}
.top
{
background-color:white;
height:180px;
}
.navibar
{
background-color:#0c20c9;
height:30px;
color:white;
}
.hotbutton
{
margin-left:900px;
width:500px;
position:absolute;
margin-top:60px;
}
.logo
{
position:absolute;
margin-left:30px;
margin-top:73.5px;
}
.left
{
background-color:#f9f9f9;
color:black;
width:450px;
}
.right
{
background-color:green;
flex:1;
color:white;
}