Re: [Ovillo] Alineación vertical de dos elementos
Y no has probado con vertical-align? me refiero por supuesto a la propiedad CSS que puede especificarse para indicar la forma en que se alinean cajas inline. Puede tomar varios valores: - baseline - bottom - middle - sub - super - text-bottom - text-top - top la lástima, como siempre, es que la implementación no es igual para todos los navegadores y, mientras en Safari y Opera puedes fiarte 100% del resultado, en IE y Firefox vas a tener que experimentar y probar. Un saludo Victoria El día 4/07/08, SkuNk [EMAIL PROTECTED] escribió: Sí, una gran pregunta. Yo hice expermientos con line-height, pero ahora mismo no recuerdo si fueron satisfactorios :P -- Philipp Keweloh El día 3/07/08, Ignacio Ricci [EMAIL PROTECTED] escribió: Que gran pregunta. Yo te digo opciones que he utilizado, que no se sin son las mejores, pero son opciones. Opcion 1 Que el radio, input, icono tenga float:left; Opcion 2 Que el contenedor de los elementos tenga un alto y un vertical-align:middle; Opcion 3 Que el radio, input, icono tenga un margen top de tanto, y con un fix para IE6 y IE7. Y hasta ahí llegaron mis opciones cuando viene ese caso. 2008/7/3 Javier Prieto (Tapry) [EMAIL PROTECTED]: Hola compañeros: Este es otro de los temas que me está volviendo loco desde hace tiempo. Muchas veces se me ha dado el caso en el que tengo que poner un radio button y al lado un texto. En otras ocasiones he tenido que poner un iconito y al lado un texto (sin ser fondo el iconito) Otras veces he tenido que poner un campo de búsqueda (campo de texto de un formulario) y la lado un pequeño icono como submit ... en fin, resumidamente, muchas ocasiones en las que tengo que poner algun elemento inline al lado del otro. Mi pregunta viene aqui, ¿hay alguna manera fácil de poder controlar la alineación vertical de este par de elementos? Es decir, si pongo por ejemplo un texto al lado de una imagen de 50x50 pixels, el texto se queda alineado con respecto a la base de la imagen. No me valen opcines de float:left, ni cosas raras, yo simplemento quiero poder alinear los dos elementos verticalmente. Espero haber sido claro y así me podais echar un cable. Muchas gracias por vuestra ayuda y un abrazo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- ↓ Ignacio Ricci www.ignacioricci.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Alineación vertical de dos elementos
Que gran pregunta. Yo te digo opciones que he utilizado, que no se sin son las mejores, pero son opciones. Opcion 1 Que el radio, input, icono tenga float:left; Opcion 2 Que el contenedor de los elementos tenga un alto y un vertical-align:middle; Opcion 3 Que el radio, input, icono tenga un margen top de tanto, y con un fix para IE6 y IE7. Y hasta ahí llegaron mis opciones cuando viene ese caso. 2008/7/3 Javier Prieto (Tapry) [EMAIL PROTECTED]: Hola compañeros: Este es otro de los temas que me está volviendo loco desde hace tiempo. Muchas veces se me ha dado el caso en el que tengo que poner un radio button y al lado un texto. En otras ocasiones he tenido que poner un iconito y al lado un texto (sin ser fondo el iconito) Otras veces he tenido que poner un campo de búsqueda (campo de texto de un formulario) y la lado un pequeño icono como submit ... en fin, resumidamente, muchas ocasiones en las que tengo que poner algun elemento inline al lado del otro. Mi pregunta viene aqui, ¿hay alguna manera fácil de poder controlar la alineación vertical de este par de elementos? Es decir, si pongo por ejemplo un texto al lado de una imagen de 50x50 pixels, el texto se queda alineado con respecto a la base de la imagen. No me valen opcines de float:left, ni cosas raras, yo simplemento quiero poder alinear los dos elementos verticalmente. Espero haber sido claro y así me podais echar un cable. Muchas gracias por vuestra ayuda y un abrazo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- ↓ Ignacio Ricci www.ignacioricci.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Alineación vertical de dos elementos
Sí, una gran pregunta. Yo hice expermientos con line-height, pero ahora mismo no recuerdo si fueron satisfactorios :P -- Philipp Keweloh El día 3/07/08, Ignacio Ricci [EMAIL PROTECTED] escribió: Que gran pregunta. Yo te digo opciones que he utilizado, que no se sin son las mejores, pero son opciones. Opcion 1 Que el radio, input, icono tenga float:left; Opcion 2 Que el contenedor de los elementos tenga un alto y un vertical-align:middle; Opcion 3 Que el radio, input, icono tenga un margen top de tanto, y con un fix para IE6 y IE7. Y hasta ahí llegaron mis opciones cuando viene ese caso. 2008/7/3 Javier Prieto (Tapry) [EMAIL PROTECTED]: Hola compañeros: Este es otro de los temas que me está volviendo loco desde hace tiempo. Muchas veces se me ha dado el caso en el que tengo que poner un radio button y al lado un texto. En otras ocasiones he tenido que poner un iconito y al lado un texto (sin ser fondo el iconito) Otras veces he tenido que poner un campo de búsqueda (campo de texto de un formulario) y la lado un pequeño icono como submit ... en fin, resumidamente, muchas ocasiones en las que tengo que poner algun elemento inline al lado del otro. Mi pregunta viene aqui, ¿hay alguna manera fácil de poder controlar la alineación vertical de este par de elementos? Es decir, si pongo por ejemplo un texto al lado de una imagen de 50x50 pixels, el texto se queda alineado con respecto a la base de la imagen. No me valen opcines de float:left, ni cosas raras, yo simplemento quiero poder alinear los dos elementos verticalmente. Espero haber sido claro y así me podais echar un cable. Muchas gracias por vuestra ayuda y un abrazo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- ↓ Ignacio Ricci www.ignacioricci.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Alineación vertical en un enlace
Hola Ramón:
Tengo un caso similar y me funciona dando a la imagen (no al texto)
display:inline, y el vertical align que quieras.
A ver si te ayuda.
Saludos,
Abby
Hola, Ovillo.
Estoy tratando de hacer algo que pensaba que era simple, pero no se me
da... Simplemente quiero poner un enlace a un lado de una imagen con una
flecha a la derecha, y que esa flecha esté centrada verticalmente dentro
de su caja. El caso es que he probado diferentes combinaciones, metiendo
spans, con márgenes, etc., pero no le da la gana de centrar en vertical.
Sería algo parecido a esto (ya digo que esto no tira):
a id=ir_dcha href=#gt;/a
#ir_dcha {
display: block;
width: 30px;
height: 80px;
text-decoration: none;
vertical-align: middle;
}
Muchas gracias,
Ramón.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Alineación vertical en un enlace
Hola, Abby, gracias por tu respuesta. El problema es que no hay imagen, es sólo una flecha en texto (es un carácter unicode, no el símbolo gt; que puse, pero para el caso es lo mismo). Tengo un caso similar y me funciona dando a la imagen (no al texto) display:inline, y el vertical align que quieras. A ver si te ayuda. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Alineación vertical en un enlace
Donde colocas la imagen? si quieren centar el tag IMG con respecto al texto
el vertical-align debes aplicarlo al IMG no al A.
Saludos,
Javier Trejo
www.cominteractiva.com.ar
El día 28 de mayo de 2008 14:42, Ramón Corominas [EMAIL PROTECTED]
escribió:
Hola, Ovillo.
Estoy tratando de hacer algo que pensaba que era simple, pero no se me
da... Simplemente quiero poner un enlace a un lado de una imagen con una
flecha a la derecha, y que esa flecha esté centrada verticalmente dentro
de su caja. El caso es que he probado diferentes combinaciones, metiendo
spans, con márgenes, etc., pero no le da la gana de centrar en vertical.
Sería algo parecido a esto (ya digo que esto no tira):
a id=ir_dcha href=#gt;/a
#ir_dcha {
display: block;
width: 30px;
height: 80px;
text-decoration: none;
vertical-align: middle;
}
Muchas gracias,
Ramón.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
Javier Trejo
Tel: 15-6485-7734
MSN: [EMAIL PROTECTED]
Skype: javier.trejo
Mail: [EMAIL PROTECTED]
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Alineación vertical en un enlace
Hola Ramón:
Quizá no he entendido bien... Quieres una imagen y a su lado un enlace
que esté centrado verticalmente en su caja, pero esa caja qué alto
tiene, ¿el mismo que la imagen? Si es así, yo dejaría la imagen y el
enlace en la misma caja y haría lo que te dije antes. Algo así:
div id=loaqueseaimg src=imagen.gif alt=blablabla /a
href=enlace.htmgt; /a/div
Y luego el CSS:
#loquesea img {
display:inline;
vertical-align:middle;
}
¿Es eso lo que quieres?
Saludos,
Abby
Hola, Abby, gracias por tu respuesta. El problema es que no hay imagen,
es sólo una flecha en texto (es un carácter unicode, no el símbolo gt;
que puse, pero para el caso es lo mismo).
Tengo un caso similar y me funciona dando a la imagen (no al texto)
display:inline, y el vertical align que quieras.
A ver si te ayuda.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Alineación vertical en un enlace
Creo que me he explicado mal... Olvidemos la imagen, ¿vale? De lo que se trata es de que el texto (la flecha) quede centrada verticalmente respecto a su contenedor, no respecto a la imagen que tiene al lado. Pongamos que es una almohadilla en lugar de una flecha: diva ...#/a/div Bueno, pues lo que quiero es que el enlace tenga las mismas dimensiones que el div y que además tenga la almohadilla centrada en horizontal y vertical. Por ejemplo, supongamos que el div mide 40x100, pues la almohadilla tendría que estar centrada en el 20,50 del div, siendo además todo el div pinchable. Gracias de nuevo, Ramón. Donde colocas la imagen? si quieren centar el tag IMG con respecto al texto el vertical-align debes aplicarlo al IMG no al A. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Alineación vertical en un enlace
Hola Ramon,
a ver si te sirve esto,
p {
vertical-align: middle;
line-height: 260px;
}
#ir_dcha {
text-decoration: none;
display: block;
float: left;
background-color: #eee;
height: 260px;
}
pa id=ir_dcha href=#gt;/a... texto o imagen/p
saludos,
2008/5/28 Javier Trejo [EMAIL PROTECTED]:
lo que vos querés hacer no se logra con un div. Necesitás darle al tag A un
formato para que se comporte como div (display:block) y luego darle un
width
(y poner la imagen donde vos quieras. SI la querés en el centro del ancho
le
ponés text-align:center. Con respecto al alto, ponéle un padding parejo
para
top y bottom (1px, por ejemplo) y ahi va a estare centrada de todos lados
Saludos,
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Alineación vertical en un enlace
Efectivamente, basta con el line-height y todo queda donde yo quería.
¡Muchas gracias!
Diego Burich escribió:
a ver si te sirve esto,
p {
vertical-align: middle;
line-height: 260px;
}
#ir_dcha {
text-decoration: none;
display: block;
float: left;
background-color: #eee;
height: 260px;
}
pa id=ir_dcha href=#gt;/a... texto o imagen/p
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] alineación vertical de una lista
Hola Amanda,
el vertical-align sólo funciona con elementos a nivel de linea o table-cell
Puedes probar a añadirle a #menuh un padding superior e inferior y
jugar con éstos y alto definido.
#menuh a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0;
width:146px;
height:30px;
padding:1em 0;
}
saludos
-Mensaje original-
De: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] nombre de Amanda Espuela
Enviado el: lunes, 30 de octubre de 2006 13:53
Para: Ovillo@lists.ovillo.org
Asunto: [Ovillo] alineación vertical de una lista
Hola buena necesito que me ayudeis en un problemilla con un a lista.
Este es el código del html
div id=menuh
ul
lia href=#id=primeroitem 1/a/li
lia href=#item2BR /i tem2/a/li
lia href=#item3 BR /item3/a/li
lia href=#item4/a/li
lia href=#item5BR / item5/a/li
/ul
/div
CSS
#menuh {
margin-top: 20px;
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 75%;
font-weight: bold;
}
#menu ul, li {
list-style-type: none;
display:inline;
}
#menuh ul {
margin: 0;
padding: 0;
}
#menuh li {
float: left;
vertical-align:middle;
}
#menuh a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0;
width:146px;
height:47px;
}
#menuh a#primero {
border-left: 1px solid #ACCFE8;
}
#menuh a:hover {
background: #DBEBF6;
}
Necesito que los apartados del menú que se estructuran en uan sola línea se
alineen verticalmente respecto a los otros en la mitad en vez de en la parte
superior.
Gracias
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] alineación vertical
Hola Martín,
Martin Szyszlican wrote:
Camilo:
Al ponerle display:block lo convertís en un elemento de bloque y deja de
funcionar el vertical-align
Claro, mi confusión y supongo que la de muchos, es tratar vertical-align
como text-align. Mientras que ésta se aplica a elementos *de bloque* y
determina la ubicación del *contenido* de estos, vertical-align se
aplica a elementos *de línea* y determina la posición de éstos respecto
al *bloque contenedor*.
Entonces, descartando vertical-align y un eventual marcado extra, vuelvo
a plantear el problema:
En síntesis, cómo puedo alinear verticalmente el texto en:
lia href=#Opción/ali
li a {display: block; height: 3em; }
Hasta ahora uso padding, pero no me satisface del todo, tal vez alguien
tiene una técnica sencilla que desconozco.
Saludos,
--
Camilo Kawerín
27Sur comunicación diseño
http://www.27sur.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] alineación vertical
Has probado a convertir el ul a objeto en línea? yo no lo he comprobado pero
tal vez sirva:
display: inline;
y luego usar el vertical-align.
Camilo Kawerín [EMAIL PROTECTED] escribió: Hola Martín,
Martin Szyszlican wrote:
Camilo:
Al ponerle display:block lo convertís en un elemento de bloque y deja de
funcionar el vertical-align
Claro, mi confusión y supongo que la de muchos, es tratar vertical-align
como text-align. Mientras que ésta se aplica a elementos *de bloque* y
determina la ubicación del *contenido* de estos, vertical-align se
aplica a elementos *de línea* y determina la posición de éstos respecto
al *bloque contenedor*.
Entonces, descartando vertical-align y un eventual marcado extra, vuelvo
a plantear el problema:
En síntesis, cómo puedo alinear verticalmente el texto en:
Opción
li a {display: block; height: 3em; }
Hasta ahora uso padding, pero no me satisface del todo, tal vez alguien
tiene una técnica sencilla que desconozco.
Saludos,
--
Camilo Kawerín
27Sur comunicación diseño
http://www.27sur.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Visita mi web http://www.carlosgo.com
-
Correo Yahoo!
Comprueba qué es nuevo, aquí
http://correo.yahoo.es
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] alineación vertical
En síntesis, cómo puedo alinear verticalmente el texto en: lia href=#Opción/ali para mi, tendrias que usar 'line-height' en el 'li' y 'vertical-align:middle' en el 'a' hay algunas cosas que eran -mucho- mas comodas, cuando eramos inconscientes :) ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] alineación vertical
Camilo:
Al ponerle display:block lo convertís en un elemento de bloque y deja de
funcionar el vertical-align
Propongo esto:
li span { display: block; height: 3em; }
li span a { vertical-align: center; }
lispanadsa/a/span/li
Si encontraste la solucion a un problema, podés enviarla a la lista aun
si nadie la requiere, puede ser interesante para probar y discutir. Por
favor hacelo con otro Asunto, no como yo que suelo secuestrar hilos.
Martin.
Camilo Kawerín wrote:
Hola a todos,
Quiero hacer algo tan sencillo como centrar el texto dentro de un
elemento de bloque o, más exactamente, dentro de un enlace con
display: block.
Tengo en claro que vertical-align no es aplicable a elementos de
bloque, pero no entiendo porqué no funciona al aplicarlo a elementos
de línea.
En síntesis, cómo puedo alinear verticalmente el texto en:
lia href=#Opción/ali
li a {display: block; height: 3em; }
Saludos,
Por cierto, el sábado encontré una manera de solucionar un problema
que solía tener en IE al hacer una barra de navegación horizontal con
los li flotados y sin una ancho fijo. Si alguien tenía este problema
y no encontraba solución, se la envío.
--
Martin Szyszlican
www.y.net.ar
___
1GB gratis, Antivirus y Antispam
Correo Yahoo!, el mejor correo web del mundo
http://correo.yahoo.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
