Foros del Web » Creando para Internet » CSS »

Problema con absolute

 Estas en el tema de Problema con absolute en el foro de CSS en Foros del Web. jelou!!! @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < form method = "post" action = "admin_ec_pedidos.asp?proceso=updatecabped" >                   ...
  #1 (permalink)  
Antiguo 14/11/2013, 08:31
 
Fecha de Ingreso: diciembre-2010
Mensajes: 236
Antigüedad: 13 años, 4 meses
Puntos: 6
Problema con absolute
jelou!!!

Código HTML: 
Ver original
  1. <form method="post" action="admin_ec_pedidos.asp?proceso=updatecabped">
  2.                     <fieldset>
  3.                         <dl>
  4.                             <dt>
  5.                                 Datos del pedido
  6.                             </dt>
  7.                             <dd>
  8.                                 <p>
  9.                                     <label>Número de pedido</label>
  10.                                     <input type="text" name="id" size="35" value="27" readonly="readonly">
  11.                                     <span>Realizado a través de la Ip: 84.122.173.38</span>
  12.                                 </p>
  13.                                 <p>
  14.                                     <label>Fecha</label>
  15.                                     <input type="text" name="fecha_ped" size="35" value="13/11/2013" id="datepicker" class="hasDatepicker">
  16.                                     <span>Fecha exacta inicial: 13/11/2013 12:59:52</span>
  17.                                 </p>
  18.                                 <p>
  19.                                     <label>Referencia Cliente</label>
  20.                                     <input type="text" name="su_referencia" size="35" value="-">
  21.                                 </p>
  22.                             </dd>
  23.                             
  24.                             <dd>
  25.                                 <p class="admin_dl_dd_p">
  26.                                     <label>Datos de facturación</label>
  27.                                     <span>
  28.                                         Isaacperal22 SL<br>B41258963<br>Calle Isaac Peral Nº 22<br>Casa Planta Baja<br>21002<br>Huelva<br>Huelva<br>España<br>
  29.                                     </span>
  30.                                     <cite>
  31.                                         <b>Modifique los datos para este pedido</b>
  32.                                     </cite>
  33.                                 </p>
  34.                                 <p class="admin_dl_dd_p">
  35.                                     <label>Datos de envío</label>
  36.                                     <span>
  37.                                         Fermín Burrero González<br>Urb. Rústica El Pintado<br>Parcela 52<br>21500<br>Gibraleon<br>Huelva<br>España<br>
  38.                                     </span>
  39.                                     <cite>
  40.                                         <b>Modifique los datos para este pedido</b>
  41.                                     </cite>
  42.                                 </p>
  43.                             </dd>
  44.                             <dd>
  45.                                 <p>
  46.                                     <label>Base Imponible</label>
  47.                                     <input type="text" name="bimponible" size="35" value="64,07" readonly="readonly">
  48.                                 </p>
  49.                                 <p>
  50.                                     <label>IVA Aplicado 21</label>
  51.                                     <input type="text" name="iva_aplicado" size="35" value="13,45" readonly="readonly">
  52.                                 </p>
  53.                                 <p>
  54.                                     <label>Total del pedido</label>
  55.                                     <input type="text" name="total_pedido" size="35" value="77,52" readonly="readonly">
  56.                                 </p>
  57.                             
  58.                             </dd>
  59.                             <dt><input type="submit" value="Modificar pedido" name="Boton"></dt>
  60.                         </dl>
  61.                     </fieldset> 
  62.                     </form>

