Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] evitar que los div se solapen

Estas en el tema de evitar que los div se solapen en el foro de CSS en Foros del Web. hola, lo he intentado de mil maneras pero no de la correcta. el problema es que la imagen no es completamente el enlace que se ...
  #1 (permalink)  
Antiguo 05/03/2013, 16:17
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 20 años
Puntos: 2
evitar que los div se solapen

hola,

lo he intentado de mil maneras pero no de la correcta. el problema es que la imagen no es completamente el enlace que se pretende, es decir, no se activa en enlace en toda la superficie de la imagen, el div que hay a la derecha class=entrablogte ocupa el espacio hacia la izquierda.

por favor, me estoy volviendo loco.

css:
Código CSS:
Ver original
  1. .eblog{position:relative;}
  2. .eblog img{border:0px;}
  3. .eblog{font-family:Capriola,sans-serif;margin:0 0 40px 40px; width:820px; height:350px; padding:10px; overflow:auto; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; float:left;}
  4. .eblog a{outline:none;}
  5.    
  6. .entrablogi{position:relative;width:370px;float:left;}
  7. .entrablogii{position:relative;width:370px;float:left;left:30px;}
  8. .entrabloge{clear:both;margin-bottom:20px;}
  9.    
  10. .entrablogim{position:relative;float:left;}
  11. .entrablogte{position:relative;left:10px;padding:0px 5px;}
  12. .entrablogli{height:5px;}
  13. .entrablogex{font-size:12px;}

html:
Código HTML:
Ver original
  1. <div id="artiblog" class="eblog">
  2.  
  3. <div class="entrablogi">
  4.  
  5. <div class="entrablogim">
  6. <a class="lightbox" data-rel="lightbox" title="" href="">
  7. <div class="post-thumbnail-feed"><img width="150" height="150" src="" class="attachment-thumbnail wp-post-image" alt="" /></div>
  8. </a></div>
  9.                    
  10. <div class="entrablogte">
  11. <div><a href="">enlace</a></div>
  12. <div class="entrablogli"></div>
  13. <div class="entrablogex"></div>
  14. </div>
  15.                
  16. </div>
  17.  
  18. <div class="entrablogii">
  19.  
  20. <div class="entrablogim">
  21. <a class="lightbox" data-rel="lightbox" title="" href="">
  22. <div class="post-thumbnail-feed"><img width="150" height="150" src="" class="attachment-thumbnail wp-post-image" alt="" /></div>
  23. </a>                       
  24. </div>
  25.  
  26. <div class="entrablogte">
  27. <div><a href="" target="_blank">titulo</a></div>
  28. <div class="entrablogli"></div>
  29. <div class="entrablogex">extracto.</div>
  30. </div>
  31.  
  32. </div>
  33.  
  34. </div>

gracias.
  #2 (permalink)  
Antiguo 05/03/2013, 17:34
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 14 años, 5 meses
Puntos: 181
Respuesta: evitar que los div se solapen

Hola,

Trata de quitar position relative al div .entrablogte.


También seria buena idea si pusieras el <a> dentro del div y no fuera.



Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 05/03/2013, 17:49
Avatar de JManuelMV  
Fecha de Ingreso: enero-2013
Ubicación: Apaseo el Alto, Gto, México
Mensajes: 20
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: evitar que los div se solapen

Mira, no se cuanta experiencia tengas en css, yo tampoco soy un experto, pero tener dos clases una entrablogi y la otra entrablogii para el segundo no me parece la mejor opción, ya que al mi parecer estarias agregando un entradablogi por cada uno, lo mejor es usar una sola clase.

Mira le hice unas modificaciones a tu código:

Este es el CSS:

