[SOLUCIONADO] evitar que los div se solapen

[evoarte]

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:

.eblog{position:relative;}
.eblog img{border:0px;}
.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;}
.eblog a{outline:none;}
    
.entrablogi{position:relative;width:370px;float:left;}
.entrablogii{position:relative;width:370px;float:left;left:30px;}
.entrabloge{clear:both;margin-bottom:20px;}
    
.entrablogim{position:relative;float:left;}
.entrablogte{position:relative;left:10px;padding:0px 5px;}
.entrablogli{height:5px;}
.entrablogex{font-size:12px;}
 

html:

Código HTML:

<div id="artiblog" class="eblog">
 
<div class="entrablogi">
 
<div class="entrablogim">
<a class="lightbox" data-rel="lightbox" title="" href="">
<div class="post-thumbnail-feed"><img width="150" height="150" src="" class="attachment-thumbnail wp-post-image" alt="" /></div>
</a></div>
                    
<div class="entrablogte">
<div><a href="">enlace</a></div>
<div class="entrablogli"></div>
<div class="entrablogex"></div>
</div>
                
</div>
 
<div class="entrablogii">
 
<div class="entrablogim">
<a class="lightbox" data-rel="lightbox" title="" href="">
<div class="post-thumbnail-feed"><img width="150" height="150" src="" class="attachment-thumbnail wp-post-image" alt="" /></div>
</a>                        
</div>
 
<div class="entrablogte">
<div><a href="" target="_blank">titulo</a></div>
<div class="entrablogli"></div>
<div class="entrablogex">extracto.</div>
</div>
 
</div>
 
</div>
 

gracias.

[pitufoweb]

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

[JManuelMV]

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:

.eblog{position:relative;}
.eblog img{border:none; float: left;}
.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; }
.eblog a{outline:none;}
    
.entrablogi{position:relative;width:370px;float:left; padding: 10px 10px 10px 10px; margin: 5px 5px;}
 
.entrablogim{position:relative;float:left;}
.entrablogte{position:relative;padding:0px 5px; float: left; margin-left: 10px; width: 200px;}
 
.entrablogex{font-size:12px;}
 

El HTML:

Código HTML:

<div id="artiblog" class="eblog">
 
    <div class="entrablogi">
         
        <div class="entrablogim">
            
            <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="" />
                    </a>
            </div>
        </div>
                        
        <div class="entrablogte">
            <div><a href="">enlace</a></div>
            <div class="entrablogli"></div>
            <div class="entrablogex"></div>
        </div>
                    
    </div>
 
    <div class="entrablogi">
         
        <div class="entrablogim">
            
            <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="" />
                    </a>
            </div>
        </div>
                        
        <div class="entrablogte">
            <div><a href="">enlace</a></div>
            <div class="entrablogli"></div>
            <div class="entrablogex"></div>
        </div>
                    
    </div>
</div>
 

Es la forma en la que lo haria yo, espero te sirva de guia

[evoarte]

hola:

Iniciado por pitufoweb

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:

.entrablogim{position:relative;float:left;margin:0px 10px 0px 0px}
.entrablogte{padding:0px 5px;}
 

un saludo,
josé carlos.

[evoarte]

hola,

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

un saludo,
josé carlos.

[JManuelMV]

Iniciado por evoarte

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.

[evoarte]

hola,

Iniciado por JManuelMV

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.