Foros del Web » Creando para Internet » CSS »

Imagen de cabecera centrada

Estas en el tema de Imagen de cabecera centrada en el foro de CSS en Foros del Web. Hola, tengo un problema con mi imagen de cabecera, en el html tengo lo siguiente: <div id="cabecera"> <img src="images/milogo.png" alt="Imagen"/> </div> y en el css ...
  #1 (permalink)  
Antiguo 14/10/2010, 08:41
 
Fecha de Ingreso: octubre-2010
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Imagen de cabecera centrada

Hola, tengo un problema con mi imagen de cabecera, en el html tengo lo siguiente:

<div id="cabecera">
<img src="images/milogo.png" alt="Imagen"/>
</div>

y en el css tengo lo siguiente:

#cabecera
{
text-align:center;
padding-top:2%;
padding-bottom:2%;
}

Así la imagen me sale bien y centrada, pero, cómo podría hacerlo para que la imagen me salga de la misma forma a través de css?

He probado lo siguiente:

<div id="cabecera">

</div>

Aquí debería dejar el contenido del div vacío? No es un poco "feo" hacer esto?

Y por otro lado en el css:

#cabecera
{
background: url('../images/milogo.png') no-repeat fixed center;
padding-top:2%;
padding-bottom:2%;
}

Y la imagen ni me aparece.

Si en cambio pongo:

#cabecera
{
background: url('../images/milogo.png');
padding-top:2%;
padding-bottom:2%;
}

Me aparece pero sin centrar. Cómo podría centrarla a través de css y qué pongo entre las etiquetas div del html?

Gracias.

Última edición por masi10; 14/10/2010 a las 08:58
  #2 (permalink)  
Antiguo 14/10/2010, 09:20
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Imagen de cabecera centrada

#cabecera{margin:0 auto;}

  #3 (permalink)  
Antiguo 14/10/2010, 09:33
 
Fecha de Ingreso: octubre-2010
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Imagen de cabecera centrada

También lo había probado ya porque lo había visto buscando por internet y tampoco me funciona, deja la imagen a la izquierda sin centrar.

Y lo que quiero saber también a parte de centrar, es si debo añadir la url en el css y si dejo la etiqueta div vacía o no.

Gracias.
  #4 (permalink)  
Antiguo 14/10/2010, 09:44
Avatar de Ribon  
Fecha de Ingreso: septiembre-2010
Ubicación: El firmamento
Mensajes: 487
Antigüedad: 7 años, 2 meses
Puntos: 91
Respuesta: Imagen de cabecera centrada

Lo que pasa es que por deecto el tamaño de los Divs es 0, y no porque le pongas una imagen de fiondo esta ajustará el tamaño del div.

lo que debes hacer es asignarle un tamaño al div#cabecera igual o mayor al tamaño de la imagen de fondo (para que esta se logre visializar), por ejemplo

Código CSS:
Ver original
  1. #cabecera{
  2. background: url(laimagen) no-repeat center;
  3. width:900px; /*El ancho de la imagen de fondo*/
  4. height:120px; /*El alto de la imagen de fondo*/
  5. }

Espero te haya ayudado saludos
  #5 (permalink)  
Antiguo 14/10/2010, 09:56
 
Fecha de Ingreso: octubre-2010
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Imagen de cabecera centrada

Cita:
Iniciado por Ribon Ver Mensaje
Lo que pasa es que por deecto el tamaño de los Divs es 0, y no porque le pongas una imagen de fiondo esta ajustará el tamaño del div.

lo que debes hacer es asignarle un tamaño al div#cabecera igual o mayor al tamaño de la imagen de fondo (para que esta se logre visializar), por ejemplo

Código CSS:
Ver original
  1. #cabecera{
  2. background: url(laimagen) no-repeat center;
  3. width:900px; /*El ancho de la imagen de fondo*/
  4. height:120px; /*El alto de la imagen de fondo*/
  5. }

Espero te haya ayudado saludos
Gracias Ribon.

La imagen mide 700x100, entonces, hago lo que dices con estas medidas y me deja la imagen a la izquierda también sin centrar, si le pongo más tamaño (1000x300 por ejemplo) ya me la deja centrada.

Al final lo que hay que hacer es centrarla "a ojo" modificando el tamaño en lugar de tener una propiedad center en css que te lo centre automáticamente. Me parece una chapuza del css pero parece que no hay otro camino...

Y el div del html, quedaría vacío? Es correcto hacer esto?

Gracias.

Última edición por masi10; 14/10/2010 a las 10:04
  #6 (permalink)  
Antiguo 14/10/2010, 10:12
Avatar de Ribon  
Fecha de Ingreso: septiembre-2010
Ubicación: El firmamento
Mensajes: 487
Antigüedad: 7 años, 2 meses
Puntos: 91
Respuesta: Imagen de cabecera centrada

Si es correcto, auqnue por lo general yo recomendaría hacer esto si vas a poner contenido sobre la cabecera (o sea sobre la imagen de fondo) ya que también es posible hacerlo con <img> pero bueno, se usa mucho lo de poner el banner como background para que no sea descargable el banner en ciertos navegadores y asdf
  #7 (permalink)  
Antiguo 14/10/2010, 10:28
 
Fecha de Ingreso: octubre-2010
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Imagen de cabecera centrada

Gracias por tu ayuda, ya lo tengo todo claro.

Saludos.
  #8 (permalink)  
Antiguo 14/10/2010, 10:33
 
Fecha de Ingreso: octubre-2010
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Imagen de cabecera centrada

Una última pregunta. Mi web se ve bien en firefox y en chrome, pero en internet explorer se ven las letras raras (no hace caso del tipo de letra que le he dicho que use desde el css), si le doy a "vista de compatibilidad" me deja la visión de la web ya bien igual que con firefox y chrome con la familia de letra que le he asignado.

Y otra cosa, en mi monitor de 17" panorámico se ve perfecta la web, pero si la veo desde un monitor de 17 normal se ve toda descentrada y si la ejecuto desde otro ordenador con internet explorer se ve totalmente descentrada y hecha un asco.

Existe alguna forma de remediar esto?

Última edición por masi10; 14/10/2010 a las 10:40
  #9 (permalink)  
Antiguo 14/10/2010, 11:49
Avatar de Ribon  
Fecha de Ingreso: septiembre-2010
Ubicación: El firmamento
Mensajes: 487
Antigüedad: 7 años, 2 meses
Puntos: 91
Respuesta: Imagen de cabecera centrada

Organizar bien tus DIVs
y utilizar estilos que sean compatibles en la mayoria de los navegadores.
  #10 (permalink)  
Antiguo 15/10/2010, 07:29
 
Fecha de Ingreso: octubre-2010
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Imagen de cabecera centrada

Ok, tomo nota.

Etiquetas: centrada, cabeceras
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 22:56.