Discussion :

[zekabyle]

Bonjour,

j'ai un problème avec mes div quand un texte est très rempli.

Voilà le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="blocoffre clearing">
                <div class="bottomblocoffre">
                    <a href="#" ><img src="img/pic_bloc_offre.jpg" width="88px" height="80px" alt="" title="" /></a>
                    <div>
                        <h2>
                            <a href="#" class="colormessagerie">Un projet incroyable</a>
                        </h2>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
                        <a href="#" class="suite color5">Suite</a>
                    </div>
                </div>
            </div>

et le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.blocoffre {background:url(../img/top_bloc_offre.gif) no-repeat top left;width:538px;padding-top:10px;margin-left:10px;}
.blocoffre .bottomblocoffre {position:relative;background:url(../img/bottom_bloc_offre.gif) no-repeat bottom left;padding:0 10px 45px 10px;}
.blocoffre .bottomblocoffre img {position:absolute;}
.blocoffre .bottomblocoffre div {padding:0 15px 0 100px;line-height:16px;}
.blocoffre h2,.blocarticle h2, .blocarticle2 h2 {margin:0 0 3px 0;}
.blocoffre h2 a,.blocarticle h2 a,.blocarticle2 h2 a {text-decoration:none;}
.blocoffre h2 a:hover,.blocarticle h2 a:hover,.blocarticle2 h2 a:hover {text-decoration:underline;}

voilà la forme:


c'est la même chose sous IE 8 et firefox

Merci d'avance pour votre aide

[tibotibo69]

Essaye avec un "overflow: auto;" sur ta div .bottomblocoffre

[zekabyle]

j'ai mis overflow ici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.blocoffre .bottomblocoffre {position:relative;background:url(../img/bottom_bloc_offre.gif) no-repeat bottom left;padding:0 10px 45px 10px;overflow:auto;}

ça n'a rien changé T_T

j'ai l'impression que ce sont les images top_bloc_offre.gif et bottom_boc_offre.gif qui se séparent quand le texte est trop grand, comment faudrait faire pour résoudre ce problème?

[sacha69]

Essayes de jouer avec tes padding, en les réduisant, sinon essayes de mettre des margin à la place. Ton problème est que les largeurs sont trop grandes et ça masque ton image.

[zekabyle]

j'ai mis ainsi en diminuant mon padding , il n'y a quasiment plus de blanc il reste 1 pixel de blanc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.blocoffre .bottomblocoffre {position:relative;background:url(../img/bottom_bloc_offre.gif) no-repeat bottom left;padding:0 5px 0 5px;overflow:auto;}

le problème est que le texte dépasse totalement du div et que s'il y a d'autres div avec plus bas ça donne une horreur que je vous laisse regarder ici:

[sacha69]

Tu as changé ton padding-bottom d'où le fait que le texte sorte du div, remet le comme il était, c'est juste sur les padding left et right qu'il fallait faire des modif.