Foros del Web » Creando para Internet » CSS »

Centrar verticalmente texto de manera dinámica

Estas en el tema de Centrar verticalmente texto de manera dinámica en el foro de CSS en Foros del Web. Hola, tengo un problema y es que estoy haciendo un menú de pestañas dinamicamente (lo que quiere decir que puede cambiar su altura dinamicamente dependiendo ...
  #1 (permalink)  
Antiguo 26/01/2007, 05:06
 
Fecha de Ingreso: enero-2007
Mensajes: 55
Antigüedad: 10 años, 10 meses
Puntos: 1
Exclamación Centrar verticalmente texto de manera dinámica

Hola, tengo un problema y es que estoy haciendo un menú de pestañas dinamicamente (lo que quiere decir que puede cambiar su altura dinamicamente dependiendo de la cantidad de texto que tengamos) y mi problema es que no he encontrado manera que me centre el texto verticalmente. Os pondré un ejemplo: Si tengo 3 pestañas y una es más larga que las demás las otras dos automaticamente se tienen que hacer del mismo tamaño (para que quede esteticamente mejor), pero mi problema es que al hacerse más grande y tener tan poco texto quiero que se centro dentro de la imagen de la pestaña para que quede bonito. Logicamente si es dinámico no me sirve marcarle un tamaño ni nada por el estilo porque nunca sabemos que tamaño puede tener. Si alguien me puede ayudar se lo agradecería mucho. Merci por adelantado y saludos.
  #2 (permalink)  
Antiguo 26/01/2007, 06:23
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
Re: Centrar verticalmente texto de manera dinámica

Hay una manera de conseguirlo a través de display, con table y table cell en Firefox y inline-block en IE, pero para estar seguros sería mejor que pusieras tu código, porque según cómo tengas hecho el menú igual se puede no.

Mikel.
  #3 (permalink)  
Antiguo 29/01/2007, 02:23
 
Fecha de Ingreso: enero-2007
Mensajes: 55
Antigüedad: 10 años, 10 meses
Puntos: 1
Re: Centrar verticalmente texto de manera dinámica

Hola, lo primero de todo muchas gracias por interesarte por mi problema y querer ayudarme. Te paso un ejemplo simple de lo que es mi problema (para no pasarte todo el tostón que tengo), la primera parte es el htm (falta la línea del !DOCTYPE html PUBLIC) y la segunda el css:

<head>
<title>Ejemplo 1: Sliding Doors of CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="STYLESHEET" type="text/css" href="prueba.css">
</head>

<body>

<div id="tabs">
<div id="TabSelected">Home</div>
<div id="TabUnselected">News</div>
<div id="TabUnselected">Products dfadfasdfadfasdfasdfa dfa dfasdfasdfad adfadfasdfasdfasdfasdfadfasdfa df asdfadfasdfadf</div>
<div id="TabUnselected">News</div>
<div id="TabUnselected">About asdfasdf l asjksdflñasj flñdkasjflkdas flasdjñljk</div>
</div>

</body>

</html>

---------------------------(Ahora te paso el css)-------------

#body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}

#TabSelected {
float:left;
width:20%;
font-weight:bold;
text-align:center;
border: 1px yellow solid;
padding-bottom: 999em;
margin-bottom: -999em;
}

#TabUnselected {
float:left;
width:19.8%;
background: grey;
text-align:center;
border: 1px black solid;
font-weight:bold;
padding-bottom: 999em;
margin-bottom: -999em;
}

#tabs {
overflow:hidden;
text-align:center;
border: 1px yellow solid;
height: 100%;
}
  #4 (permalink)  
Antiguo 29/01/2007, 17:01
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
Re: Centrar verticalmente texto de manera dinámica

Hola, Pedrojo.
Hacer lo que quieres para firefox no es ningún problema, porque marcando el div contendor con display: table y los que están dentro con display: table-cell y vertical-align: middle funciona sin problema (no con el menú como lo tienes ahora, sino haciéndolo de otra forma), pero para IE es mucho más difícil.

