I'm using max-width and width to make my website responsive to window size. My content div is not downsizing when the website is made smaller.
The content is told that its max width is 800px, and its set to be 100%. However its not downsizing when outercontainer does. Any thoughts?
@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'Bebas';
src: url(Website%20Specific%20Resources/BEBAS.TTF)
}
body {
background-image:url(Website%20Specific%20Resources/Background.png);
max-width:1920px;
width:100%;
margin: auto;
}
.outercontainer{
height:100%;
max-width:1920px;
width:100%
}
.container {
max-width:960px;
width:100%;
max-height:300px;
height:100%;
margin-top: 100px;
margin:auto;
}
.header {
background-image:url(Website%20Specific%20Resources/New_Banner_.png);
max-height: 300px;
max-width: 1920px;
width: 100%;
height: 100%;
top: 0;
position: fixed;
z-index:5;
}
A {
text-decoration:none;
font-family: "bebas";
color: #fff;
}
li {
z-index:2;
list-style:none;
float:left;
padding-right:50px;
margin-left:25px;
padding-top:15px;
font-size:24px;
}
.nav {
z-index:2;
position: absolute;
}
.content {
font-family: "bebas";
max-width: 800px;
width: 100%;
height: 100%;
margin: auto;
background-color: #009999;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="outercontainer">
<div class="header">
<div class="container">
<div class="nav">
<ul>
<li><a href="#">Home </a></li>
<li><a href="#">About Us </a></li>
<li><a href="#">Products </a></li>
<li><a href="#">Gallery </a></li>
<li><a href="#">Contact Us </a></li>
</ul>
</div>
</div>
</div>
<div class="content" >
<p>asdasdasdasdaf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>asdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasda</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>sdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdaf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire