Alineacion (FLOAT y DIVS)

[MasterXNicoX]

Holas, yo otra vez por aqui ^^

miren ahora el tema es el siguiente....

yo tengo un menu de navegación en mi página, bueno, el problema con éste menu es que lo tengo alineado a la izquierda...

yo lo que quiero es centrarlo, no es que no sepa como, pero tengo un problemita..

Miren, en mi código CSS, para alinear el menu a la izquierda dice:

#menu dl {float:left; width: 16%}

Bueno, el float está en "izquierda".
width me marca el ancho que tiene cada uno de los cuadritos del menu.

Si yo pongo en el FLOAT "right" se me alinea a la derecha.
Si yo pongo en el FLOAT "INHERIT" se junta todo el menu, y se pone de arriba hacia abajo, que es lo que yo no quiero.
Si yo pongo en el FLOAT "none" pasa lo mismo que con "INHERIT".


OSEA, NO HAY ALGUN CÓDIGO, PARA QUE EL MENU ME QUEDE DE FORMA HORIZONTAL, Y CENTRADO ??????.

Agradeceria su pronta respuesta ;)

[Mikmoro]

¿Se puede ver en algún sitio? Es posible que haya alguna manera de hacerlo. No obstante, ¿por qué usas dl para un menú? No es normal. DL (Definition List) es para una lista de definiciones, no para un menú de enlaces.

Ya contarás.

Mikel.

[hades87]

como bien ha dicho Mikmoro, apra el menú has de usar ul y li. Lo mas probable que le tendrías que dar margen por el lado izquierdo para que se tirara hacia el derecho, de todas formas pon la web y así lo vemos mejor

[MasterXNicoX]

No, lo que pasa es que este menu, es deplegable..
Por eso lleva el DL..

Todavia no la subi a internet la web, nose como podria mostrales...

[MasterXNicoX]

Mira, aca les dejo un croquis de lo que es mi menu...



El menu es desplegable, por ejemplo vos apretas en Menu1, y se despliega una lista hacia abajo con mas opciones..

Bueno como ven, con el codigo que les mostre anteriormente ( #menu dl {float:left; width: 16%} ), lo alinea hacia la izquierda.
y como ya explique en el primer post de este thread, no hay ninguna opcion en FLOAT que sea "center" solamente hay (left, right, inherit, none). osea ninguna me sirve para colocar mi menu en el medio de la web.

Alguno sabe como hacerlo ??

Si necesitan mas detalles me avisan ;)

Espero su ayuda ^^

[Mikmoro]

Bien, la imagen está bien para hacerse una idea.

Lo que estaría mejor es que pusieras el trozo de código donde tienes el menú incluyendo todo lo que lo envuelva (divs, tablas, etc.), porque posiblemente la manera de centrarlo esté en sus envoltorios.

No es necesario en absoluto que sean dl's por ser un desplegable. Es muy poco semántico y poco lógico, pero tampoco tiene mayor problema.

Mikel.

[MasterXNicoX]

CÓDIGO HTML:

<script type="text/javascript">
window.onload=montre; function montre(id) { var d = document.getElementById(id);for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display= 'none';}}
if (d) {d.style.display='block';}
}</script>
<style type="text/css"></style>
<div align="center" id="menu"><dl><dt onmousedown="javascript:montre('smenu1');">"NOMBRE DE MENU"</dt><dd id="smenu1"><ul><small>
<li><a href="*">"NOMBRE SUBMENU"</a></li><li><a href="*">"NOMBRE SUBMENU"</a></li>
<li><a href="*">"NOMBRE SUBMENU"</a></li>
<li><a href="*">"NOMBRE SUBMENU"</a></li><dt onmouseout="javascript:montre();"></small></ul></dl><dl>
<dt onmousedown="javascript:montre('smenu2');">"NOMBRE DE MENU"</dt><dd id="smenu2"><ul><small>
<li><a href="*">"NOMBRE SUBMENU"</a></li><li><a href="*">"NOMBRE SUBMENU"</a></li>
<li><a href="*">"NOMBRE SUBMENU"</a></li>
<li><a href="*">"NOMBRE SUBMENU"</a></li></small><dt onmouseout="javascript:montre();"></ul></dl><dl>
<dt onmousedown="javascript:montre('smenu3');">"NOMBRE DE MENU"</dt><dd id="smenu3"><ul><small>
<li><a href="*">"NOMBRE SUBMENU"</a></li><li><a href="*">"NOMBRE SUBMENU"</a></li>
<li><a href="*">"NOMBRE SUBMENU"</a></li><li><a href="*">"NOMBRE SUBMENU"</a></li>
</small><dt onmouseout="javascript:montre();"></ul></dl><dl>
<dt onmousedown="javascript:montre('smenu4');">"NOMBRE DE MENU"</dt><dd id="smenu4"><ul><small>
<li><a href="*">"NOMBRE SUBMENU"</a></li><li><a href="*">"NOMBRE SUBMENU"</a></li>
<li><a href="*">"NOMBRE SUBMENU"</a></li>
<li><a href="*">"NOMBRE SUBMENU"</a></li></small><dt onmouseout="javascript:montre();">
</ul></dl><dl><dt onmousedown="javascript:montre('smenu5');">"NOMBRE DE MENU"</dt><dd id="smenu5"><ul><small>
<li><a href="*">"NOMBRE SUBMENU"</a></li><li><a href="*">"NOMBRE SUBMENU"</a></li>
<li><a href="*">"NOMBRE SUBMENU"</a></li><li><a href="*">"NOMBRE SUBMENU"</a></li></small>
<dt onmouseout="javascript:montre();"></ul></dl><dl>
<dt onmousedown="javascript:montre('smenu6');">"NOMBRE DE MENU"</dt><dd id="smenu6"><ul><small>
<li><a href="*">"NOMBRE SUBMENU"</a></li><li><a href="*">"NOMBRE SUBMENU"</a></li>
<li><a href="*">"NOMBRE SUBMENU"</a></li></small><dt onmouseout="javascript:montre();"></ul></dl></div>
<div align="center"><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>