Como según he visto que tienes el menú, no creo que vaya a quedar así, quiero decir, no incluyes enlaces y demás, así que para intentar encontrar una solución exacta para IE creo que sería mejor teniendo ya el menú como lo vas a querer tener, si no, buscar ahora una manera posible si luego vas a añadir otros elementos (vínculos, fondos, imágenes, etc.), podría no servir de nada, porque como te digo es complicadillo.

Un par de detalles para cuando sigas avanzando:
si pones la almohadilla en la clase body (#body) es como si no pusieras nada; body debe ir sin más:

body {
background:#fff;
margin:0;
... etc.

No deberías usar elementos con el mismo id. Un id debe ser para un elemento único, que aparezca llamado una sola vez en general. Para el caso donde lo has usado, deberías usar elemetos class, es decir:

si vas a usar varios div con la clase "TabUnselected", no pongas

#TabUnselected {
float:left;
width:19.8%;
... etc.

y luego <div id="TabUnselected">

sino:

.TabUnselected {
float:left;
width:19.8%;
... etc.

y luego <div class="TabUnselected">

Es mi opinión, y creo que lo más recomendable.
Si lo has hecho así por alguna razón concreta que desconozco discúlpame.

Mikel.
  #5 (permalink)  
Antiguo 30/01/2007, 06:06
 
Fecha de Ingreso: enero-2007
Mensajes: 55
Antigüedad: 10 años, 10 meses
Puntos: 1
Re: Centrar verticalmente texto de manera dinámica

Hola Mikel, gracias por tus consejos lo primero de todo. Pues la verdad esque lo que te pasé es un "boceto" de lo que tengo, en realidad si que hay hipervinculos en el texto y de fondo tengo una imágen. Lo que me has comentado del display:table y demás ya lo había probado como lo tengo ahora y es verdad que no me funciona, por eso no sabía que más hacer. Muchas gracias por tu ayuda.
  #6 (permalink)  
Antiguo 30/01/2007, 06: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
Re: Centrar verticalmente texto de manera dinámica

Mira este pequeño ejemplo de cómo funciona para Firefox con display table:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Centrado vertical de menu</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <style type="text/css">
#cont { margin: 0pt auto;
background-color: rgb(102, 204, 204);
overflow: auto;
vertical-align: middle;
display: table;
width: 400px;
}
a { vertical-align: middle;
background-color: rgb(204, 204, 255);
display: table-cell;
padding-left: 10px;
width: 6em;
height: 100%;
}
  </style>
</head>
<body>
<div id="cont"><a href="#A">uno</a><a
 href="#B">dos</a><a href="#C">tres,
cuatro
y&nbsp;cinco, seis, siete, ocho, nueve y diez</a></div>
</body>
</html>
Igual puedes sacar algo aprovechable de esto para tu caso.

Si quieres pon el código completo del menú como lo tienes (o lo subes a algún sitio), y por intentarlo, no perdemos nada.

Mikel.
  #7 (permalink)  
Antiguo 31/01/2007, 05:17
 
Fecha de Ingreso: enero-2007
Mensajes: 55
Antigüedad: 10 años, 10 meses
Puntos: 1
Re: Centrar verticalmente texto de manera dinámica

Pues de la manera que lo tengo yo hecho eso no funciona (ya lo había probado de esa manera), muchas gracias de todas formas y seguiré buscando si hay algo "milagroso" para mi ejemplo, sino lo encuentro en unos días ya cambiaré de "táctica". Muchas gracias de todas formas.
  #8 (permalink)  
Antiguo 05/02/2007, 02:14
 
Fecha de Ingreso: enero-2007
Mensajes: 55
Antigüedad: 10 años, 10 meses
Puntos: 1
Re: Centrar verticalmente texto de manera dinámica

Hola de nuevo, no hay alguien que sepa como hacerlo (aunque sea de una manera que no concuerde con lo que tengo hecho (si hace falta me curraré volverlo a cambiar todo). Help please!
  #9 (permalink)  
Antiguo 05/02/2007, 04:29
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
Re: Centrar verticalmente texto de manera dinámica

Pon tu menú con los contenidos reales (me refiero a enlaces y eso), y quizá entre todos a alguien se le ocurra una buena solución.

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




La zona horaria es GMT -6. Ahora son las 06:05.