Foros del Web » Creando para Internet » CSS »

Barra de progreso centrada en un div

Estas en el tema de Barra de progreso centrada en un div en el foro de CSS en Foros del Web. hola amigos de forosdelweb, soy novato en esto de los divs y casi en todo de diseño xD. busque un poco acerca de mi problema ...
  #1 (permalink)  
Antiguo 02/01/2010, 08:31
 
Fecha de Ingreso: agosto-2008
Mensajes: 7
Antigüedad: 9 años, 4 meses
Puntos: 0
Barra de progreso centrada en un div

hola amigos de forosdelweb, soy novato en esto de los divs y casi en todo de diseño xD.

busque un poco acerca de mi problema pero no encontre respuesta alguna o no la supe buscar.

tengo un problema con una barra de progreso que esta dentro de un div y no he podido centrar, aqui añado una imagen para que vean mi problema.




el css que utilice fue este:

.UsuarioForo
{
width:120px;
height:17px;
border: thin solid #A9A9A9;
background-color:#E6E6E6;
}

espero me puedan ayudar, se que para ustedes no es nada complicado esto y disculpen mi ignorancia.
  #2 (permalink)  
Antiguo 02/01/2010, 12:46
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Barra de progreso centrada en un div

prueba a meterle:

margin: 0 auto;
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 02/01/2010, 13:04
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: Barra de progreso centrada en un div

zeroflow

pon tu barra de progreso dentro de 2 div, te explico:

un div va a ser el que ya tiene ahora:
Código CSS:
Ver original
  1. .UsuarioForo
  2. {
  3. margin: auto;
  4. width:120px;
  5. height:17px;
  6. border: thin solid #A9A9A9;
  7. background-color:#E6E6E6;
  8. }
el otro div tiene que estar dentro del anterior para que centre:
Código CSS:
Ver original
  1. .centrar
  2. {
  3. margin-top: 3px;
  4. }

y listo solo te falta agregar tu barra dentro de los dos div y ya trendras centrada bien la barra.

xD no tome en cuenta el margin: auto; por que si te das cuenta la barra ya se encuentra centrada :P lo que nesesita zeroflow es que se centre de arriba para abajo :P y eso noce como hacerlo pero con margin_top es posible xD, je espero que te sirba y si queda mal modifica los px de margin_top
__________________
Appones.net - www.appones.net
  #4 (permalink)  
Antiguo 02/01/2010, 19:19
Avatar de SDEK  
Fecha de Ingreso: diciembre-2009
Ubicación: MX
Mensajes: 156
Antigüedad: 8 años
Puntos: 8
Respuesta: Barra de progreso centrada en un div

Que tal,

Le agregué a tu clase lo necesario para centrar la barra. Considero que con el único div que tienes puedes centrarlo. Solo cambia tu clase por la siguiente:

Código:
 .UsuarioForo {

          border: thin solid #A9A9A9;
		
          background-color:#E6E6E6;

          top: 50%; 
  
          left: 50%;
   
          height: 150px;
		  
          width: 250px;
 
          margin-top: -75px; 
 
          margin-left: -125px; 
 
          position: absolute;
		  
			}


A continuación te explico el efecto que tienen las propiedades que agregué:


top: 50%; /* Posicionas tu Clase a la mitad de la pantalla a partir del borde superior */

left: 50%; /* Posicionas tu Clase a la mitad de la pantalla a partir del borde izquierdo */

margin-top: -75px; /* Restas la mitad de la altura del div a la propiedad "top" para que tu div se centre desde el centro de la imagen y no del borde */

margin-left: -125px; /* Restas la mitad del ancho del div a la propiedad "left" para que tu div se centre desde el centro de la imagen */

position: absolute; /* El centrado es "absoluto" a la pantalla y no relativo a algun otro elemento (div, imagen, tabla, etc) */


Saludos,

Última edición por tunait; 03/01/2010 a las 13:37 Razón: remover firma
  #5 (permalink)  
Antiguo 02/01/2010, 21:39
 
Fecha de Ingreso: agosto-2008
Mensajes: 7
Antigüedad: 9 años, 4 meses
Puntos: 0
De acuerdo Respuesta: Barra de progreso centrada en un div

Cita:
Iniciado por danistrein Ver Mensaje
zeroflow

pon tu barra de progreso dentro de 2 div, te explico:

un div va a ser el que ya tiene ahora:
Código CSS:
Ver original
  1. .UsuarioForo
  2. {
  3. margin: auto;
  4. width:120px;
  5. height:17px;
  6. border: thin solid #A9A9A9;
  7. background-color:#E6E6E6;
  8. }
el otro div tiene que estar dentro del anterior para que centre:
Código CSS:
Ver original
  1. .centrar
  2. {
  3. margin-top: 3px;
  4. }

y listo solo te falta agregar tu barra dentro de los dos div y ya trendras centrada bien la barra.

xD no tome en cuenta el margin: auto; por que si te das cuenta la barra ya se encuentra centrada :P lo que nesesita zeroflow es que se centre de arriba para abajo :P y eso noce como hacerlo pero con margin_top es posible xD, je espero que te sirba y si queda mal modifica los px de margin_top


amigos muchas gracias por la oportuna respuesta, gracias a estos espacios de ayuda es que los novatos como yo aprenden, ya solucione el problema usando el metodo de danistrein.
  #6 (permalink)  
Antiguo 03/01/2010, 14:25
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: Barra de progreso centrada en un div

Cita:
Iniciado por zeroflow Ver Mensaje
amigos muchas gracias por la oportuna respuesta, gracias a estos espacios de ayuda es que los novatos como yo aprenden, ya solucione el problema usando el metodo de danistrein.
me alegra que te aya servidor mi ayuda
__________________
Appones.net - www.appones.net

Etiquetas: barra, centrada, progreso
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 12:41.