28172 sujets

CSS et mise en forme, CSS3

[résolu] Colonne fluides horizontalement avec bords arrondis

Bonjour à tous,

Après avoir suivi un tutorial permettant d'obtenir une boite décorée fluide horizontalement, je rencontre une petite difficulté avec le "chapeau" de ma boite.

Je m'explique: afin que la boite soit souple verticalement pour permettre de modifier aisément le contenu, je divise la colonne en trois tranches horizontales, dont celles du centre avec un repeat-y.

Le problème est que le repeat-y se prolonge en haut et vient se mélanger à l'image du haut. Mais trève de blabla, voici une illustration pour mieux comprendre tout ça:

Le problème actuel
http://img140.imageshack.us/img140/2593/mauvais.jpg

Tel que ça devrait être
http://img140.imageshack.us/img140/5337/bonaew.jpg

Et le code HTML comprenant le CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Boite avec bordures fluide verticalement</title>
<style type="text/css">
<!--
body {
	background-color:#CCCCCC;
}
.boite {
	width: 300px;
	height:400px;
	background-position: center bottom;
	background-color: white;
	background-image: url(images/caded_m.png);
	background-repeat: repeat-y;
	margin:0;
}
.boite h2 {
	height:50px;
	margin: 0;
	background-position: center top;
	text-align:center;
	background-image: url(images/caded_t.png);
	background-repeat:no-repeat;
}
.boite p {
	margin: 0 20px;
	text-align:justify;
	color:#CCCCCC;
		font-size: 0.8em;
}
.bas {
	margin:0;
	width:300px;
	height:24px;
	background-position:center bottom;
	background-image:url(images/caded_b.png);
	background-repeat:no-repeat;
}
.bas p {
	margin: 0 20px;
	text-align:justify;
}
-->
</style>
</head>
<body>
<div class="boite">
  <h2>TITRE</h2>
       <p>Lorem ipsum duo eius meis ne, vero inimicus ei per. Nec an nobis dolorum patrioque, vide simul in vel, vidit diceret forensibus id per. No his adhuc solum, modo vidisse et vix. Ut wisi aliquid pertinacia duo, at debet luptatum eos. Rebum deserunt comprehensam cu vel, quo platonem voluptaria ea, cu soleat erroribus pri.</p>
    <br>
    <p>Libris sanctus invenire mel ne, cu dicta inimicus splendide eos. Eu cum meis virtute necessitatibus, in sit gloriatur interpretaris. Eu tantas eirmod nusquam nec.</p>
    <br>
    <p>Meis pertinacia pro ut, usu ferri erant atomorum ne, modo dignissim evertitur an pro.</p>
    <br>
</div>
<div class="bas">
  <p>retour en haut de page
  <p> 
</div>
</body>
</html>


Encore une fois la réponse doit être toute bête, mais une fois de plus je cale!

Merci d'avance pour votre aide.
Modifié par Neossir (01 May 2009 - 13:50)
Bonjour,

Les solutions sont les suivantes:

Option 1: faire des images opaques (pas de transparence).
Option 2: faire que les images ne se recouvrent pas (en jouant sur la structure HTML et du padding, voire dans certains cas sur du positionnement relatif mais je ne le conseillerais pas à priori).

Remarques générales:
- le commentaire HTML autour des styles CSS (feuille de styles interne) est une pratique qui n'a plus réellement d'utilité;
- écarter des paragraphes avec des <br>, c'est un non-sens total.
Modifié par Florent V. (29 Apr 2009 - 19:24)
Merci Florent de ta réponse.

Option 1
Je vais tester les images opaques, mais a priori ça fonctionne en transparence en fixe (voir ici), donc pourquoi pas en variable?

Option 2
J'ai essayé, mais comme la partie haute de l'image est intégrée à la balise h, elle même intégrée à la balise principale, en jouant sur les padding/marging les deux éléments bougent en même temps!

laruiss, j'ai testé et sous IE et sous FF, pour les mêmes résultats. Et oui mes PNG sont transparents.
Neossir a écrit :
Option 1
Je vais tester les images opaques, mais a priori ça fonctionne en transparence en fixe (voir ici), donc pourquoi pas en variable?

Parce que les deux ne sont pas du tout construits de la même manière. Dans le premier cas tu as une seule image appliquée en fond à un seul élément, donc forcément tu ne risque pas d'avoir de superposition disgracieuse de deux images de fond (ou d'une même image de fond appliquée différemment à deux éléments).

Ta question revient un peu à demander pourquoi les pommes et les bananes n'ont pas le même gout. Réponse: parce que c'est pas la même chose?

Neossir a écrit :
Option 2
J'ai essayé, mais comme la partie haute de l'image est intégrée à la balise h, elle même intégrée à la balise principale, en jouant sur les padding/marging les deux éléments bougent en même temps!

Comme je le disais, il faut sans doute modifier la structure HTML pour pouvoir appliquer cette solution.
Pour plus de clarté dans l'illustration du problème, j'ai colorisé chacune des trois parties du tableau. Le résultat est visible en ligne ici, ou ci-dessous en capture d'écran.

http://img23.imageshack.us/img23/7287/tricolorrwg.jpg

Effectivement ça fonctionne mieux en JPEG plutôt qu'en PNG transparent (voir là), merci Florent.

"Florent V." a écrit :
Comme je le disais, il faut sans doute modifier la structure HTML pour pouvoir appliquer cette solution.

C'est probablement la solution si je tiens absolument à garder une image transparente (ce qui n'est pas le cas puisque mon site s'appuie sur un fond unie). Mais ça demanderait un peu de recherches et de bidouillages! Je verrai si j'ai le courage de me lancer là-dedans.

Merci encore pour ton aide, je considère le sujet résolu.
Neossir a écrit :
Effectivement ça fonctionne mieux en JPEG plutôt qu'en PNG transparent

Ça marchera du moment qu'il n'y a pas de transparence, et que les images se recouvrent bien sans laisser apparaitre ce qu'il y a derrière. Quant au choix du format, ça peut être du PNG-8, PNG-32 ou JPEG, c'est une simple question d'optimisation. (À vue de nez le PNG-8 est le meilleur choix, mais ce serait à vérifier.)
Pour un fond uni la solution est bien l'image opaque avec la couleur de fond à la place de la transparence.
Mais dés lors que le fond n'est pas uniforme et qu'on a besoin d'utiliser de la transparence les problèmes arrivent puisque qu'à la base le "chapeau" se place au dessus du fond répété dans ce cas la transparence situé sur les coins fera apparaitre le fond de l'image en repeat y (ou x). La solution étant d'utiliser une marge négative mais pour l'avoir testé sur IE6 ça ne marche pas (le chapeau disparait).

Pour ce qui est de la transparence des png sur IE6 un simple JS qu'on trouve un peu partout résout le problème.
Sujet clos
Aller à