Foros del Web » Creando para Internet » HTML »

Hacer Menu en DIV

Estas en el tema de Hacer Menu en DIV en el foro de HTML en Foros del Web. hola quiero hacer un menu en div mas que un menu quiero saber como hacer esto con div y no con tablas @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código ...
  #1 (permalink)  
Antiguo 01/12/2010, 16:06
Avatar de j84625  
Fecha de Ingreso: junio-2008
Ubicación: Valencia
Mensajes: 170
Antigüedad: 9 años, 6 meses
Puntos: 2
Hacer Menu en DIV

hola quiero hacer un menu en div mas que un menu quiero saber como hacer esto con div y no con tablas
Código HTML:
Ver original
  1. <table border="0" cellspacing="0" cellpadding="0">
  2.   <tr>
  3.     <td>Contenido1</td>
  4.     <td>Contenido2</td>
  5.     <td>Contenido3</td>
  6.     <td>Contenido4</td>
  7.     <td>Contenido5</td>
  8.   </tr>

Cree 5 div con float: left; pero cuando la resolucion es reducida se descuadran las div realmente no se si me explico bien
__________________
Pagina de sobre los animales
Los animales
  #2 (permalink)  
Antiguo 01/12/2010, 16:35
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Hacer Menu en DIV

si es un menu se debe hacer con una lista y css no con divs algo como

Código CSS:
Ver original
  1. #menu ul{margin:0;padding:0;}
  2. #menu ul li{display:inline;margin:0 3px;}
Código HTML:
Ver original
  1. <div id="menu">
  2.     <ul>
  3.          <li><a href="#">Item</a></li>
  4.          <li> | </li>
  5.          <li><a href="#">Item</a></li>
  6.          <li> | </li>
  7.          <li><a href="#">Item</a></li>
  8.          <li> | </li>
  9.          <li><a href="#">Item</a></li>
  10.      <ul>
  11. </div>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 01/12/2010, 17:52
Avatar de j84625  
Fecha de Ingreso: junio-2008
Ubicación: Valencia
Mensajes: 170
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Hacer Menu en DIV

Cita:
Iniciado por Ag666 Ver Mensaje
si es un menu se debe hacer con una lista y css no con divs algo como

Código CSS:
Ver original
  1. #menu ul{margin:0;padding:0;}
  2. #menu ul li{display:inline;margin:0 3px;}
Código HTML:
Ver original
  1. <div id="menu">
  2.     <ul>
  3.          <li><a href="#">Item</a></li>
  4.          <li> | </li>
  5.          <li><a href="#">Item</a></li>
  6.          <li> | </li>
  7.          <li><a href="#">Item</a></li>
  8.          <li> | </li>
  9.          <li><a href="#">Item</a></li>
  10.      <ul>
  11. </div>
Buena idea pero no puedo darle un tamaño de height: 28px; ni centrar el texto verticalmente:S
__________________
Pagina de sobre los animales
Los animales
  #4 (permalink)  
Antiguo 01/12/2010, 17:56
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Hacer Menu en DIV

ok el css que puse cambialo por

Código CSS:
Ver original
  1. #menu ul{margin:0;padding:0;}
  2. #menu ul li{display:block;float:left;height:22px;padding:3px 8px;line-height:22px;margin:0 3px;}

el height lo puse en 22px considerando que el pading le dara 6px extra para completar los 28px que necesitas

y el line-height es para que se centre verticalmente
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 02/12/2010, 04:13
Avatar de j84625  
Fecha de Ingreso: junio-2008
Ubicación: Valencia
Mensajes: 170
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Hacer Menu en DIV

Cita:
Iniciado por Ag666 Ver Mensaje
ok el css que puse cambialo por

Código CSS:
Ver original
  1. #menu ul{margin:0;padding:0;}
  2. #menu ul li{display:block;float:left;height:22px;padding:3px 8px;line-height:22px;margin:0 3px;}

el height lo puse en 22px considerando que el pading le dara 6px extra para completar los 28px que necesitas

y el line-height es para que se centre verticalmente
Gracias funciona muy bien pero si redusco el tamaño del navegador se desordena el menu, es lo que me pasa con las div float:left
__________________
Pagina de sobre los animales
Los animales

Última edición por j84625; 02/12/2010 a las 04:19
  #6 (permalink)  
Antiguo 02/12/2010, 10:59
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Hacer Menu en DIV

Cita:
Iniciado por j84625 Ver Mensaje
Gracias funciona muy bien pero si redusco el tamaño del navegador se desordena el menu, es lo que me pasa con las div float:left
al decir se desordena, te refieres a que bajan los item y se muestran a dos lineas?

dale a la lista un ancho minimo o fijo

Código CSS:
Ver original
  1. #menu ul{margin:0;padding:0;min-width:300px;} /*ancho minimo - no funciona en IE6*/
  2.  
  3. #menu ul{margin:0;padding:0;width:300px;} /*ancho fijo*/
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 02/12/2010, 18:26
Avatar de j84625  
Fecha de Ingreso: junio-2008
Ubicación: Valencia
Mensajes: 170
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Hacer Menu en DIV

Cita:
Iniciado por Ag666 Ver Mensaje
al decir se desordena, te refieres a que bajan los item y se muestran a dos lineas?

dale a la lista un ancho minimo o fijo

Código CSS:
Ver original
  1. #menu ul{margin:0;padding:0;min-width:300px;} /*ancho minimo - no funciona en IE6*/
  2.  
  3. #menu ul{margin:0;padding:0;width:300px;} /*ancho fijo*/
gracias pero al final cree una tabla jejejejej probare esto si funciona bien lo cambi de verdad te lo agradesco
__________________
Pagina de sobre los animales
Los animales

Etiquetas: Ninguno
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




La zona horaria es GMT -6. Ahora son las 00:37.