[Ovillo] centrar Div verticalmente
Hola a todos! Tengo un problemita: Necesito colocar en una página una imagen de fondo, la cual irá en un div, pero esta imagen deberá quedar centrada horizontal Y verticalmente. He encontrado algunas soluciones en la web, pero no muy legales sobre como centrar con CSS verticalmente... Aclaro que arriba de dicho div, tengo que maquetar otros divs en los cuales irán otros con contenidos tales como botones de links, textos, otras imágenes, animaciones... También aclaro que soy nueva en esto... y cuando he logrado resolver un problema, me salta otro, como que no se visualiza correctamente en algunos navegadores. Espero puedan ayudarme, y agradezco lo que he aprendido leyendo día a día la lista!!! Saludos, Diana _ Express yourself instantly with MSN Messenger! Download today it's FREE! http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/ ___ 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] centrar Div verticalmente
Hola Diana,
así a bote pronto no entiendo porqué tienes dudas. Si es una imagen de fondo
seguramente la colocarás en un div tal como el contenedor de la página o de
los diseños que estés haciendo, de este modo por encima suyo podrá mostrarse
el contenido e imágenes del resto de capas.
En cuanto al centrado, no acabo de entender si te interesa centrar la imagen
respecto al div o si quieres centrar el div en cuestión respecto a la
página, lo que ya dependerá de la estructura del HTML que hayas elegido.
Si es el caso de la imagen busca una posición porcentual razonable si hay
que centrarlo verticalmente, no siempre será exacto pero como ya has visto
no hay un control que permita la posición de la imagen de fondo en centrado
vertical (sí en horizontal)
.claseDelDivEnCuestion {background: #color url(imagen) no-repeat 50% 50%;
}
De todos modos, según el formato de la imagen, la importancia de ésta y de
que efectivamente esté centrada, también puedes cuestionarte crear una
imagen lo suficientemente grande como para que ocupe el 100% del div y se
redimensione con éste. Es un buen método para garantizar que las imágenes se
redimensionan con los cambios de visualización del usuario.
Un saludo
Victoria
El día 23 de julio de 2008 15:35, Diana Gentilini
[EMAIL PROTECTED] escribió:
Hola a todos! Tengo un problemita:
Necesito colocar en una página una imagen de fondo, la cual irá en un div,
pero esta imagen deberá quedar centrada horizontal Y verticalmente.
He encontrado algunas soluciones en la web, pero no muy legales sobre
como centrar con CSS verticalmente...
Aclaro que arriba de dicho div, tengo que maquetar otros divs en los cuales
irán otros con contenidos tales como botones de links, textos, otras
imágenes, animaciones...
También aclaro que soy nueva en esto... y cuando he logrado resolver un
problema, me salta otro, como que no se visualiza correctamente en algunos
navegadores.
Espero puedan ayudarme, y agradezco lo que he aprendido leyendo día a día
la lista!!!
Saludos,
Diana
_
Express yourself instantly with MSN Messenger! Download today it's FREE!
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
___
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] centrar div con li en Firefox
Andres escribió:
Las propiedades de los enlaces ya he conseguido que funcionen:
a:link{
text-decoration:none;
color:#00;
}
a:active{
text-decoration:none;
color:#CC;
}
a:hover{
text-decoration:underline;
color:#CC;
}
a:visited{
color:#00;
text-decoration:underline;
}
a{
font-size:10px;
color:#00;
}
Me quedo con la duda de por qué no funcionaba al principio.
Copio de http://www.torresburriel.com/weblog/index.php?p=342
Ten presente la regla LoVe/HaTe cuando se trate de dar diseño a los links:
Cuando se especifican las pseudo-clases de un link siempre se ha de
hacer siguiente este orden: Link, Visited, Hover y Active. Cualquier
otro orden que usemos hará que no funcionará adecuadamente. ´Considera,
de igual modo, el uso de :focus y modifica el orden de lat modo: LVHFA.
Matt Haughey habla de la regla Lord Vader’s Handle Formerly Anakin.
--
Saludos -=stripTM=-
___
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
[Ovillo] centrar div con li en Firefox
No entiendo qué es lo que falla aquí.
En Explorer todo se ve bien, pero en Firefox no.
Ni siquiera salen los colores en los enlaces.
*, html{
margin:0;
padding:0;
}
body{
margin: 0px;
padding: 0px;
border: 0px;
overflow: auto;
height: 100%;
max-height: 100%;
text-align:center;
}
#centrado{
width: 100%;
position: absolute;
left: 50%;
margin: 0px 0px 0px -50%;
}
#foto{
width:100%;
text-align:center;
}
/* MENUS */
#contenedormenus{
width:100%;
text-align:center;
}
#menus{
width:600px;
text-align:center;
}
/* grafico */
menugrafico{
margin-left:5px;
margin-top:20px;
width: 190px;
font-family: Trebuchet MS;
float:left;
}
menugrafico li{
font-family: Trebuchet MS;
color: #CC;
list-style:none;
font-size:12px;
list-style:none;
text-align:left;
}
menugrafico li ul{
padding:0;
margin:0;
list-style:none;
text-indent: 25px;
margin-top:0px;
padding-top:0px;
line-height: 14px;
}
menugrafico li ul a:link{
text-decoration:none;
color:#00;
}
menugrafico li ul a:active{
text-decoration:none;
color:#CC;
}
menugrafico li ul a:hover{
text-decoration:underline;
color:#CC;
}
menugrafico li ul a:visited{
color:#00;
}
menugrafico li ul a{
font-size:10px;
}
___
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] centrar div con li en Firefox
He conseguido centrar el div quitando #contenedormenus y con
#menus{
width:600px;
text-align:center;
}
Ahora sólo quedan las propiedades de los enlaces...
- Original Message -
From: Andres [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Saturday, May 05, 2007 2:55 AM
Subject: [Ovillo] centrar div con li en Firefox
No entiendo qué es lo que falla aquí.
En Explorer todo se ve bien, pero en Firefox no.
Ni siquiera salen los colores en los enlaces.
*, html{
margin:0;
padding:0;
}
body{
margin: 0px;
padding: 0px;
border: 0px;
overflow: auto;
height: 100%;
max-height: 100%;
text-align:center;
}
#centrado{
width: 100%;
position: absolute;
left: 50%;
margin: 0px 0px 0px -50%;
}
#foto{
width:100%;
text-align:center;
}
/* MENUS */
#contenedormenus{
width:100%;
text-align:center;
}
#menus{
width:600px;
text-align:center;
}
/* grafico */
menugrafico{
margin-left:5px;
margin-top:20px;
width: 190px;
font-family: Trebuchet MS;
float:left;
}
menugrafico li{
font-family: Trebuchet MS;
color: #CC;
list-style:none;
font-size:12px;
list-style:none;
text-align:left;
}
menugrafico li ul{
padding:0;
margin:0;
list-style:none;
text-indent: 25px;
margin-top:0px;
padding-top:0px;
line-height: 14px;
}
menugrafico li ul a:link{
text-decoration:none;
color:#00;
}
menugrafico li ul a:active{
text-decoration:none;
color:#CC;
}
menugrafico li ul a:hover{
text-decoration:underline;
color:#CC;
}
menugrafico li ul a:visited{
color:#00;
}
menugrafico li ul a{
font-size:10px;
}
___
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] centrar div con li en Firefox
Las propiedades de los enlaces ya he conseguido que funcionen:
a:link{
text-decoration:none;
color:#00;
}
a:active{
text-decoration:none;
color:#CC;
}
a:hover{
text-decoration:underline;
color:#CC;
}
a:visited{
color:#00;
text-decoration:underline;
}
a{
font-size:10px;
color:#00;
}
Me quedo con la duda de por qué no funcionaba al principio.
- Original Message -
From: Andres [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Saturday, May 05, 2007 3:18 AM
Subject: Re: [Ovillo] centrar div con li en Firefox
He conseguido centrar el div quitando #contenedormenus y con
#menus{
width:600px;
text-align:center;
}
Ahora sólo quedan las propiedades de los enlaces...
- Original Message -
From: Andres [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Saturday, May 05, 2007 2:55 AM
Subject: [Ovillo] centrar div con li en Firefox
No entiendo qué es lo que falla aquí.
En Explorer todo se ve bien, pero en Firefox no.
Ni siquiera salen los colores en los enlaces.
*, html{
margin:0;
padding:0;
}
body{
margin: 0px;
padding: 0px;
border: 0px;
overflow: auto;
height: 100%;
max-height: 100%;
text-align:center;
}
#centrado{
width: 100%;
position: absolute;
left: 50%;
margin: 0px 0px 0px -50%;
}
#foto{
width:100%;
text-align:center;
}
/* MENUS */
#contenedormenus{
width:100%;
text-align:center;
}
#menus{
width:600px;
text-align:center;
}
/* grafico */
menugrafico{
margin-left:5px;
margin-top:20px;
width: 190px;
font-family: Trebuchet MS;
float:left;
}
menugrafico li{
font-family: Trebuchet MS;
color: #CC;
list-style:none;
font-size:12px;
list-style:none;
text-align:left;
}
menugrafico li ul{
padding:0;
margin:0;
list-style:none;
text-indent: 25px;
margin-top:0px;
padding-top:0px;
line-height: 14px;
}
menugrafico li ul a:link{
text-decoration:none;
color:#00;
}
menugrafico li ul a:active{
text-decoration:none;
color:#CC;
}
menugrafico li ul a:hover{
text-decoration:underline;
color:#CC;
}
menugrafico li ul a:visited{
color:#00;
}
menugrafico li ul a{
font-size:10px;
}
___
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] centrar div con li en Firefox
Se me ha olvidado poner el enlace:
http://www.arkitera.es/zumo
- Original Message -
From: Andres [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Saturday, May 05, 2007 3:45 AM
Subject: Re: [Ovillo] centrar div con li en Firefox
Las propiedades de los enlaces ya he conseguido que funcionen:
a:link{
text-decoration:none;
color:#00;
}
a:active{
text-decoration:none;
color:#CC;
}
a:hover{
text-decoration:underline;
color:#CC;
}
a:visited{
color:#00;
text-decoration:underline;
}
a{
font-size:10px;
color:#00;
}
Me quedo con la duda de por qué no funcionaba al principio.
- Original Message -
From: Andres [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Saturday, May 05, 2007 3:18 AM
Subject: Re: [Ovillo] centrar div con li en Firefox
He conseguido centrar el div quitando #contenedormenus y con
#menus{
width:600px;
text-align:center;
}
Ahora sólo quedan las propiedades de los enlaces...
- Original Message -
From: Andres [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Saturday, May 05, 2007 2:55 AM
Subject: [Ovillo] centrar div con li en Firefox
No entiendo qué es lo que falla aquí.
En Explorer todo se ve bien, pero en Firefox no.
Ni siquiera salen los colores en los enlaces.
*, html{
margin:0;
padding:0;
}
body{
margin: 0px;
padding: 0px;
border: 0px;
overflow: auto;
height: 100%;
max-height: 100%;
text-align:center;
}
#centrado{
width: 100%;
position: absolute;
left: 50%;
margin: 0px 0px 0px -50%;
}
#foto{
width:100%;
text-align:center;
}
/* MENUS */
#contenedormenus{
width:100%;
text-align:center;
}
#menus{
width:600px;
text-align:center;
}
/* grafico */
menugrafico{
margin-left:5px;
margin-top:20px;
width: 190px;
font-family: Trebuchet MS;
float:left;
}
menugrafico li{
font-family: Trebuchet MS;
color: #CC;
list-style:none;
font-size:12px;
list-style:none;
text-align:left;
}
menugrafico li ul{
padding:0;
margin:0;
list-style:none;
text-indent: 25px;
margin-top:0px;
padding-top:0px;
line-height: 14px;
}
menugrafico li ul a:link{
text-decoration:none;
color:#00;
}
menugrafico li ul a:active{
text-decoration:none;
color:#CC;
}
menugrafico li ul a:hover{
text-decoration:underline;
color:#CC;
}
menugrafico li ul a:visited{
color:#00;
}
menugrafico li ul a{
font-size:10px;
}
___
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
___
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
[Ovillo] centrar div
Hola lista, estoy haciendo una página simple con un formulario para la cosa típica de presentar una pantalla para login, este formulario esta dentro de un div. la pregunta es ¿como puedo centrar este div en medio de la pantalla, tanto vertical como horizontalmente? Esperando respuesta Paradix ;) ___ 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] centrar div
Esto ya fue resuelto en centenar de mensajes anteriores. On 6/13/06, Paradix [EMAIL PROTECTED] wrote: Hola lista, estoy haciendo una página simple con un formulario para la cosa típica de presentar una pantalla para login, este formulario esta dentro de un div. la pregunta es ¿como puedo centrar este div en medio de la pantalla, tanto vertical como horizontalmente? Esperando respuesta Paradix ;) ___ 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 ___ 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] centrar div
Hola, Paradix escribió: ¿como puedo centrar este div en medio de la pantalla, tanto vertical como horizontalmente? Mirate: http://www.wpdfd.com/editorial/thebox/deadcentre3.html Saludos, Abel ___ 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] centrar div
También puedes mirar este enlace, que parece que es fácil, aunque tienes que saber cuanto mide la caja que quieres centrar. http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Paradix Enviado el: martes, 13 de junio de 2006 15:24 Para: Lista de CSS Asunto: [Ovillo] centrar div Importancia: Alta Hola lista, estoy haciendo una página simple con un formulario para la cosa típica de presentar una pantalla para login, este formulario esta dentro de un div. la pregunta es ¿como puedo centrar este div en medio de la pantalla, tanto vertical como horizontalmente? Esperando respuesta Paradix ;) ___ 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 --- Este correo electrónico y, en su caso, cualquier fichero anexo al mismo, contiene información de carácter confidencial exclusivamente dirigida a su destinatario o destinatarios. Queda prohibida su divulgación, copia o distribución a terceros sin la previa autorización escrita de Indra. En el caso de haber recibido este correo electrónico por error, se ruega notificar inmediatamente esta circunstancia mediante reenvío a la dirección electrónica del remitente. POR FAVOR, ANTES DE IMPRIMIR ESTE CORREO ELECTRÓNICO CONSIDERE SU APORTACIÓN A LA CONSERVACIÓN DEL MEDIO AMBIENTE POR LA REDUCCIÓN DE CONSUMO DE PAPEL. The information in this e-mail and in any attachments is confidential and solely for the attention and use of the named addressee(s). You are hereby notified that any dissemination, distribution or copy of this communication is prohibited without the prior written consent of Indra. If you have received this communication in error, please, notify the sender by reply e-mail. PLEASE CONSIDER YOUR ENVIRONMENTAL RESPONSIBILITY BEFORE PRINTING THIS E-MAIL. ___ 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] centrar div
gracias pero no tengo manera en estos momentos de revisar el archivo de la lista, esperaba un poco de ayuda de tu parte :( Xaire Paradix ;) - Original Message - From: Diego Martin [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Tuesday, June 13, 2006 9:41 AM Subject: Re: [Ovillo] centrar div Esto ya fue resuelto en centenar de mensajes anteriores. On 6/13/06, Paradix [EMAIL PROTECTED] wrote: Hola lista, estoy haciendo una página simple con un formulario para la cosa típica de presentar una pantalla para login, este formulario esta dentro de un div. la pregunta es ¿como puedo centrar este div en medio de la pantalla, tanto vertical como horizontalmente? Esperando respuesta Paradix ;) ___ 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 ___ 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 ___ 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
