Hola a todos, mi consulta es la siguiente, estoy con una web pero quiero que se adapte a cualquier monitor, al menos a los mas comunes, es decir que nunca haya scroll puesto que la web no tiene mucho contenido. Debo trabajar con porcentajes en todos los divs?
Les muestro algo de lo que tengo hecho.
HTML
Código HTML:
<body>
<div id="wrapper">
<div id="central">
<div id="header"></div>
<div id="contenido"></div>
<div id="menu">
<ul id="navi">
<li>inicio</li>
<li>últimos eventos</li>
<li>somos distintos</li>
<li>sociales</li>
<li>servicios</li>
<li>fotos</li>
<li>empresariales</li>
<li>contacto</li>
</ul>
</div>
</div>
<div id="logo">
<div id="footer"></div>
</div>
</div>
</body>
CSS
Código:
body{
margin:0;
padding:0;
height:100%;
width:100%;
background-color: #423A39;
}
#wrapper{
height:675px;
width:1024px;
margin-left:auto;
margin-right:auto;
}
#central{
height:470px;
width:887px;
background-image:url(img/fondo.png);
float:left;
}
#logo{
width:984px;
height:225px;
float:right;
margin-right:40px;
margin-top:-30px;
background-image:url(img/logo.png);
background-repeat: no-repeat;
background-position: right;
}
#menu{
width:198px;
height:310px;
padding-top:5px;
margin-top:0px;
background: rgba(66, 58, 57, 0.60);
}
#navi {
list-style:none;
margin-top:40px;
margin-right:30px;
padding:0;
}
#navi li {
margin-top:8px;
padding:1px 10px 0px;
color:#FFF;
text-align:right;
font-size:15px;
font-family:Verdana, Geneva, sans-serif;
background-color:#423A39;
}
#navi li:hover{
background-color:#8A7877;
}
#header{
width:400px;
height:60px;
margin-left:447px;
margin-top:1px;
}
#footer{
width:250px;
height:120px;
margin-top:105px;
margin-left:260px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#contenido{
width:610px;
height:auto;
float:right;
margin-right:40px;
background: rgba(66, 58, 57, 0.30);
}
Muchas gracias!