Foros del Web » Creando para Internet » CSS »

Pie de foto

Estas en el tema de Pie de foto en el foro de CSS en Foros del Web. Hola gente, soy nuevo por aquí y querría consultaros algo. A ver si podéis echarme una mano. El caso es que he conseguido color varias ...
  #1 (permalink)  
Antiguo 06/02/2007, 04:03
 
Fecha de Ingreso: febrero-2007
Mensajes: 11
Antigüedad: 10 años, 10 meses
Puntos: 0
Pie de foto

Hola gente,

soy nuevo por aquí y querría consultaros algo. A ver si podéis echarme una mano. El caso es que he conseguido color varias fotos dentro de un texto, algunas a la izquierda, otras a la derecha, con este código.

Cita:
#innerContentColumn img.thumbi {
float: left;
margin-right: 14px;
margin-bottom: 4px;
margin-top: .5em;
padding: 2px;
border: 3px solid #dbd5c5;
background: #fffefa;
}
#innerContentColumn img.thumbd {
float: right;
margin-left: 12px;
margin-bottom: 4px;
margin-top: .5em;
padding: 2px;
border: 3px solid #dbd5c5;
background: #fffefa;
}
#innerContentColumn img.alt {
float: left;
margin: .5em 12px 6px 0;
}
#innerContentColumn img.plain {
border: none !important;
background: none;
}
#innerContentColumn img.sm {
margin-top: .2em;
margin-bottom: 4px;
}
#innerContentColumn a img.thumb:hover {
border-color: #fff;
background: #fff;
}
#innerContentColumn .figure {
float: right;
margin: .5em 0 6px 20px;
font-size: 92%;
color: #666b75;
text-align: center;
}
#innerContentColumn .figure dt img {
margin: 0 0 6px 0;
padding: 6px;
padding: 2px;
border: 3px solid #dbd5c5;
background: #fffefa;
}
#innerContentColumn .figure img.fig {
padding: 6px;
padding: 2px;
border: 3px solid #dbd5c5;
background: #fffefa;
}
#innerContentColumn img.alone, #content .block {
float: none;
margin-left: 0;
}
#innerContentColumn p.fig {
text-align: center;
}
La cuestión es que quisiera hacer que por defecto apareciera debajo de las imágenes un pie de foto, quizás con el texto que le ponga en el "alt" y con un fondo creado con una imagen, por ejemplo. ¿Cómo podría hacerlo?

A ver si alguien pudiera ayudarme, que estoy super perdido.
  #2 (permalink)  
Antiguo 06/02/2007, 05:55
 
Fecha de Ingreso: febrero-2007
Mensajes: 11
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: Pie de foto

Nada, solucionado. Gracias a este enlace lo he solucionado facilmente.

css.maxdesign. com. au/floatutorial

Una maravilla.

Al final el código me ha quedado así

Cita:
#innerContentColumn .imgder {
float: right;
width: 240px;
margin: 0 0 6px 12px;
background-color: #fff;
padding: 0px;
border: 0px solid #666;
background-image: url(../img/bgpie.gif);
height: 200px;
}
#innerContentColumn .imgizq {
float: left;
width: 240px;
margin: 0 16px 6px 0px;
background-color: #fff;
padding: 0px;
border: 0px solid #666;
background-image: url(../img/bgpie.gif);
height: 200px;
}
Más sencillo, más bonito y mejor :P
  #3 (permalink)  
Antiguo 06/02/2007, 06:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Pie de foto

Pues no he tenido tiempo de mirar tu código y que debía hacer, pero según lo que has puesto, el código todavía más sencillo y escueto:
Código:
#innerContentColumn .imgder, #innerContentColumn .imgizq {
float: right;
width: 240px;
margin: 0 0 6px 12px;
background-color: #fff;
padding: 0px;
border: 0px solid #666;
background-image: url(../img/bgpie.gif);
height: 200px;
}
#innerContentColumn .imgizq {
float: left;
margin: 0 16px 6px 0px;
}
Se puede agrupar los selectores siempre que tengan elementos iguales, con lo que se ahorra código. Por ejemplo, con un sólo cambio de color se lo cambias a los dos, o cualquier otro cambio.

Mikel.
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 03:20.