ho un problema è da poco che ho iniziato a fare layout e nn riesco a capire il motivo per cui cambiando schermo da scuola a casa mi ritrovo tutti gli elementi spostati a destra. a scuola sembra proceda bene arrivo a casa e. la mia risoluzione è 1366x768. vi ringrazio x qualsiasi aiuto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Documento senza titolo</title>
<style>
body,nav,#nav ul,#left,#left h2,#left p{margin:0; padding:0;height: 100%; width:100%;}
#wrapper{width:920px;
margin:0 auto;}
#header{background-image:url(images/bg-header.gif);
background-repeat:repeat-x;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#header img{float:left;margin-left:475px;margin-top:-52px;}
#nav{background-image:url(images/bg-navigation.gif);
background-repeat: repeat-x;
position:fixed;
top:0;
left:0;
width:600px;
height:50px;
margin-top:25px;
margin-left:800px;
}
#nav ul{list-style:none;float:left;}
#nav ul li{float:left;}
#nav ul li a{display:block;
width:105px;
height:50px;
line-height:50px;
text-align:left;
color:#c49b5f;
text-decoration:none;margin-top:-50px;
font-family: "Carter One";
font-size:13px;margin-left:30px;}
#nav ul li a#active{color:#2e5306;}
#sfondo{background-image:url(images/bg-headliner.gif);background-repeat:repeat-x repeat-y;
position:fixed;
top:0;
left:0;
width:100%;
height:405px;
margin-top:105px; z-index:0 0 }
#img{ background-image: url(images/bg-headliner-top-shadow.jpg);
width:950px;height:75px;
margin-left:435px;}
#image{background-image:url(images/bg-navigation-right-curve.gif);
width:191px;height:62px;margin-left:431px;}
#image1{background-image:url(images/bg-navigation-left-curve.gif);
width:4px;height:50px;margin-top:-62px;}
#s {background-image: url(images/separator-navigation.gif);
width:2px;height:50px;margin-left:100px;margin-top:-50px;}
#s2{background-image: url(images/separator-navigation.gif);
width:2px;height:50px;margin-left:220px;margin-top:-50px;}
#s3{background-image: url(images/separator-navigation.gif);
width:2px;height:50px;margin-left:354px;margin-top:-50px;}
#s4{background-image: url(images/separator-navigation.gif);
width:2px;height:50px;margin-left:516px;margin-top:-50px;}
#left{float:left;
width:285px;margin-left:480px; position:absolute;}
#right{margin-left:810px;}
.cb{clear:both}
#left h2{position:absolute;color:#745b1b;font-family: "Carter One";font-size:28px;
margin-top:-40px;}
#left p{color:#80662b;padding-top:28px;font-family: Andika; font-size:14px;text-align:justify;}
#botton{background-image:url(images/sprites-buttons.gif);
width:137px;
height:37px;
margin-top:-190px;
background-position:0 38px;}
#botton p{color:#fdfdfb;
font-family:"Carter One";
font-size:16px;
padding-left:20px;
padding-top:6px;}
#botton2{background-image:url(images/sprites-buttons.gif);
width:137px;height:38px;background-position:0 38px;margin-left:155px;px;margin-top:-37px;}
#botton2 p{color:#fdfdfb;
font-family:"Carter One";
font-size:16px;
padding-left:35px;
padding-top:6px;}
#right{background-image:url(images/little-girl-blowing-wind-mill.jpg);
width:607px;height:305px;margin-top:-32px; border:3px solid #ffffff}
#sfondo2{clear:both;background-image: url(images/bg-featured.gif);
position:fixed;
top:0;
left:0;
width:100%;
height:426px;
margin-top:504px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<p> </p>
<p><img src="images/logo.jpg" width="281" height="104" alt="ecothunder">
</p>
<div id="nav">
<div id="image"> </div>
<ul>
<div id="image1"> </div>
<li><a href="#" id="active">home</a></li>
<div id="s">
<li><a href="#">about us</a></li></div>
<div id="s2">
<li><a href="#">contact us</a></li></div>
<div id="s3">
<li><a href="#">why choose us?</a></li></div>
<div id="s4">
<li><a href="#">blog</a></li></div>
</ul>
</div>
<div id="sfondo">
<div id="img"></div>
<div id="left">
<h2>Earth-friendly!</h2>
<p>Donec quam felis, ultricies nec, pretium quis, pellentesque eu, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus </p>
<div id="botton"><p>Take a Tour</p></div>
<div id="botton2"><p>Register</p></div>
</div>
<div id="right">
<p class="cb"></p></div>
</div>
</div>
<div id="sfondo2">
<div id="main"></div>
</div>
</div>
</body>
</html>
Rispondi quotando
.
