Ver Mensaje Individual
  #16 (permalink)  
Antiguo 02/10/2013, 13:23
PabloManuel
 
Fecha de Ingreso: diciembre-2010
Mensajes: 236
Antigüedad: 13 años, 11 meses
Puntos: 6
Respuesta: Centrar imagen en un div que es más pequeño.

pero como una cosa tan tonta puede ser tan complicada.

clase entera:

Código CSS:
Ver original
  1. .ec_div_art {
  2.     width:176px;
  3.     margin: 4px 2px;
  4.     position:relative;
  5.     overflow:hidden;
  6.     float:left;
  7.     min-height:325px;
  8. }
  9. .ec_div_art:hover{
  10.     box-shadow: 0px 0px 10px 0px #777777;
  11.     border-radius:5px;
  12.  
  13. }
  14. .ec_div_art>p{
  15.     font: normal normal bold 1.3em verdana;
  16.     display: block;
  17.     position: absolute;
  18.     top: 5px;
  19.     left: 5px;
  20.     margin: 0;
  21.     padding: 0;
  22.     width: 64px;
  23.     height: 64px;
  24.     background: url('Images_sys/ico64_oferta.png') no-repeat left;
  25.     line-height: 55px;
  26.     color: white;
  27.     z-index: 2;
  28.     text-indent: 24px;
  29.     opacity:0.8;   
  30. }
  31. .ec_div_art > span{
  32.     display: none;
  33.     position: absolute;
  34.     top: 5px;
  35.     right: 5px;
  36.     margin: 0;
  37.     padding: 0;
  38.     width: 32px;
  39.     height: 32px;
  40.     line-height: 55px;
  41.     z-index: 3;
  42. }
  43.  
  44. .ec_div_art:hover > span{
  45.     display:block;
  46. }
  47.  
  48. .ec_div_art > a > img{
  49.     display: block;
  50.     max-height: 176px;
  51.     z-index:1;
  52.  
  53. }
  54. .ec_div_art>div{
  55.     display:none;
  56.     position:absolute;
  57.     bottom: 150px;
  58.     left: 5px;
  59.     z-index:3;
  60. }
  61. .ec_div_art:hover > div{
  62.     display:block;
  63. }
  64. .ec_div_art > div > ul{
  65.     list-style: none;
  66.     color:white;
  67.  
  68. }
  69. .ec_div_art > div > ul li{
  70.     line-height:20px;
  71.     background-color:black;
  72.     margin:3px;
  73.     padding:2px;
  74.     border-radius:3px;
  75.     font-size: 0.9em;
  76.    
  77. }
  78.  
  79. .ec_div_art > ul{
  80.     text-align:center;
  81.     position:absolute;
  82.     bottom:5px;
  83.     padding: 2px;
  84. }
  85.  
  86. .ec_div_art > ul li{
  87.     margin:10px 0;
  88. }
  89.  
  90. .ec_div_art > ul li span{
  91.     text-decoration:line-through;
  92. }
  93.  
  94. .ec_div_art > ul li p{
  95.     font-size:1.2em;
  96.     font-weight:bold;
  97. }

y este es el sub que va haciendo las "cajitas" de los artículos:
Código ASP:
Ver original
  1. <%
  2. Sub EC_formatoart_1 ()
  3.     %>
  4.     <div class="ec_div_art">
  5.         <%
  6.         'Muestra el icono de la oferta con el porcentaje.
  7.         If MatrizPVP(2) <> 0 Then
  8.             %>
  9.             <p><%=MatrizPVP(2)%>%</p>
  10.             <%
  11.         End If
  12.  
  13.         If ComprobarLogico("EC_Config", "VendersinStock", "Idreg=1") = 1 Or Rs("Stock") > 0 Then
  14.             %>
  15.             <span><a href="<%=Nombre_Pagina%>?proceso=addcesta&id=<%=Rs("Id")%>"><img title="Añadir a la cesta" alt="Añadir a la cesta" src="images_sys/ico32_cesta.png" /></a></span>
  16.             <%
  17.         End If
  18.        
  19.        
  20.         %>
  21.         <a href="<%=Nombre_Pagina%>?proceso=verficha&id=<%=Rs("Id")%>"><img alt="Foto 1" src="<%=ExisteFoto("FotosART", Rs("Id") & "1.jpg")%>" /></a>
  22.         <div>
  23.             <ul>
  24.                 <%
  25.                 'Muestra las características al pasar si las hay.
  26.                 If Rs("Fabricante") <> 1 Then Response.Write "<li>Fabricante: " & ComprobarLogico("EC_Fabricante", "Nombre", "Id=" & Rs("Fabricante")) & "</li>"
  27.                 If Rs("Talla") <> 1 Then Response.Write "<li>Talla: " & ComprobarLogico("EC_Talla", "Nombre", "Id=" & Rs("Talla")) & "</li>"
  28.                 If Rs("Color") <> 1 Then Response.Write "<li>Color: " & ComprobarLogico("EC_Color", "Nombre", "Id=" & Rs("Color")) & "</li>"
  29.                 %>
  30.             </ul>
  31.         </div>
  32.         <ul>
  33.             <li><b>[<%=Rs("Codigo")%>]</b><%=Rs("Descripcion")%></li>
  34.             <%
  35.             If MatrizPVP(2) <> 0 Then
  36.                 %>
  37.                 <li><p><span><%=Precio%></span></p></li>
  38.                 <li><p><%=PrecioDTO%></p></li>
  39.                 <%
  40.             Else
  41.                 %>
  42.                 <li><p><%=Precio%></p></li>
  43.                 <%
  44.             End If
  45.             %>
  46.            
  47.             <li title="<%=MatrizPorte(2)%>">(Envío <%=PorteUser%>)</li>
  48.             <%
  49.             'Muestra el stock si hay control de existencias.
  50.             If ComprobarLogico("EC_Config", "VendersinStock", "Idreg=1") = O Then
  51.                 %>
  52.                 <li>
  53.                     <%
  54.                     If EC_ObtenerStock(Rs("Id")) > 1 Then
  55.                         Response.Write "Quedan " & EC_ObtenerStock(Rs("Id")) & " Unidades"
  56.                     ElseIf EC_ObtenerStock(Rs("Id")) = 1 Then
  57.                         Response.Write "Queda " & EC_ObtenerStock(Rs("Id")) & " Unidad"
  58.                     ElseIf EC_ObtenerStock(Rs("Id")) < 1 Then
  59.                         Response.Write "Sin Existencias"
  60.                     End IF
  61.                     %>
  62.                 </li>
  63.                 <%
  64.             End If
  65.             %>
  66.         </ul>
  67.    
  68.     </div> 
  69.    
  70.     <%
  71. End Sub
  72. %>