Problema con posicionamiento DIV PA y HOVER en botones

Nicomadreja · #1 (**permalink**) 30/07/2010, 13:34

Buenas! a ver si me pueden ayudar:

Tengo 4 botones los cuales uno es mas grande que otro y estan posicionados uno de bajo de otros con DIV PA. Los botones tienen una sombra paralela por lo cual el recuadro de cada uno es mas grande que el mismo boton. Mi problema es que el recuadro de cada boton por ser mas grande que el boton queda superpuesto con los otros... y al hacer hover por ejemplo en home, hace hover en servicios... les dejo el codigo para que vean mas o menos a lo que me refiero .. espero que me ayuden..

gracias!..

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#body {
    position:relative;
    margin:0px auto;
    width:906px;
    height:718px;
    z-index:1;
    background-image: url(images/bg.png);
    background-repeat: no-repeat;
}
#contenedor {
    position:absolute;
    left:370px;
    top:11px;
    width:530px;
    height:695px;
    z-index:2;
    background-image: url(images/contenido.png);
    background-repeat: no-repeat;
}
#home {
    position:absolute;
    left:233px;
    top:99px;
    width:143px;
    height:143px;
    z-index:2;
    background-image: url(images/home.png);
    background-repeat: no-repeat;
}
#servicios {
    position:absolute;
    left:147px;
    top:160px;
    width:167px;
    height:166px;
    z-index:2;
    background-image: url(images/servicios.png);
    background-repeat: no-repeat;
}
#portafolio {
    position:absolute;
    left:87px;
    top:262px;
    width:188px;
    height:188px;
    z-index:2;
    background-image: url(images/portafolio.png);
    background-repeat: no-repeat;
}
#contacto {
    position:absolute;
    left:90px;
    top:398px;
    width:202px;
    height:202px;
    z-index:2;
    background-image: url(images/contacto.png);
    background-repeat: no-repeat;
}
#home:hover {
    position:absolute;
    left:233px;
    top:99px;
    width:143px;
    height:143px;
    z-index:2;
    background-image: url(images/homehover.png);
    background-repeat: no-repeat;
}
#servicios:hover {
    position:absolute;
    left:147px;
    top:160px;
    width:167px;
    height:166px;
    z-index:2;
    background-image: url(images/servicioshover.png);
    background-repeat: no-repeat;
}
#portafolio:hover {
    position:absolute;
    left:87px;
    top:262px;
    width:188px;
    height:188px;
    z-index:2;
    background-image: url(images/portafoliohover.png);
    background-repeat: no-repeat;
}
#contacto:hover {
    position:absolute;
    left:90px;
    top:398px;
    width:202px;
    height:202px;
    z-index:2;
    background-image: url(images/contactohover.png);
    background-repeat: no-repeat;
}
</style>
</head>
 
<body>
 
 
 
<div id="body">
 
  <a href="index.htm"><div id="contenedor"></div></a>
  <a href="index.htm"><div id="home"></div></a>
  <a href="index.htm"><div id="servicios"></div></a>
  <a href="index.htm"><div id="portafolio"></div></a>
  <a href="index.htm"><div id="contacto"></div></a>
  
</div>
 
 
</body>
</html>

C2am · #2 (**permalink**) 30/07/2010, 18:34

Si no me equivoco no podés poner un elemento de bloque (div) dentro de un elemento de linea (a), o algo parecido.