Supongo que existirán varias formas de conseguirlo. Una opción podría ser
introducir dentro de una capa ambas listas de la siguiente manera:
<div id="contenedor">
<ul id="navegacionA">
<li><a href="#" >Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
<ul id="navegacionB">
<li><a href="#">Enlace 4</a></li>
<li><a href="#">Enlace 5</a></li>
<li><a href="#">Enlace 6</a></li>
</ul>
</div>
Luego darle un ancho a dicha capa y centrarla con el "margin : auto" para
los buenos y "text-align : center" (en el body) para "el otro".
Luego flotas cada una de las listas una a la derecha y la otra a la
izquierda
body{
text-align : center;
}
#contenedor{
Margin : auto;
Width : 20em;
}
ul#navegacionA,
ul#navegacionB{
width : 10em;
list-style : none;
margin : 0;
padding : 0;
}
ul#navegacionA{
flota : left
}
ul#navegacionB{
flota : right
}
Supongo que también se debería valorar si ambos menús tienen relación y
deberían ir en una sola lista. En ese caso, lo que yo he hecho en alguna
ocasión para conseguir el efecto deseado es una cosa que quizás sea
demasiado burda, pero me funcionó, y es aplicar una clase determinada a los
items de la lista que vayan a un lado y otra a los restantes. Luego apliqué
una clase determinada en función de la posición de cada item en las columnas
(segundo, tercero...). Finalmente posicioné a modo absoluto todos los ítems
y filtre por clases para conseguir el efecto deseado. Con todo esto me
parece que se "enguarró" mucho toda la css, pero el código html pienso que
quedó más limpio:
<div id="contenedormenu">
<ul id="navegacion">
<li class="mitadA"><a href="#" >Enlace 1</a></li>
<li class="mitadA segundo"><a href="#">Enlace 2</a></li>
<li class="mitadA tercero"><a href="#">Enlace 3</a></li>
<li class="mitadB"><a href="#">Enlace 4</a></li>
<li class="mitadB segundo"><a href="#">Enlace 5</a></li>
<li class="mitadB tercero"><a href="#">Enlace 6</a></li>
</ul>
</div>
Y la css:
body{
text-align : center;
}
#contenedormenu{
position:relative;
top: 5em;
margin:auto;
width:50%;
}
ul#navegacion{
margin: 0;
padding: 0;
list-style: none;
}
ul#navegacion li{
border: 1px solid #000;
width: 40%;
line-height:3em;
position: absolute;
}
ul#navegacion li.mitadA{
left: 0;
}
ul#navegacion li.mitadB{
right: 0;
}
.segundo{
top: 3em;
}
.tercero{
top: 6em;
}
Pdta: Supongo que habrá una manera más sencilla de hacerlo.
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Patagonia
Enviado el: miércoles, 07 de diciembre de 2005 14:46
Para: [email protected]
Asunto: [Ovillo] Juntar dos columnas
Buen dia gente:
Tengo dos listas de enlaces en columnas de tablas, como estoy maquetando
mi sitio con
CSS queria ver como podria hacer para eliminar las tablas.
Hasta ahora esto es lo que tengo
Primera columna:
<ul dir="menu">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
Segunda columna:
<ul dir="menu">
<li><a href="#">Enlace 4</a></li>
<li><a href="#">Enlace 5</a></li>
<li><a href="#">Enlace 6</a></li>
</ul>
lo que no e podido hacer hasta ahora es que ambas columnas se pongan una
al lado de la
otra (pegadas) y que queden centradas en la pagina.
Alguna sugerencia
--
Saludos,
Fernando
___________________________________________________________
1GB gratis, Antivirus y Antispam
Correo Yahoo!, el mejor correo web del mundo
http://correo.yahoo.com.ar
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
