Foros del Web » Creando para Internet » CSS »

Problema con posicionamiento DIV PA y HOVER en botones

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

Si no me equivoco no podés poner un elemento de bloque (div) dentro de un elemento de linea (a), o algo parecido.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: botones, hover, posicionamiento
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:03.