CODIGO CSS:

*{margin:0 auto; padding:0;}

body { background-color: #CCCCCC;color: #0066FF;margin: 0px auto;padding: 0; font: 80% verdana, arial, sans-serif;}
dl, dt, dd, ul, li {margin: 0 auto;padding: 0;list-style-type: none;}
#menu dl {float: left; width: 16%}
#menu dt {cursor: pointer;text-align: center;font-weight: bold;background: #999999;border: 2px solid #000000;}
#menu dd {border: 2px solid #000000;}
#menu li {text-align: center;background: #777777;}
#menu li a, #menu dt a {color: #006600;text-decoration: none;display: block;height: 100%;border: none}
#menu li a:hover, #menu dt a:hover {background: #888888;}


#navcontainer ul{text-align: center;padding: 0;}
#navcontainer li{display: inline;margin: 0 -1px;}
#navcontainer li a{padding: 0px 10px;color: #111;background-color: #888;border: 2px solid #000000;text-decoration: none;}
#navcontainer li a:hover{color:#00FFFF;border: 2px solid #0000FF;border-top: 2px solid #0000FF;border-bottom: 2px solid #0000FF;}


a:link {color: #0000FF;text-decoration: none;}
a:visited {color: #0000FF;text-decoration: none;}
a:hover {text-decoration: none;}
a:active {color: #0000FF;text-decoration: none;}
a.hidden {color: #0000FF;text-decoration: none;}
a.hidden:visited {color: #0000FF;text-decoration: none;}
a.hidden:hover {color: #0000FF;text-decoration: none;}
a.hidden:active {color: #0000FF;text-decoration: none;}
a.nav:link {color: #0000FF;padding: 2px;text-decoration: none;}
a.nav:visited {color: #0000FF;padding: 2px;text-decoration: none;}
a.nav:hover {color: #0000FF;background-color: #666666;padding: 2px;text-decoration: none;}
a.menu {font-family: arial, helvetica, sans-serif;font-weight: bold;text-decoration: none;}
a.menu:hover{font-family: arial, helvetica, sans-serif;font-weight: bold;text-decoration: none;
letter-spacing: 1px;}
a.box{padding: 3px;background-color: #FFFFFF;text-decoration: none;border: medium solid #000000;color: #000000;font-family: Verdana, Arial, Helvetica, sans-serif;}
a.box:hover{color: #000000;padding: 3px;text-decoration: none;background-color: #666666;border: medium solid #3366FF;color: #FFFFFF;font-family: Verdana, Arial, Helvetica, sans-serif;}

[Mikmoro]

Si esto falla lo miro con más detalle, pero prueba a poner en la parte de la css:

#menu {margin: 0px auto;}

Mikel.

[MasterXNicoX]

nop che, no pasa nada :(

[MasterXNicoX]

Alguien me pude ayudar, plis ?? :(

[Mikmoro]

Yo ahora lo miraré a ver qué se ve.

Mikel.

[MasterXNicoX]

gracias mik! vos siempre al tanto ;)

No hay alguna parte en donde te pueda votar para que te hagan mod ??

[Mikmoro]

No sé de dónde lo habrás sacado (o si será tuyo), pero es un extraño menú.

Lo más cercano a centrarlo que se me ocurre es que añadas esta clase:

#menu {margin-left: 4%;}

Mikel.

[Mikmoro]

Iniciado por MasterXNicoX

gracias mik! vos siempre al tanto ;)

No hay alguna parte en donde te pueda votar para que te hagan mod ??

No, no creo, y no creo que compense, porque seguro que será más curro

Mikel.

[MasterXNicoX]

Es mio, pero no lo puedo centrar :S ahora me fijo con tu código aver si sale algo..

[MasterXNicoX]

No te digo yo, dioss este chiko tiene la solucion a todo ^^ gracias man, ya esta solucionado :)

y nuevamente gracias a MIKMORO (Futuro Mod.) jijiji!!!.

[Mikmoro]

Me alegro de que te sirva. Nos vemos.

Mikel.