Buenas a todos
Siempre he programado con tablas por su facilidad hasta que mi hermano me lo desaconsejó y me introdujo en el mundo de los divs y las listas. El problema es que los DIVs no funcionan con el atributo CSS "
vertical-align:middle;" o incluso en HTML con
valign="middle", a diferencia de las tablas que sí lo permiten.
Entonces digamos que tengo un menu horizontal colocado arriba de la página del rollo:
Inicio - ¿Quienes somos? - Productos (etc.)
El código es el siguiente:
Código PHP:
<div style="text-align:center; height:25px; width:100%; position:relative; top:65px;border-top-style:solid; border-top-width:2px; border-bottom-style:solid; border-bottom-width:2px; border-color:#336799; background-color:#BAD3E0; text-align:center; color:#033a82; font-family:Arial; font-size:11px; font-weight:bold;">
<ul style="text-align:center; list-style-type:none; margin:3 0 4 0px;">
<li style="float:left; width:20px; margin-left:30%;"><img src="img/dsg/bola.gif"></li><li style="float:left; width:45px; margin-top:2px;">Inicio</li>
<li style="float:left; width:20px; margin-left:5px;"><img src="img/dsg/bola.gif"></li><li style="float:left; width:120px; margin-top:2px;">¿Quienes somos?</li>
<li style="float:left; width:20px; margin-left:5px;"><img src="img/dsg/bola.gif"></li><li style="float:left; width:75px; margin-top:2px;">Productos</li>
</ul>
</div>
Esto aparentemente está bien, con el navegador maximizado lo coloca en medio y bien, el problema viene si redimensiono la ventana, ya que se reubican las secciones y saltan a la línea de abajo si no caben a continuación. Sé que si le pongo
position:absolute; y empiezo a meterle
left:XXXpx; podré colocarlo estáticamente, pero es una matada y me pregunto si hay alguna forma sencilla de hacerlo (con DIVs y/o listas, con TABLE no me sirve)
Muchas gracias de antemano
Saludos!