Hacer Menu en DIV

[j84625]

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:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Contenido1</td>
    <td>Contenido2</td>
    <td>Contenido3</td>
    <td>Contenido4</td>
    <td>Contenido5</td>
  </tr>
</table>
 

Cree 5 div con float: left; pero cuando la resolucion es reducida se descuadran las div realmente no se si me explico bien

[ArturoGallegos]

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

Código CSS:

#menu ul{margin:0;padding:0;}
#menu ul li{display:inline;margin:0 3px;}
 

Código HTML:

<div id="menu">
    <ul>
         <li><a href="#">Item</a></li>
         <li> | </li>
         <li><a href="#">Item</a></li>
         <li> | </li>
         <li><a href="#">Item</a></li>
         <li> | </li>
         <li><a href="#">Item</a></li>
     <ul>
</div>
 

[j84625]

Iniciado por Ag666

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

Código CSS:

#menu ul{margin:0;padding:0;}
#menu ul li{display:inline;margin:0 3px;}
 

Código HTML:

<div id="menu">
    <ul>
         <li><a href="#">Item</a></li>
         <li> | </li>
         <li><a href="#">Item</a></li>
         <li> | </li>
         <li><a href="#">Item</a></li>
         <li> | </li>
         <li><a href="#">Item</a></li>
     <ul>
</div>
 

Buena idea pero no puedo darle un tamaño de height: 28px; ni centrar el texto verticalmente:S

[ArturoGallegos]

ok el css que puse cambialo por

Código CSS:

#menu ul{margin:0;padding:0;}
#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

[j84625]

Iniciado por Ag666

ok el css que puse cambialo por

Código CSS:

#menu ul{margin:0;padding:0;}
#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

[ArturoGallegos]

Iniciado por j84625

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:

#menu ul{margin:0;padding:0;min-width:300px;} /*ancho minimo - no funciona en IE6*/
 
#menu ul{margin:0;padding:0;width:300px;} /*ancho fijo*/
 

[j84625]

Iniciado por Ag666

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:

#menu ul{margin:0;padding:0;min-width:300px;} /*ancho minimo - no funciona en IE6*/
 
#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