Código CSS: 
Ver original
  1. .admin dl {
  2.     border: solid 1px #026ac2;
  3.     border-radius: 3px;
  4.     background: #fff;   
  5.     display: block;
  6.     margin: 10px;
  7.     box-shadow: 0px 0px 7px 0px #d5d5d5;
  8.     min-width: 250px;
  9.     background: rgb(255,255,255); /* Old browsers */
  10.     background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* FF3.6+ */
  11.     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(242,242,242,1))); /* Chrome,Safari4+ */
  12.     background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* Chrome10+,Safari5.1+ */
  13.     background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* Opera 11.10+ */
  14.     background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* IE10+ */
  15.     background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* W3C */
  16.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  17.     
  18. }
  19. .admin dl > dt{
  20.     background: #026ac2;
  21.     border-bottom: solid 1px #026ac2;
  22.     padding: 7px 10px;
  23.     color: #fff;
  24.     font-family: "Trebuchet MS", Arial, sans-serif;
  25.     font-size: 1.2em;
  26.     font-weight: bold;
  27.     text-shadow: 0 -1px 0 #026ac2;
  28.     box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  29.     border-radius: 2px 2px 0 0;
  30.     background-image: linear-gradient(bottom, #026ac2 0%, #54a2e5 100%);
  31.     background-image: -o-linear-gradient(bottom, #026ac2 0%, #54a2e5 100%);
  32.     background-image: -moz-linear-gradient(bottom, #026ac2 0%, #54a2e5 100%);
  33.     background-image: -webkit-linear-gradient(bottom, #026ac2 0%, #54a2e5 100%);
  34.     background-image: -ms-linear-gradient(bottom, #026ac2 0%, #54a2e5 100%);
  35.     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #026ac2 ), color-stop(1, #54a2e5));
  36.  
  37. }
  38. .admin dl > dt > input{
  39.     font-family: Arial, Helvetica, sans-serif;
  40.     font-size: 1.2em;
  41.     -webkit-border-radius: 4px;
  42.     border-radius: 4px;
  43.     border: 1px solid #949494;
  44.     -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1);
  45.     -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1);
  46.     box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1);
  47.     text-shadow: 0px -1px 0px rgba(000,000,000,0.1), 0px 1px 0px rgba(255,255,255,1);
  48. }
  49. .admin dl > dt > input:hover{
  50.     color: #f06000;
  51. }
  52. .admin dl dd{
  53.     padding: 5px;
  54.     border-bottom: solid 1px #dedede;
  55.     overflow: auto;
  56.     margin: 5px;
  57. }
  58.  
  59. .admin dl > dd > div{
  60.     border: 1px #808080 dashed;
  61.     margin: 10px 20px;
  62.     color: #646464;
  63.     display: inline-block;
  64.     background-color: #fffedb;
  65.     padding: 25px;
  66.     width:87%
  67. }
  68.  
  69.  
  70. .admin dl > dd > p{
  71.     float:left;
  72.     margin:10px;
  73.     position: relative;
  74. }
  75. .admin_dl_dd_p{
  76.     width:45%;
  77. }
  78.  
  79. .admin dl > dd > p > cite{
  80.     Display:none;
  81.     top:100%;
  82.     left: 0;
  83.     position: absolute;;
  84.     border: solid 1px #026ac2;
  85.     border-radius: 3px;
  86.     box-shadow: 0px 0px 7px 0px #d5d5d5;
  87.     background: rgb(255,255,255);
  88.     background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
  89.     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(242,242,242,1)));
  90.     background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
  91.     background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
  92.     background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
  93.     background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
  94.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 );    
  95.     padding:10px;
  96.     min-width:180px;
  97.     min-height:50px;
  98.     z-index:1;
  99. }
  100. .admin dl > dd > p:hover > cite{
  101.     Display:block;
  102. }
  103.  
  104.  
  105. .admin dl > dd > p > label{
  106.     font-weight: bold;
  107.     display:block;
  108.  
  109. }
  110.  
  111. .admin dl > dd > p > span{
  112.     font-style: italic ;
  113.     color:#A0A0A0;
  114.     display:block;
  115. }
  116. .admin dl > dd > p > img{
  117.     display: block;
  118.     max-width:400px;
  119. }

El problema es que tengo etiquetas cite que quiero que se vean al pasar por el párrafo, y lo hace, pero queda por debajo del siguiente dd, ya he probado con el z-index y nada ¿qué ocurre?
  #2 (permalink)  
Antiguo 14/11/2013, 08:32
 
Fecha de Ingreso: diciembre-2010
Mensajes: 236
Antigüedad: 13 años, 4 meses
Puntos: 6
Respuesta: Problema con absolute
en los cite irían los formularios que modificación, que aún no lo he hecho.

si le pongo al cite position: relative; lo que hace es agrandar y viceversa el DD, pero visualmente no me gusta, quiero que quede por encima cuando aparezca.
  #3 (permalink)  
Antiguo 14/11/2013, 10:20
 
Fecha de Ingreso: diciembre-2010
Mensajes: 236
Antigüedad: 13 años, 4 meses
Puntos: 6
Respuesta: Problema con absolute
Código CSS: 
Ver original
  1. .admin dl dd{
  2.     padding: 5px;
  3.     border-bottom: solid 1px #dedede;
  4.     margin: 5px;
  5.     display: flex;
  6. }

lo he solucionado así, pero me temo que dará problemas de compatibilidad.
  #4 (permalink)  
Antiguo 14/11/2013, 12:57
 
Fecha de Ingreso: diciembre-2010
Mensajes: 236
Antigüedad: 13 años, 4 meses
Puntos: 6
Respuesta: Problema con absolute
me descuadra el resto de formularios con la misma clase, alguien sabe por qué el cite queda por debajo?

Etiquetas: position
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


« Tema Anterior | Próximo Tema »


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