menu al 100%

[crafter_v]

Como hacer un menu (nav) para Wordpress, horizontal, donde el primer elemento del menú esté alineado por completo a la izquierda del contenedor, el último elemento alineado a la derecha, y que todos los elementos del menu tengan un espaciado equitativo entre ellos.

[AngelKrak]

o.O con un Width:100%; pero necesias saber php para hacer menu de Wordpress y CSS ;) es imposible que puedas hacerlo ya k me imagino k no sabes nada >_<

[crafter_v]

Si se algo de html y css y lo básico para wordpress, pero esto no se como se hace, con el width 100% el menú ocupa el ancho del contenedor, pero no se alinean los elementos a la izquierda y derecha de este, como digo, eso es lo que no sé hacer.

El código lo tengo aquí:

Código:

<header>

	<nav id="menupages">
    	<?php wp_nav_menu(
		array(
		'container' => false,
		'items_wrap' => '<ul id="menu-top">%3$s</ul>',
		'theme_location' => 'menu'
		)); ?>
    </nav>

</header>

y el css

Código:

header #menupages ul li ul li a:hover {
	text-decoration:none;
	}
	
header #menupages{
	margin:25px 0px 10px 0px;
	}

header #menupages ul{
	clear:both;
	margin:0px auto 0px auto;
	text-align:center;
	color:#000000;
	padding:0px 0px 0px 0px;
	border-top:#CCC 1px solid;
	border-bottom:#CCC 1px solid;
	font-family: 'Varela Round', sans-serif;
}

header #menupages ul li{
	list-style:none;
	display:inline-block;
	margin-left:8px;
	margin-right:8px;
}
	
header #menupages ul li a {
	text-decoration:none;
	display:block;
	padding:12px 12px 12px 12px;
}

header #menupages ul li a:hover {
	text-decoration:none;

[AngelKrak]

haber amigo, pasa la pag para verla y ayudarte mejor :D

[crafter_v]

Estoy trabajando en local, aún no está subida a la red. Ahí puse el código ¿no sabes como hacerlo?

[AngelKrak]

prueba agregando el width: 100%; al header #menupages y float: left; a header #menupages ul li o si no al header #menupages ul

[crafter_v]

Entiendo lo que dices, pero habría que darle un valor fijo al margin right de todos los elementos del menu, excepto al último, hasta que este estuviera alineado con el margen derecho del contenedor. Y claro, al disminuir el tamaño de pantalla se estropea todo...

Yo buscaba alguna forma de hacer que los elementos li abarcaran todo el ancho del menu de alguna forma.

[pzin]

Puedes hacerlo usando dispay para imitar el comportamiento de una tabla.

Código CSS:

ul {
  display: table;
  with: 100%;
}
 
ul li {
  display: table-cell;
}
 

Luego depende un poco del comportamiento que quieres que tenga el menú, puedes añadirle a la lista table-layout: fixed.

Angel, tu forma de escribir sigue dando bastante cáncer de ojos. Parece que tengas doce tiernos añitos.

[AngelKrak]

jajajajaja yo no le veo nada malo ._. yo si le entiendo, no es cosa del otro mundo ._.

[crafter_v]

Parece que funciona, gracias Pzin!