如何让我的内容随浏览器窗口一起调整?

时间:2017-08-29 13:37:31

标签: css

我无法弄清楚如何保持我的内容与浏览器的比例。当我调整浏览器窗口大小时,它们保持大小并移动。我是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>

0 个答案:

没有答案