Código CSS:
Ver original
  1. .eblog{position:relative;}
  2. .eblog img{border:none; float: left;}
  3. .eblog{font-family:Capriola,sans-serif;margin:0 0 40px 40px; width:820px; height:350px;  -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
  4. .eblog a{outline:none;}
  5.    
  6. .entrablogi{position:relative;width:370px;float:left; padding: 10px 10px 10px 10px; margin: 5px 5px;}
  7.  
  8. .entrablogim{position:relative;float:left;}
  9. .entrablogte{position:relative;padding:0px 5px; float: left; margin-left: 10px; width: 200px;}
  10.  
  11. .entrablogex{font-size:12px;}

El HTML:

Código HTML:
Ver original
  1. <div id="artiblog" class="eblog">
  2.  
  3.     <div class="entrablogi">
  4.          
  5.         <div class="entrablogim">
  6.            
  7.             <div class="post-thumbnail-feed"><a class="lightbox" data-rel="lightbox" title="" href=""><img width="150" height="150" src="" class="attachment-thumbnail wp-post-image" alt="" />
  8.                     </a>
  9.             </div>
  10.         </div>
  11.                        
  12.         <div class="entrablogte">
  13.             <div><a href="">enlace</a></div>
  14.             <div class="entrablogli"></div>
  15.             <div class="entrablogex"></div>
  16.         </div>
  17.                    
  18.     </div>
  19.  
  20.     <div class="entrablogi">
  21.          
  22.         <div class="entrablogim">
  23.            
  24.             <div class="post-thumbnail-feed"><a class="lightbox" data-rel="lightbox" title="" href=""><img width="150" height="150" src="" class="attachment-thumbnail wp-post-image" alt="" />
  25.                     </a>
  26.             </div>
  27.         </div>
  28.                        
  29.         <div class="entrablogte">
  30.             <div><a href="">enlace</a></div>
  31.             <div class="entrablogli"></div>
  32.             <div class="entrablogex"></div>
  33.         </div>
  34.                    
  35.     </div>
  36. </div>

Es la forma en la que lo haria yo, espero te sirva de guia
  #4 (permalink)  
Antiguo 06/03/2013, 05:16
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 20 años
Puntos: 2
Respuesta: evitar que los div se solapen

hola:

Cita:
Iniciado por pitufoweb Ver Mensaje
Trata de quitar position relative al div .entrablogte.
También seria buena idea si pusieras el <a> dentro del div y no fuera.
Saludos
gracias, (no lo veía), queda perfecto, sólo quitando position:relative de .entrablogte:

Código CSS:
Ver original
  1. .entrablogim{position:relative;float:left;margin:0px 10px 0px 0px}
  2. .entrablogte{padding:0px 5px;}

un saludo,
josé carlos.
  #5 (permalink)  
Antiguo 06/03/2013, 05:21
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 20 años
Puntos: 2
Respuesta: evitar que los div se solapen

hola,

utilizar el segundo div con class="entrablogii es para marcar una separación entre ambos div, entrablogi y entrablogii

un saludo,
josé carlos.
  #6 (permalink)  
Antiguo 06/03/2013, 10:01
Avatar de JManuelMV  
Fecha de Ingreso: enero-2013
Ubicación: Apaseo el Alto, Gto, México
Mensajes: 20
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: evitar que los div se solapen

Cita:
Iniciado por evoarte Ver Mensaje
hola,



utilizar el segundo div con class="entrablogii es para marcar una separación entre ambos div, entrablogi y entrablogii

un saludo,
josé carlos.

Ok, entiendo lo que quieres hacer, aunque siento que solo con ponerle los estilos adecuados a entrablogi bastaría, ya que viéndolo de una forma estas repitiendo código.

Por cierto, disculpa si el otro mensaje sono un poco brusco jeje, eso de expresarse de manera escrita no se me da en ocaciones.
  #7 (permalink)  
Antiguo 06/03/2013, 10:30
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 20 años
Puntos: 2
Respuesta: evitar que los div se solapen

hola,

Cita:
Iniciado por JManuelMV Ver Mensaje
Por cierto, disculpa si el otro mensaje sono un poco brusco jeje, eso de expresarse de manera escrita no se me da en ocaciones.
gracias por tu tiempo.

un saludo,
josé carlos.

Etiquetas: divs
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 21:09.