Hola...
Tengo el siguiente código html
Código HTML:
<html>
<head>
<title>Angelus Books. The Best Books That I Read</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link href="/Libreria/Vista/CSS/cabecera.css" rel="stylesheet" type="text/css"/>
<link href="/Libreria/Vista/CSS/buscar.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<!-- Elementos contenidos en el header -->
</header>
<section>
<div>
<center>
<table id="tresultado">
<tr class="tr">
<td class="td"><img id="portada" src="imagen1.jpg>
<br />Nombre imagen 1</td>
<td class="td"><img id="portada" src="imagen2.jpg>
<br />Nombre imagen 2</td>
<td class="td"><img id="portada" src="imagen3.jpg>
<br />Nombre imagen 3</td>
<td class="td"><img id="portada" src="imagen4.jpg>
<br />Nombre imagen 4</td>
</tr>
</table>
</center>
</div>
</section>
</body></html> A ese código le aplico los siguientes estilos css
Código CSS:
Ver original#tresultado{
background-color: #5C5CA3;
}
.tr{
background-color: #5C5CA3;
width: auto;
height: 150px;
}
.td{
background-color: #5C5CA3;
width: 100px;
height: auto;
position: relative;
top: 110px;
}
#portada{
width: 100px;
height: 150px;
}
El problema es que las imágenes quedan por fuera de la tabla, y yo necesito que la tabla sea exactamente del tamaño de las figuras incluido sus respectivos nombres. He intentado cambiándole las propiedades width y height a todos los elementos incluida la misma tabla, y aun no logro conseguirlo.
De antemano, gracias por su ayuda.