Foros del Web » Creando para Internet » CSS »

imagen centrada se descoloca

Estas en el tema de imagen centrada se descoloca en el foro de CSS en Foros del Web. Hola a todos, tengo un CSS... : Código: ... p { width: 460px; margin: 0 auto; margin-bottom: 20px; text-align: center; } ... y mi web ...
  #1 (permalink)  
Antiguo 26/07/2006, 09:41
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 13 años, 9 meses
Puntos: 62
imagen centrada se descoloca

Hola a todos, tengo un CSS... :

Código:
...
p
 {
  width: 460px;
  margin: 0 auto;
  margin-bottom: 20px;
  text-align: center;
 }
...
y mi web con:
Código HTML:
<p><br />
		<img src="php.gif" alt="powered by php" /><br />
		<img src="ajax.gif" alt="powered by ajax" />
...
</p> 
el problema es que la 1ª imagen se ve un poco movida a la derecha, a que se debe esto?

podeis verlo aqui:
http://zital.no-ip.org
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #2 (permalink)  
Antiguo 26/07/2006, 10:38
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Porqué no usas mejor un margen superior en el parrafo?

Usar espacios en blancos para diseñar, está en contra de la semántica del diseño con CSS:
en vez de usar:
Código HTML:
<p><br /> <!-- Este espacio -->
		<img src="php.gif" alt="powered by php" /><br />
		<img src="ajax.gif" alt="powered by ajax" />
                <br /><br /> <!-- Estos de acá también!-->
                <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="valid-xhtml10.png" alt="xhtml 1.0 Strict Zuzena" /></a><br />
                <a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="vcss.png" alt="CSS Zuzena!!" /></a>

                </p> 
Puedes usar:
Código HTML:
<p><img src="php.gif" alt="powered by php" /><br /><img src="ajax.gif" alt="powered by ajax" /></p>
<p><a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="valid-xhtml10.png" alt="xhtml 1.0 Strict Zuzena" /></a><br />
<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="vcss.png" alt="CSS Zuzena!!" /></a></p> 
y en el CSS darle un margin-top a párrafo:
Código:
...
p {
  width: 460px;
  margin: 10px auto 10px auto;
  text-align: center;
 }
...
__________________
Al final del día hablar es gratis, codificar no lo es
  #3 (permalink)  
Antiguo 26/07/2006, 12:26
 
Fecha de Ingreso: julio-2004
Ubicación: San Sebastián de los Reye
Mensajes: 140
Antigüedad: 13 años, 4 meses
Puntos: 2
Yo eliminaría las etiquetas <p> y <br> que no pintan nada para lo que quieres hacer. Prueba a poner en el estilo de las imágenes display:block;
__________________
tecomweb.com - diseño y desarrollo Web
  #4 (permalink)  
Antiguo 27/07/2006, 03:44
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 13 años, 9 meses
Puntos: 62
;)

al final meti este codigo en css:
Código:
img
 {
   display: block;
   padding: 2px;
   margin: auto;
 }
pero las imagenes tuve que meterlas dentro de una <p> </p> ya que sino no me validaba el xhtml en el w3c.

Muchas gracias a todos.
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan

Última edición por ZiTAL; 27/07/2006 a las 04:20
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 19:17.