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.

[zekabyle]

j'ai remis le padding bottom et j'ai diminué le left et right

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 7px 45px 7px;overflow:auto;}

et ça me fait ainsi:


toujours des problèmes de blancs

[sacha69]

Attention tu as trop de padding left et right encore !
Tu as mis ça :
padding:0 7px 0 7px;

et tout à l'heure tu avais ceci :
padding:0 5px 0 5px;

et ça allait presque, mets les à 4px et je pense que ça ira

[zekabyle]

j'ai mis ainsi:

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 4px 45px 4px;overflow:auto;}

et voilà le résultat, y a encore du blanc:

[sacha69]

et si tu les remets à 5px ?

[zekabyle]

ça donne la même chose

y a-t-il quelque chose pour que les deux images s'adaptent à la taille du bloc de texte?

Pour le moment, je suis perdu

[Macmillenium]

Bonjour,

Comme tu as un background positionné tout en haut :

Code css :

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

1
2
 
.blocoffre {background:url(../img/top_bloc_offre.gif) no-repeat top left; }

Et un autre tout en bas:

Code css :

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; }

Les deux sont en no-repeat, on peut supposer alors que la hauteur de top_bloc_offre.gif est tout simplement insuffisante.

[zekabyle]

bien vu ^^

donc la seule solution serait de faire une retouche d'image pour augmenter la hauteur?

[Macmillenium]

donc la seule solution serait de faire une retouche d'image pour augmenter la hauteur?

Ou alors un 3éme conteneur avec un background de 1px dégradé.

[zekabyle]

un div qui entourera .blocoffre et bottomblocoffre avec une autre image qui donnerait un dégradé d'1px?

[Macmillenium]

A l'intérieur de .bottomblocoffre.
Inspire toi de cet exemple : http://macmillenium.e3b.org/arrondis/

[zekabyle]

Merci pour ton aide