Tengo un problema a hora de insertar 2 imagenes en el lateral de una pagina que estoy haciendo.
La foto de la pagina (digo foto porque la pagina en si no existe, se parte de una foto y a partir de ella hay que hacerla) que quiero hacer esta en: http://www.gratisweb.com/bladu/pagin...gina%20CSS.bmp
En esta foto vereis que hay 2 imagenes, las del consorcio w3c, esas imagenes son imagenes clicables y hay que insertarlas en la pagina.
Con las imagenes lo que hice fue capturar la pantalla y editarlas con el paint.
Las fotos de las imagnes estan en :
http://www.gratisweb.com/bladu/pagin.../W3C%20CSS.JPG
http://www.gratisweb.com/bladu/pagin...20XHTML1.0.JPG
Esas imagenes son las que me dan problemas ya que cuando las inserto habiendo cogido las coordenadas de cada una de ellas, me coge la imagen y lo blanco y se descuadra el lateral. Ahi esta el problema, yo solo quiero las imagenes y me coge todo (la imagen y el margen blanco).
Aqui os pongo el codigo que estoy haciendo de la pagina:
Código HTML:
<html> <head> <title>MI SITIO WEB</title> <link rel="STYLESHEET" type="text/css" href="estilos/estilo.css" /> <style type="text/css" ></style> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1> Mi sitio web </h1> </div> <!-- fin de la cabecera--> <div id="cuerpo"> <div id="lateralizqdo" > <ul> <li>Vínculo</li> <li>Vínculo</li> <li>Vínculo</li> <li>Vínculo</li> <li>Vínculo</li> <li>Vínculo</li> <li>Vínculo</li> </ul> </div> <div id="lateraldcho" > <p> Aquí se podría colocar una foto personal, una imagen, anuncios, vínculos más visitados,etc...</p> <table> <tr> <img src="IMG/W3C CSS.JPG" usemap="#FOTO"/> <map name="FOTO"> <area shape="rect" coords="3,7,85,36" href="http://jigsaw.w3.org/css-validator/" alt="pagina de W3c css"/> </map> </tr> <img src="IMG/W3C XHTML1.0.JPG" usemap="#FOTO2"/> <map name="FOTO2"> <area shape="rect" coords="3,0,94,34" href="http://validator.w3.org/check?uri=referer" alt="pagina W3c xhtml 1.0"/> </map> </table> </div> <div id="central"> <h1> Título del contenido</h1> <h2> Subapartado </h2> <p>Escribe algo para rellenar</p> <p>Escribe algo para rellenar</p> <h2> 2ª Subapartado</h2> <h3>Otra sección más pequeña </h3> <p>Escribe algo para rellenar</p> <p>Escribe algo para rellenar</p> <h3>y otra...</h3> <p>Escribe algo para rellenar</p> <p>Escribe algo para rellenar</p> <p>Escribe algo para rellenar</p> </div> </div> <div id="pie"> <h6> Mi sitio web 2006, todo el C_C reservado </h6> </div> </div> </body> </htm>
Código:
BODY
{
background: white;
font-size: 12 pt;
font-family: Times New Roman;
color: black;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
}
h1
{
font-size: 25 pt;
font-family: Times New Roman;
color: black;
text-align: left;
}
h2 {
font-size: 15 pt;
font-family: Times New Roman;
color: black;
text-align: left;
}
h3
{
font-size: 12 pt;
font-family: Times New Roman;
color: black;
text-align: left;
}
h6 {
font-size: 10 pt;
font-family: Times New Roman;
color: black;
}
#cabecera
{
padding: 0px 200px 100px 0px;
border-bottom-style: solid;
}
#lateralizqdo
{
width: 25%;
float: left;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 10px;
}
#lateraldcho
{
width: 25%;
float: right;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 10px;
}
#central
{
width: 60%;
margin-left: 30%;
margin-right: 50%;
}
#pie {
border-top-style: none;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
font-size: 10pt;
text-align: center;
}
Os agradeceria mucho que me ayudarais a resolver este "pequeño problemilla".
Gracias
Un saludo.
