Tema: Problema con posicionamiento DIV PA y HOVER en botones
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/07/2010, 13:34
Nicomadreja
 
Fecha de Ingreso: marzo-2009
Mensajes: 35
Antigüedad: 15 años, 8 meses
Puntos: 0
Problema con posicionamiento DIV PA y HOVER en botones
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin título</title>
  6. <style type="text/css">
  7. #body {
  8.     position:relative;
  9.     margin:0px auto;
  10.     width:906px;
  11.     height:718px;
  12.     z-index:1;
  13.     background-image: url(images/bg.png);
  14.     background-repeat: no-repeat;
  15. }
  16. #contenedor {
  17.     position:absolute;
  18.     left:370px;
  19.     top:11px;
  20.     width:530px;
  21.     height:695px;
  22.     z-index:2;
  23.     background-image: url(images/contenido.png);
  24.     background-repeat: no-repeat;
  25. }
  26. #home {
  27.     position:absolute;
  28.     left:233px;
  29.     top:99px;
  30.     width:143px;
  31.     height:143px;
  32.     z-index:2;
  33.     background-image: url(images/home.png);
  34.     background-repeat: no-repeat;
  35. }
  36. #servicios {
  37.     position:absolute;
  38.     left:147px;
  39.     top:160px;
  40.     width:167px;
  41.     height:166px;
  42.     z-index:2;
  43.     background-image: url(images/servicios.png);
  44.     background-repeat: no-repeat;
  45. }
  46. #portafolio {
  47.     position:absolute;
  48.     left:87px;
  49.     top:262px;
  50.     width:188px;
  51.     height:188px;
  52.     z-index:2;
  53.     background-image: url(images/portafolio.png);
  54.     background-repeat: no-repeat;
  55. }
  56. #contacto {
  57.     position:absolute;
  58.     left:90px;
  59.     top:398px;
  60.     width:202px;
  61.     height:202px;
  62.     z-index:2;
  63.     background-image: url(images/contacto.png);
  64.     background-repeat: no-repeat;
  65. }
  66. #home:hover {
  67.     position:absolute;
  68.     left:233px;
  69.     top:99px;
  70.     width:143px;
  71.     height:143px;
  72.     z-index:2;
  73.     background-image: url(images/homehover.png);
  74.     background-repeat: no-repeat;
  75. }
  76. #servicios:hover {
  77.     position:absolute;
  78.     left:147px;
  79.     top:160px;
  80.     width:167px;
  81.     height:166px;
  82.     z-index:2;
  83.     background-image: url(images/servicioshover.png);
  84.     background-repeat: no-repeat;
  85. }
  86. #portafolio:hover {
  87.     position:absolute;
  88.     left:87px;
  89.     top:262px;
  90.     width:188px;
  91.     height:188px;
  92.     z-index:2;
  93.     background-image: url(images/portafoliohover.png);
  94.     background-repeat: no-repeat;
  95. }
  96. #contacto:hover {
  97.     position:absolute;
  98.     left:90px;
  99.     top:398px;
  100.     width:202px;
  101.     height:202px;
  102.     z-index:2;
  103.     background-image: url(images/contactohover.png);
  104.     background-repeat: no-repeat;
  105. }
  106. </style>
  107. </head>
  108.  
  109. <body>
  110.  
  111.  
  112.  
  113. <div id="body">
  114.  
  115.   <a href="index.htm"><div id="contenedor"></div></a>
  116.   <a href="index.htm"><div id="home"></div></a>
  117.   <a href="index.htm"><div id="servicios"></div></a>
  118.   <a href="index.htm"><div id="portafolio"></div></a>
  119.   <a href="index.htm"><div id="contacto"></div></a>
  120.   
  121. </div>
  122.  
  123.  
  124. </body>
  125. </html>