Pie de foto

[zeres]

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.

#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.

[zeres]

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í

#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

[Mikmoro]

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.