Foros del Web » Creando para Internet » CSS »

¿Hay un efecto inherit pero para elementos hermanos?

Estas en el tema de ¿Hay un efecto inherit pero para elementos hermanos? en el foro de CSS en Foros del Web. Hola, buenas a todos. Por favor, ¿hay alguien que sepa si existe alguna forma conseguir un inherit pero elementos hermanos, y no para los hijo? ...
  #1 (permalink)  
Antiguo 14/12/2010, 05:11
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 15 años, 4 meses
Puntos: 2
Pregunta ¿Hay un efecto inherit pero para elementos hermanos?

Hola, buenas a todos.

Por favor, ¿hay alguien que sepa si existe alguna forma conseguir un inherit pero elementos hermanos, y no para los hijo?

El objeto es conseguir que una capa que solamente contiene una imagen y un párrrafo -este haciendo las veces de pie de foto- tenga el ancho de la foto. Así, aplicando las propiedades de manera genérica -class- se pueda coger imágenes de cualquier tamaño, que siempre su pie de foto se adaptará al ancho de la foto.

Algo similar a lo que hace WordPress con sus pies de foto, pero en CSS, sin necesidad de meter php.

Muchas gracias.
  #2 (permalink)  
Antiguo 27/12/2010, 17:24
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 15 años, 4 meses
Puntos: 2
Respuesta: ¿Hay un efecto inherit pero para elementos hermanos?

Pues tras comprobar que un centenar de personas han pasado por aquí y nadie ha contestado nada, empiezo a plantearme que formulo incongruencias. O eso o que los buenos entendidos ya no rulan por aquí.

Para el que le interese, encontré una medio solución.

Teniendo que plantearse que todas las fotos tendrán el mismo ancho en horizontal -440 px- y el mismo ancho en vertical -330 px-, llamaré a la capa que contendrá la foto horizontal y su pie de texto así:

Código HTML:
<div class="imgreportaje">
	<img class="foto" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="440" height="44" alt="Maicro." />
	<p class="piefotoreportaje">Avatar de Maicro. Avatar de Maicro.</p>
</div> 
Su estilo será:

Código:
div.imgreportaje {
	width: 440px;
	margin: 0 auto;
	text-align: justify;
	margin-top: 10px;
}
Y la capa que contendrá la imagen vertical así:

Código HTML:
<div class="imgreportaje v">
	<img class="foto" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="330" height="33" alt="Maicro." />
	<p class="piefotoreportaje v">Avatar de Maicro. Avatar de Maicro.</p>
</div> 
Con este estilo:

Código:
div.v {
	padding-left: 110px;
}
p.v {
	padding-right: 110px;
}
Lo que desconocía es que podía diferenciar un class de esa manera, con un espacio, y es lo que me dio la solución. Patán de mí :D

Ese padding, cuyo valor es la diferencia de ancho entra ambas tomas -no la mitad porque el padding ensancha a la capa-, permitirá desplazar la capa de las fotos verticales 55 pixeles a la derecha y parecerá que todas las fotos del reportaje están alineadas.

Es lo único que me ha permitido conseguir el efecto que buscaba, pero me ha limitado a que las fotos que vayan como reportajes siempre estén al mismo tamaño.

Espero que ayude en un futuro a alguien. Si algún experto encuentra algún fallo en mi planteamiento, por favor, que me corrija. Gracias a todos.

El efecto se puede ver aquí: http://www.maicro.es/centrado.htm

Etiquetas: efecto, elementos
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 07:47.