[SOLUCIONADO] ConsultA alineacion componentes en menu.

ignacio85r · #1 (**permalink**) 01/09/2014, 10:00

buenas gente, estoy tratando de alinear un menu, mejor dicho que los links queden centrados pero solo me quedan alienados a la izquierda... como puedo solucionarlo????

aqui esta el codigo ccs y luego el html.

desde ya muchas gracias!

Código HTML:

Ver original<nav>
        <ul>
            <li><a href="http://">Menu 1</a></li>
            <li><a href="http://">Menu 2</a></li>
            <li><a href="http://">Menu 3</a></li>
            <li><a href="http://">Menu 4</a></li>
        </ul>

Código CSS:

Ver original*{
    margin: 0px 0px;
    padding: 0px 0px;
}
 
body {
    background-color: #00cccc;
}
 
header {
    background-color: #00ffcc;
    text-align: center;;
}
 
nav {
    margin: 0px auto;
    width: 75%;
}
 
nav ul {
    background-color: #0099cc;
}
 
nav ul li {
    color: #00ffcc;
    display: inline-block;
    list-style: none;
    margin: 0px auto;
    padding: 0px auto;
    text-decoration: none;
    width: 20%;
}
 
nav ul li a {
    display: inline-block;
    text-align: center;
}
 
section {
    background-color: #0066cc;
    max-width: 100%;
    padding: 0px 0px;
}
 
article {
    background-color: #0033cc;
    display: inline-block;
    height: 200px;
    margin: 0px 0px;
    text-align: justify;
    vertical-align: top;
    width: 33.1%;
}

DesgraciadoGabo · #2 (**permalink**) 01/09/2014, 22:04

Yo lo veo bien, velo en otro navegador o ve si tienes en tu código la etiqueta <!doctype html>

Tienes algunos detalles en tus hojas de estilos:

Código CSS:

Ver originalheader {
    background-color: #00ffcc;
    text-align: center;; /*doble punto y coma*/
}

text-decoration:none; va en nav ul li a, quedando así

Código CSS:

Ver originalnav ul li {
    color: #00ffcc;
    display: inline-block;
    list-style: none;
    margin: 0px auto;
    padding: 0px auto;
    width: 20%;
}
nav ul li a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

Y preguntate por que razón estas incluyendo las etiquetas <ul> y <li>... si te interesa trate un poco del tema en mi sitio :http://mecanizandoweb.com/noticias/nav-retando-las-tendencias-web

Saludos

ignacio85r · #3 (**permalink**) 02/09/2014, 05:48

desde ya muchas gracias DesgraciadoGabo por tu ayuda.
ahora... en que navegador lo ves centrado¿??? yo probe en el chrome, mozilla y el benevolo explorer y se ve entodos igual.

tambien esa la etiqueta en el html <!DOCTYPE html>

ahora me voy a pegar una leida al articulo de tu pagina ;)

DesgraciadoGabo · #4 (**permalink**) 02/09/2014, 09:38

Gracias por la vuelta en mi sitio, espero te ayude!

Y disculpa por no darte ese dato como se me pudo haber pasado!! Lo probé en Mozilla, Chrome y Safari

Sigues viendo los textos recargados del lado izquierdo?

Saludos

ignacio85r · #5 (**permalink**) 02/09/2014, 10:59

si, la verdad que siguen saliendo del lado izquierdo

que raro no?

DesgraciadoGabo · #6 (**permalink**) 02/09/2014, 11:49

Chaleee!!! ja sube tu código (jsfiddle.net, algun alojamiento) pa poder verlo y darle fuego a este asunto que sí esta bien raro!!

ignacio85r · #7 (**permalink**) 03/09/2014, 05:26

aca dejo el link al codigo

http://jsfiddle.net/ignacio85r/tnv0xsjz/

DesgraciadoGabo · #8 (**permalink**) 04/09/2014, 10:54

Que tal ignacio, viendo tu codigo si es algo muy extraño que se valla al lado izquierdo.

Lo que vi es que editaste tu html y el menú quedó más limpio, por esta razón me fue mucho más fácil trabajar un poco en tu problema.

Aquí te dejo la liga del resultado de tu menú:
http://jsfiddle.net/tnv0xsjz/1/

Ahí podrás ver los css y al html no le movi nada, cualquier duda o problema que tengas con gusto lo aclaramos, te mando un saludo brother!!!

ignacio85r · #9 (**permalink**) 04/09/2014, 11:08

ahi vi. creo que era algo de las proporciones que corregi, y quite parametros qe estaban de mas en algunas instrucciones como en el nav y en el nav a.

desde ya muchisimas gracias por tu ayuda DesgraciadoGabo.

saludos para ti tambien :D

DesgraciadoGabo · #10 (**permalink**) 04/09/2014, 11:32

Estamos para ayudar Ignacio :)