Hola tengo un problema.
Estoy creando una web y tengo un problema, he creado un menu alargado que ocupa de ancho toda la pantalla, el problema es que según la resolución de cada monitor sale de una forma u otra, con 1920 1080 va bien y no se como arreglarlo.
Tal y como está a hora va bien en cualquier navegador pero a nada que le meto un left en pixels o en porcentajes se descuadra en distintas resoluciones
lo que yo quiero es que en cualquier monitor etc este cuadrado ala vez que las demás capas de abajo
La web en cuestión:
www.deskwebs.com
Código CSS:
Ver originalCSS:
body{
background-color:white;
margin:0px;
}
header{
width:900px;
height:200px;
margin:0px auto;
border:solid 1px black;
background-image:url(../images/header.png);
}
section{
width:900px;
margin:0px auto;
height:600;
border:solid 1px black;
}
footer {
width:900px;
height:50px;
border:solid 1px black;
margin:10px auto;
}
nav{
width:auto;
height:auto;
margin:0px auto;
}
div.contenedor{
width:auto;
height:auto;
margin:auto;
}
.menu { top:0;background:#2b2a28;margin: 0 auto;border-bottom: solid 3px #477bd2;}
.menu ul { border-radius:3px;background:#666;margin: 0 auto;width:900px;background: #2b2a28;overflow:hidden;margin-left:461px;}
.menu ul li { color:#fff;list-style:none;float:left;font-size:12px;padding-top:35px;}
.menu ul li a { color:#eee;text-decoration:none;padding:28px 26px;cursor:pointer;border-top:none;text-transform:uppercase;font-size:10px;font-weight:bold;}
.linkz ul li a:hover{color:#ccc;}
/* Icons */
.menu ul li a.home {background: url(../images/home.png) no-repeat top center;}
.menu ul li a.wishlist {background:url(../images/wish_list.png) no-repeat top center;}
.menu ul li a.account {background:url(../images/account.png) no-repeat top center;}
.menu ul li a.cart {background:url(../images/cart.png) no-repeat top center;}
.menu ul li a.checkout {background:url(../images/checkout.png) no-repeat top center;}
.menu ul li a.login {background:url(../images/login.png) no-repeat top center;}
.menu ul li a.register {background:url(../images/register.png) no-repeat top center;}
/* Menu Dotted Borders */
.menu ul li.home {background: #477bd2;height:24px;}
.menu ul li.wishlist {border-right: dotted 1px #5a5957;height:24px;}
.menu ul li.account{border-right: dotted 1px #5a5957;height:24px;}
.menu ul li.cart{border-right: dotted 1px #5a5957;height:24px;}
.menu ul li.checkout{border-right: dotted 1px #5a5957;height:24px;}
.menu ul li.login{border-right: dotted 1px #5a5957;border-left: dotted 1px #5a5957;height:24px;}
.menu ul li.register{border-left: dotted 1px #5a5957;height:24px;}
/* Menu Hover Effect */
.menu ul li.wishlist:hover,
.menu ul li.account:hover,
.menu ul li.cart:hover,
.menu ul li.checkout:hover,
.menu ul li.login:hover,
.menu ul li.register:hover { color:#ccc;background-color:#477bd2;}
/* Menu Active State */
.linkz ul li.active a{ color:#fff;background-color:#e83d02;}
.menu ul li a.home:hover{ background-color:#e83d02;color:#ccc;}
Código HTML:
Ver originalcodigo html:
<li class="home"><a href="" class="home">Inicio
</a></li> <li class="wishlist"><a href="" class="wishlist">Proyectos
</a></li> <li class="account"><a href="" class="account">Información
</a></li> <li class="cart"><a href="" class="cart">Presupuestos
</a></li> <li class="checkout"><a href="" class="checkout">Contacto
</a></li> <li class="login" style="float:right;"><a href="" class="login">Iniciar sesión
</a></li> <li class="register" style="float:right;"><a href="" class="register">Registrarse
</a></li>