Centrar menu

vtscarlos · #1 (**permalink**) 21/10/2012, 13:26

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:
 
<body>
    <div class="contenedor">
        
            
            
            
                <div class="menu">
                        <ul>
                        <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>
                        </ul>
                </div>
            
        
            <header>
            </header>
            <section>
            
            </section>
            
            <footer>
            </footer>
    </div>
    </body>

pzin · #2 (**permalink**) 21/10/2012, 13:46

No sé porqué no pones el código entero. Sino hubieras puesto un enlace al sitio, nadie podría caer en que el problema está en la declaración de .menu ul, en donde le aplicas un margen lateral porcentual en vez de automático como en el resto.

vtscarlos · #3 (**permalink**) 21/10/2012, 14:01

Perdón? es todo el codigo que tengo es una web nueva x'D no tiene mas que eso que te he enseñado.

Respecto ala solución no entiendo lo que quieres decirme ='S no veo ningún margen de porcentaje

pzin · #4 (**permalink**) 21/10/2012, 14:10

Perdón. No sé qué pasó que no me funcionaba el scroll.

En tu menu.css tienes un código diferente al que pusiste aquí. En menu.css lo tienes así:

Código CSS:

Ver original.menu ul { border-radius:3px;background:#666;margin: 0 24.2%;width:900px;background: #2b2a28;overflow:hidden;}

vtscarlos · #5 (**permalink**) 21/10/2012, 14:11

Si perdón estaba haciendo pruebas para ver si funcionaba, el bueno es auto.

mariogl84 · #6 (**permalink**) 21/10/2012, 14:14

¿Dónde quieres que quede exactamente el menú?

vtscarlos · #7 (**permalink**) 21/10/2012, 14:14

quiero que esté bien alineado con las capas inferiores, el header, section y footer

mariogl84 · #8 (**permalink**) 21/10/2012, 14:19

Entonces lo tienes bien con el margin:0 auto (y quitando el margin-left de después, que supongo que lo has puesto para hacer pruebas). Lo que te está pasando es que el ul tiene un padding interior a la izquierda por defecto, que se lo añade el navegador si tú no lo reseteas. Ponle un padding:0 al ul, o mejor aún, usa un reset para toda la web.

vtscarlos · #9 (**permalink**) 21/10/2012, 14:26

he probado lo que dices y nada :'S y lo del reset lo he añadido el codigo al CSS he abierto la página y no ha pasado nada

mariogl84 · #10 (**permalink**) 21/10/2012, 14:46

¿Puedes pegar el código resultante de aplicar esos cambios (o subirlos a la web)?

vtscarlos · #11 (**permalink**) 21/10/2012, 14:48

Código CSS:

Ver original.menu { top:0;background:#2b2a28;margin: 0 auto;border-bottom: solid 3px #477bd2;}
.menu ul { border-radius:3px;background:#666;margin:0px auto;width:900px;background: #2b2a28;overflow:hidden;}
.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;cursor:pointer;border-top:none;text-transform:uppercase;font-size:10px;font-weight:bold;}
.linkz ul li a:hover{color:#ccc;}

mariogl84 · #12 (**permalink**) 21/10/2012, 14:53

¿Y has cargado el reset antes que esas reglas? (el orden es importante)

Si no, ponle padding:0 a .menu ul .

vtscarlos · #13 (**permalink**) 21/10/2012, 14:55

si lo `pongo el reset lo primero me descojona toda la página y lo del padding sii pongo 0 los botones se quedan en nada no se ven

mariogl84 · #14 (**permalink**) 21/10/2012, 15:03

Si los botones se te quedan el nada puede ser porque el padding se lo estés aplicando a los li, y no al ul:

Código:

    .menu { top:0;background:#2b2a28;margin: 0 auto;border-bottom: solid 3px #477bd2;}
    .menu ul { border-radius:3px;background:#666;margin:0px auto;padding:0;width:900px;background: #2b2a28;overflow:hidden;}
    .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;cursor:pointer;border-top:none;text-transform:uppercase;font-size:10px;font-weight:bold;}
    .linkz ul li a:hover{color:#ccc;}

vtscarlos · #15 (**permalink**) 21/10/2012, 15:04

sigue igual xD

mariogl84 · #16 (**permalink**) 21/10/2012, 15:06

¿Lo puedes poner online?

vtscarlos · #17 (**permalink**) 21/10/2012, 15:08

Ya está subido.

mariogl84 · #18 (**permalink**) 21/10/2012, 15:17

Vale, por partes:

- El ul ya lo tienes alineado como querías, ¿no? (si miras su ancho con el firebug, verás que está alineado con el resto de contenedores).
- Los botones están reducidos al ancho de su contenido, pero no es por el padding que le has puesto al ul, es porque están flotados. Les tienes que dar un ancho, o con width o con padding lateral (según si quieres un ancho fijo o un ancho para cada botón).

vtscarlos · #19 (**permalink**) 21/10/2012, 15:27

De esa forma ya se me joden los iconos al no tener padding, donde podría poner el el mismo padding para que me deje bien los iconos y se alineé bien?

mariogl84 · #20 (**permalink**) 21/10/2012, 15:34

Son dos cosas diferentes: El padding:0 del ul es para machacar el padding-left que le pone por defecto el navegador. El padding que les pongas a los li les dará el ancho que necesitas. Eso si necesitas que el ancho de cada botón sea variable, si lo que quieres es un ancho fijo, le pones un width.

Resumen: el ul tiene que tener un padding:0, los li tienen que tener un padding lateral o un width.

vtscarlos · #21 (**permalink**) 21/10/2012, 15:37

Ya lo arreglé muchisimas gracias tio!

www.deskwebs.com este es el resultado!

mariogl84 · #22 (**permalink**) 22/10/2012, 01:29

Bien, lo conseguimos :)

vtscarlos · #23 (**permalink**) 22/10/2012, 03:45

Tengo un problema, ahora slae un poco mal en mozilla

mariogl84 · #24 (**permalink**) 22/10/2012, 04:15

¿Qué es "un poco mal"? De cara a no llenar más el tema con peticiones aclaratorias, intenta detallar más lo que necesitas o lo que falla, y así vamos más al grano.

gebremswar · #25 (**permalink**) 22/10/2012, 04:33

Cita:

Iniciado por vtscarlos

Tengo un problema, ahora slae un poco mal en mozilla

No te recomiendo un reset.css. Lo mejor es que uses "normalize.css" y en base a ello trata de arreglar tus estilos para que se vea bien en los distintos navegadores.

vtscarlos · #26 (**permalink**) 22/10/2012, 05:05

Pues el problema es que en mozilla , lo estoy probando ahora en el portatil y los dos ultimos botones registrarse y iniciar sesión, el ultimo me sale debajo del antepenultimo.

NO se si me explico.