Foros del Web » Creando para Internet » CSS »

¿Es posible texto pie foto debajo a la izquirda de la foto, ambos centrados en capa?

Estas en el tema de ¿Es posible texto pie foto debajo a la izquirda de la foto, ambos centrados en capa? en el foro de CSS en Foros del Web. Hola buenas. De repente se me ha planteado un dilema con CSS y no lo he resuelto en esta tarde. A ver, por favor, si ...
  #1 (permalink)  
Antiguo 09/12/2010, 14:14
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
¿Es posible texto pie foto debajo a la izquirda de la foto, ambos centrados en capa?

Hola buenas. De repente se me ha planteado un dilema con CSS y no lo he resuelto en esta tarde. A ver, por favor, si hay alguien que sepa la solución.

La intención es crear un CSS estándar para las fotos de una una página, las cuales se hayan colgadas por Internet, no el hosting de la página. La intención es alinear esas fotos en el centro de la página. Cosa fácil con este CSS a la capa que contiene la foto:

Código:
div.internet {
	text-align: center;
}
Añado la información de que las dimensiones de las fotos serán diferentes unas de otras.

Pues bien, lo que ando buscando es que el párrafo que contendrá el texto de la pie de foto no se alinee también al centro, sino a la izquierda y que el borde izquierdo del párrafo coincida con el borde izquierdo de la foto en el eje X. Si todas las fotos tuviesen el mismo ancho sería fácil dando un padding al párrafo, pero, como he dicho, las dimensiones de las fotografías cambian.

¿A alguien se le ocurre cómo hacerlo? Muchas gracias. Saludos.
  #2 (permalink)  
Antiguo 09/12/2010, 15:52
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: ¿Es posible texto pie foto debajo a la izquirda de la foto, ambos centrado

y si nos muestras el html también?
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 09/12/2010, 16:05
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Es posible texto pie foto debajo a la izquirda de la foto, ambos centrado

Por supuesto ;)

Código HTML:
<div class="internet">
	<img class="internet" src="http://img840.imageshack.us/img.jpg" width="800" height="600" alt="Texto alternativo" />
	<p class="piefotointernet">Pie de foto.</p>
</div> 
Y el CSS

Código:
img {
	border: none;
	margin: 0;
	padding: 0;
}
div.internet {
	text-align: center;
}
img.internet {
	border: 2px solid #ffffff;
}
p.piefotointernet {
	text-align: left;
	font-size: 0.6em;
	text-indent: 0em;
	margin: 2px 0px 0px 0px;
}
Gracias.
  #4 (permalink)  
Antiguo 09/12/2010, 16:10
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: ¿Es posible texto pie foto debajo a la izquirda de la foto, ambos centrado

FALSO:
Cita:
Iniciado por Maicro Ver Mensaje
Código:
div.internet {
    text-align: center;
}
allí no estás centrando capas con css, sino que estás centrando el texto.

para centrar capas con CSS solo basta:

Código CSS:
Ver original
  1. div.internet{
  2.     margin: 0px auto;
  3. }

también dispones de CSS float para hacer que la imagen se ajuste con el texto en a izquierda o derecha, suerte
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Última edición por maycolalvarez; 09/12/2010 a las 16:20
  #5 (permalink)  
Antiguo 09/12/2010, 16:39
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Es posible texto pie foto debajo a la izquirda de la foto, ambos centrado

Eso creía yo y empecé con
Código:
margin: 0 auto;
Ya que incluso es así como centro el contenido de la página.

Pero, míra lo que pasa:

Código:
img {
	border: none;
	margin: 0;
	padding: 0;
}
div.internet {
	border: 2px solid #ffffff;
	margin: 0 auto;
}
img.internet {
	border: 2px solid #ffffff;
}
p.piefotointernet {
	font-size: 0.6em;
	text-indent: 0em;
	margin: 2px 0px 0px 0px;
}
span.piefotointernet {
	font-size: 0.6em;
	text-indent: 0em;
	margin: 2px 0px 0px 0px;
}
Código HTML:
<div class="internet">
	<img class="internet" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="50" height="50" alt="Maicro." />
	<p class="piefotointernet">Avatar de Maicro.</p>
</div>
<p>Bla, bla bla.</p>
<div class="internet">
	<img class="internet" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="50" height="50" alt="Maicro." />
	<br><span class="piefotointernet">Avatar de Maicro.</span>
</div> 
Resultado:

  #6 (permalink)  
Antiguo 09/12/2010, 16:40
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Es posible texto pie foto debajo a la izquirda de la foto, ambos centrado

Bueno, y si pongo la imagen con float se sale del borde blanco grande.

¡Ah! Gracias ;)
  #7 (permalink)  
Antiguo 09/12/2010, 17:06
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Es posible texto pie foto debajo a la izquirda de la foto, ambos centrado

Más claro: www.maicro.es/centrado.htm

Con este código:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head >
	<title>Centrado</title>
	<meta name="generator" content="Notepad++" />
	<style type="text/css">
body {
	color: #cccccc;
	background: #000000;
	font-family: Verdana, Arial, Helvetica, Helv, sans-serif;
}
div.internet {
	border: 2px solid #ffffff;
	margin: 0 auto;
}
img.internet {
	border: 2px solid #ffffff;
}
p.piefotointernet {
	font-size: 0.6em;
	text-indent: 0em;
	margin: 2px 0px 0px 0px;
}
span.piefotointernet {
	font-size: 0.6em;
	text-indent: 0em;
	margin: 2px 0px 0px 0px;
}
	</style>
</head>
<body>
	<p>Bla, bla, bla.</p>
	<div class="internet">
		<img class="internet" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="50" height="50" alt="Maicro." />
		<p class="piefotointernet">Avatar de Maicro.</p>
	</div>
	<p>Ble, ble, ble.</p>
	<div class="internet">
		<img class="internet" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="50" height="50" alt="Maicro." />
		<span class="piefotointernet">Avatar de Maicro.</span>
	</div>
	<p>Bli, bli, bli.</p>
</body>
</html> 
El margin: 0 auto; de la capa internet no funciona. ¿Alguien lo entiende? Gracias.

Etiquetas: ambos, foto, pie, posible, capas, centrar
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:11.