Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/01/2008, 07:59
bladu
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Ayuda!! Problema a hora de insertar imagenes en un lateral

Hola!

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> 
Y aqui os pongo el de los estilos:

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.