18041 sujets

Questions générales et questions de débutants

Cadre arrondi extensible en hauteur

Bonjour,

Je suis en train de tester les cadres arrondis à largeur fixe extensible en hauteur.
J'ai toujours une ligne blanche qui apparait entre mon image de haut de cadre et celle de bas de cadre. Ca ne vient pas des images et je ne voit pas bien d'ou cela peut venir ...

Merci

div#cadre {  /* conteneur global et chapeau de l?arrière-plan */
width: 690px;
padding-top: 45px;
background: url(haut.png) left top no-repeat;
}
div#bloccadre {  /* bords et pied de l?arrière-plan */
background: url(bas.png) left bottom no-repeat;
margin:0px;
padding-bottom: 45px;
}
div#bloccadre p {
margin: 0 45px 0 20px; font-size:10px;
}


<body>
<div id="cadre">
<div id="bloccadre">
<p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p><p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p><p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p><p>Lorem ipsum dolor sit amet, ?</p>
<p>Lorem ipsum dolor sit amet, ?</p>
</div>
</div>
</body>
upload/15062-test.png
le haut upload/15062-haut.png
le bas upload/15062-bas.png
Modifié par popovitch (08 Mar 2008 - 19:57)
Bonjour,

Hmm... en lisant ton code je ne comprends pas comment ça peut donner la capture d'écran que tu montres. Je trouve ça étrange. Il ne manque pas une partie du code? On pourrait voir une page en ligne, pour que ça soit plus simple?

Sinon, j'aurais tendance à mettre l'image de fond la plus «globale» sur le bloc le plus externe (ici div#cadre), et l'image la plus réduite (celle du haut) sur le bloc interne (ici div#bloccadre). C'est ce que je fais dans l'exemple suivant:
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

En fait comme tu fais l'inverse je n'arrive pas à comprendre que ça puisse marcher. Ok, le padding du haut empêche le recouvrement de l'image du haut par celle du milieu-bas, mais...

... ah ok j'ai compris. C'est ton image du milieu-bas qui est trop courte, tout bêtement. L'image fait 213px de haut, mais tu as une surface à couvrir qui est un peu plus grande. Et si tu avais un contenu beaucoup plus important, il te faudrait une image d'autant plus grande. Cf. celle que j'utilise dans mon exemple (image prévue pour des contenus relativement courts): 600px de haut. Pour un conteneur global de page, ça devient difficile de travailler avec une seule image, et mieux vaut séparer les images du haut, du milieu (répétée en hauteur) et du bas.
Bien vu chef ! c'était ça, il manquait quelques pixels en hauteur pour l'image du bas, j'ai un peu honte de pas l'avoir vu ... mais ce post ne sera pas inutile car j'ai encore 2 petites questions :

a écrit :
Et si tu avais un contenu beaucoup plus important, il te faudrait une image d'autant plus grande.
Pour une boite avec un dégradé de ce type il faudra donc créer N variantes de la classe blockCadre pour N taille de boite ? Il y a une autre méthode usuelle pour ce genre de boite (à part utiliser un dégradé horizontal) ?

a écrit :

Pour un conteneur global de page, ça devient difficile de travailler avec une seule image, et mieux vaut séparer les images du haut, du milieu (répétée en hauteur) et du bas.

Dans le cas présent, l'image du milieu peut être répétable en Y à condition que ma boite ai toujours la même taille ...

Merci de votre aide Smiley smile
Sujet clos
Aller à