DIVs centrados y estáticos?

[Kamae]

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!

[davidbrepe]

esto es de css
añade margin-left: auto al style del div

Un saludo!

[gVenom]

Iniciado por Kamae

Buenas a todos

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.

La propiedad de Vertical-align se aplica para elementos en linea y celdas de tabla.
El DIV es un elemento en bloque, por lo que si le agregas el valor de display: inline; para que se comporte como un elemento en linea, este debería reconocer el parametro vertical-align: middle;

[Kamae]

Buenas de nuevo

Cierto, debería haberlo puesto en CSS, sorry!

Gracias a ambos por las respuestas, aunque sigo teniendo el mismo problema. Os comento:

davidbrepe, le he puesto el margin-left:auto; al DIV, luego al UL, y finalmente incluso al LI, pero en ninguno de los casos me hace nada.

gVenom, si le pongo el inline lo más destacable que me sucede es que desaparece el color de fondo junto con el border :S El valign="middle" o "bottom" no muestra diferencias entre ellos y con vertical-align para CSS tampoco se mueve. De todas formas, basándome en tu ayuda he conseguido centrarlo horizontalmente (almenos me reconoce el text-align), y a parte de que me desaparezca el fondo, sigue ocurriendo el tema de que cuando hago pequeña la ventana, las capas se mueven.

Bfffff... odio los divs... xd

Gracias por las respuestas
Saludos

[gVenom]

Bueno, no soy un pro en css, pero al menos lo que se te lo paso.

creo que este css es lo mismo que le pusiste a tu div pero algo mas pulido:

Código CSS:

text-align:center;
height:25px;
width:100%;
position:relative;
margin-top:65px;
border-width:2px 0 solid #336799;
background-color:#BAD3E0;
font:bold 11px "Trebuchet MS",Arial,Sans-Serif;
 

nada mas ponlo en la misma linea.
En el ul tienes que poner el tipo de medida despues del valor

Código CSS:

margin:3px 0 4px 0;
 

No se como se ve o que es la imagen que pones, pero si es la misma para cada lista talvez la puedes poner asi:

Código CSS:

ul li { list-style-image: url(img/dsg/bola.gif); }
 

y el asunto que se desaparezca el borde o el color de fondo, no se que será

[t_virusjdac]

Hola hace rato trabaje con un menu horizontal asi como el que quieres y te paso el codigo:

En CSS:

ul#nav {
margin: 0;
padding: 0 0 0 6px;
width: 994px;
height: 36px;
background: #000 url(images/nav_bg.gif) repeat-x;
color: inherit;
}

ul#nav li {
float: left;
margin: 0;
padding: 15px 0 0 0;
list-style-type: none;
text-transform: uppercase;
}

ul#nav li a {
text-decoration: none;
padding: 13px 30px 14px 30px;
}

ul#nav li a:link, ul#nav li a:visited {
background-color: inherit;
color: #fff;
}

ul#nav li a:hover, ul#nav li a:active {
background-color: inherit;
color: #c9f381;
}


eso lo pones en la hoja de estilo, para utilizarlo en html lo haces asi:

<ul id="nav">
<li><a href="index.html" title="Inicio">Inicio</a></li>
<li><a href="tu vinculo" title="tu texto">tu texto</a></li>
<li><a href="tu vinculo" title="tu texto">tu texto</a></li>
<li><a href="tu vinculo" title="tu texto">tu texto</a></li>
<li><a href="tu vinculo" title="tu texto">tu texto</a></li>
</ul>

A mi me funciono muy bien, hasta un submenu tenia si mas no recuerdo ese sitio, pero si tienes algun problema con este codigo me avisas y con gusto te ayudo.

[Kamae]

Hola!

Gracias de nuevo por las respuestas, después del fin de semanita y después de probar vuestras soluciones os comento:

gVenom, lo arreglé como me dijiste pero algunas cosas dejaron de funcionar, como el border (tanto el color como el borde en sí) o el tipo de fuente; así que esos dos los volví a programar como en el caso anterior para que me lo reconozca. Sobre los px detrás de cada parámetro en margin (padding, etc), gracias, llevaba ya un tiempo haciéndolo mal y poniéndolo sólo al final jejej Finalmente en cuanto a las imágenes no varia nada pero tienes razón, así que las he incrustado con CSS en vez de meterlas a pelo con HTML.

t_virusjdac lo he probado y sí que es más o menos lo que quiero (no saltan de línea al redimensionar la ventana, que por otra parte lo había conseguido con position:absolute; pero entonces hay que indicarle la posición exacta). De todas formas sigo sin conseguir centrar el menú dinámicamente (es decir que según el ancho de la ventana se "recentra" donde debe).

Vaya, que lo único que me queda es que se redimensione siempre centrado si el usuario redimensiona la ventana, tal y como sucede aquí ( CableControlCastillo ), pero éste "no se vale" porque lo hicieron con tablas
Mi hermano me ha enseñado hoy una historia similar para hacer lo del menú, esta tarde lo pruebo y si lo consigo lo posteo por si a alguien le sirve.

Gracias a todos!
Saludos

[Kamae]

Iniciado por Kamae

davidbrepe, le he puesto el margin-left:auto; al DIV, luego al UL, y finalmente incluso al LI, pero en ninguno de los casos me hace nada.

PD: Te dije que no iba pero antes tenía en el body un width:100%; y un height:100%;, lo he cambiado por un margin:0 auto; y el efecto es el mismo que el que quiero conseguir (que cuando redimensionen el navegador también lo haga el fondo). Sólo hay que poner el div con la imagen que hay que repetirse con un float:right; background-repeat:repeat-x; (en mi caso para que siga por la derecha). Lo digo porque una de las cosas que no me gustaba era trabajar con %, y para hacer lo que quería no lo necesitaba.

[kseso?]

El centrado vertical en la opciones de un menú hecho con listas (ul/li/a) suele lograrse con las propiedades line-height o el padding superior e inferior.
El centrado horizontal dependerá de las particularidades de cada situación, principalmente de si se conocen a priori o no el nº de opciones, si se quiere dar una anchura igual a todas las opciones o estará en función de su contenido, etc.

Una de las últimas realizaciones contemplando alguna particularidades muy concretas fue ésta.
Como verá no hace uso ni del display:inline-block ni de tabe/table-cell y otras habituales para hacerlo compatible con los ie.

Quizás le sirva como base para sus necesidades.

[gVenom]

Puedes darte una vuelta por aca a ver si ves un estilo de menú como el que ocupas y le das una mirada al código

[Kamae]

kseso? muchas gracias! Eso es exactamente lo que quería, aunque para cuando lo vi venía a escribir que ya lo tenía :P El problema de que me saltaran los divs es pq no les puse width... menuda cagada xd
De todas formas me ha ido muy bien tu aporte para ver más cosillas del css, he visto que el display:inline; actúa del mismo modo que hacerlo con float:left;, los he probado ambos, pero aun me estoy peleando con el padding, margin, line-height... no consigo que me haga caso ninguno de ellos pero ya encontraré qué hago mal!

gVenom muchas gracias de nuevo, en este caso el diseño está elegido por el cliente pero para sacar ideas de otros y tal está genial!

Merci y hasta la próxima!