Foros del Web » Creando para Internet » CSS »

Alineacion (FLOAT y DIVS)

Estas en el tema de Alineacion (FLOAT y DIVS) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/06/2008, 00:27
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Alineacion (FLOAT y DIVS)

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 ;)
  #2 (permalink)  
Antiguo 06/06/2008, 02:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineacion (FLOAT y DIVS)

¿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.
  #3 (permalink)  
Antiguo 06/06/2008, 04:51
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Alineacion (FLOAT y DIVS)

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
__________________
No diseñes usando tablas.
  #4 (permalink)  
Antiguo 06/06/2008, 10:53
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Alineacion (FLOAT y DIVS)

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...
  #5 (permalink)  
Antiguo 06/06/2008, 11:02
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Alineacion (FLOAT y DIVS)

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 ^^
  #6 (permalink)  
Antiguo 06/06/2008, 11:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineacion (FLOAT y DIVS)

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.
  #7 (permalink)  
Antiguo 06/06/2008, 11:28
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Alineacion (FLOAT y DIVS)

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;}

Última edición por MasterXNicoX; 06/06/2008 a las 11:33
  #8 (permalink)  
Antiguo 06/06/2008, 11:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineacion (FLOAT y DIVS)

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

#menu {margin: 0px auto;}

Mikel.
  #9 (permalink)  
Antiguo 06/06/2008, 11:49
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Alineacion (FLOAT y DIVS)

nop che, no pasa nada :(
  #10 (permalink)  
Antiguo 06/06/2008, 15:33
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Alineacion (FLOAT y DIVS)

Alguien me pude ayudar, plis ?? :(
  #11 (permalink)  
Antiguo 06/06/2008, 16:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineacion (FLOAT y DIVS)

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

Mikel.
  #12 (permalink)  
Antiguo 06/06/2008, 16:21
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Alineacion (FLOAT y DIVS)

gracias mik! vos siempre al tanto ;)

No hay alguna parte en donde te pueda votar para que te hagan mod ??
  #13 (permalink)  
Antiguo 06/06/2008, 16:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineacion (FLOAT y DIVS)

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.
  #14 (permalink)  
Antiguo 06/06/2008, 16:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineacion (FLOAT y DIVS)

Cita:
Iniciado por MasterXNicoX Ver Mensaje
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.
  #15 (permalink)  
Antiguo 06/06/2008, 16:44
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Alineacion (FLOAT y DIVS)

Es mio, pero no lo puedo centrar :S ahora me fijo con tu código aver si sale algo..
  #16 (permalink)  
Antiguo 06/06/2008, 16:48
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Alineacion (FLOAT y DIVS)

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!!!.
  #17 (permalink)  
Antiguo 06/06/2008, 16:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineacion (FLOAT y DIVS)



Me alegro de que te sirva. Nos vemos.

Mikel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 21:43.