我无法弄清楚如何保持我的内容与浏览器的比例。当我调整浏览器窗口大小时,它们保持大小并移动。我是php / css btw的新手。
我尝试了最大/最小宽度,但在我的容器div上,但它似乎不起作用。 我可能在我的CSS上添加了一些我不需要的属性,如果有些多余或缺失,请随时纠正我。
body{
margin:0;
padding:0;
overflow-x:hidden;
height: 100%;
}
#container{
width: auto;
height: 720px;
margin: 0 auto;
position: absolute !important;
display: block;
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 13px;
}
#header{
height:auto;
}
#navBar{
height:45px;
overflow:-x:hidden;
}
#marquee{
height: 32px;
background-color: #b71c1c;
font-size:24px;
color: #ffffff;
font-family:Verdana, Geneva, sans-serif;
marquee-speed: fast;
padding-left: 11px;
padding-right: 11px;
margin: 0px auto;
}
#content{
height:auto;
width: 60%;
padding: 0 20px 0 20px;
display: inline-block;
}
#h1{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:24px;
font-weight:bold;
padding-top:4px;
padding-right:0px;
padding-left:3px;
padding-bottom:8px;
display:inline-block;
}
#h1 img {
vertical-align: middle;
display:inline-block;
/* margin-left:40%;*/
}
#footer{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:14px;
width:auto;
height: 140px;
color:#FFF;
padding-top: 30px;
padding-bottom: 30px;
padding-left:110px;
padding-right:110px;
background-color: #000;
z-index: 3000;
bottom: 0;
left: 0;
/* position: fixed;*/
clear: both;
}
#leftNav {
height: 100%;
float: left;
width: 16%;
background: #f5f5f5;
padding: 10px 10px 10px 5px;
}
#rightNav {
height: 100%;
float: right;
width: 16%;
background: #f5f5f5;
padding: 10px 10px 13px 5px;
display:block;
}
#adContainer{
display:block;
margin: 0 0 0 0px;
padding: 10px 20px 10px 20px;
}
#images {
width:auto;
margin: 0 0 0 0px;
padding: 10px 20px 10px 0px;
}
#videoPlayer {
width:35%;
height:auto;
margin:0 auto;
position:relative;
display:block;
padding-bottom: 15px;
}
<div id="container">
<div id="navBar">
<nav>
<a href="#"><img src="assets/test.png"</a>
<ul>
<li><a href="index.php">Home</a>
<li><a href="#">Properties</a>
<li><a href="#">Locations</a>
<li><a href="#">Articles</a>
<li><a href="contactUs.php">Contact Us</a>
</li>
</ul>
</nav>
</div>
<div id="header">
<div id="wowslider-container1">
</div>
<div id="marquee"><marquee>*** ####### ***</marquee></div>
<div id="leftNav">
<leftNav>
<ul>
<li><a href="">Quick Links</a></li>
<li><a href="">Locations</a></li>
<ul>
<li><a href="test1.php"><img src="assets/test Settings.jpg" height="50" width="50" /> test test</a></li>
<li><a href="test2.php">Avida Cloverfield</a></li>
</ul>
</ul>
</leftNav>
</div>
<div id="rightNav">
<div id="adContainer">your ads
</div>
</div>
<div id="content">
<br />
<h1 align="left"><img src="assets/prop.jpg" width="462" height="288" alt="Prop" /><br /><strong>test</h1>
<p align="left">test</p>
</div>
<div id="footer">
<p>Footer info</p>
</div>
</div>