Résolu : Faire un cadre arrondi ou graphique en CSS et XHTML Deuxième

Bonjour,

concernant l'article Faire un cadre arrondi ou graphique en CSS et XHTML Deuxième cas : un cadre totalement fluide

Sur les images de description on voit nettement que le texte est écrit au dessus des coins, notament au dessus du coin Haut Gauche.

Lorsque l'on clique sur le lien en fin d'article http://www.alsacreations.com/articles/cadre/cadre2/tuto.htm on s'apercoit que le texte ne peut etre ecrit au dessus des coins et qu'on a un effet de padding de la dimension des coins.

il y a-t-il une solution pour éviter ce phénomène ?

Merci

Titanic
Modifié par Titanic (20 Feb 2007 - 18:31)

On peut utiliser quatre images et les positionner en absolu à l'intérieur d'un blog lui-même positionné (soit en absolu, soit en fixe, soit en relatif... le cas le plus probable sera l'utilisation d'un position: relative).

[b]HTML :[/b]
<div id="arrondi">
	<img class="coin haut gauche" src="coin-haut-gauche.png" alt="" />
	<img class="coin haut droite" src="coin-haut-droite.png" alt="" />
	<img class="coin bas gauche" src="coin-bas-gauche.png" alt="" />
	<img class="coin bas droite" src="coin-bas-droite.png" alt="" />

	Bla bla le contenu...
</div>

[b]CSS :[/b]
div#arrondi {
	position: relative;
}
div#arrondi img.coin {
	position: absolute;
}
div#arrondi img.haut {top: 0;}
div#arrondi img.bas {bottom: 0;}
div#arrondi img.gauche {left: 0;}
div#arrondi img.droite {right: 0;}

Je fais ça de tête, mais ça devrait être bon.

J'utilise des images avec attribut alt vide... parce que c'est pas plus mal qu'autre chose, en fait. Si vraiment ça dérange, on peut faire des span avec dimensions fixes en pixels et image de fond, mais après c'est moins marrant pour s'amuser avec les classes multiples.

Ah oui, les classes multiples : trois classes par image, les classes dans le code HTML sont séparées par des espaces. C'est tout à fait valide (je précise, au cas où), et à ma connaissance ça ne pose pas de problème aux navigateurs divers et variés.

Une fois qu'on a fait tout ça, on aura peut-être un problème de z-index, par contre. Ça demandera peut-être d'englober le contenu de div#arrondi (hors les petites images) dans un conteneur positionné (lui aussi en relatif, à priori). Bon, ça commencera à faire beaucoup de conteneurs positionnés, tout ça.

Merci Florent pour ce code, le padding est bien enlevé...
Mais un nouveau problème apparait : les images sont au dessus du texte maintenant...

Quelqu'un a-t-il une idée ?
Merci
Titanic

Deux solutions :

1. Prendre des images de coins relativement petites, et utiliser des espacements internes (en haut et en bas, ou bien sur les côtés, ou bien les deux) pour que le texte ne soit pas collé aux bords/coins. Si ça donne un peu de respiration au texte, c'est pas plus mal.

2. Mettre le texte dans un bloc, le positionner en relatif, et jouer sur les z-index pour avoir le bloc du texte au dessus et les images en dessous. Mais ça va commencer à faire beaucoup de blocs positionnés, cette histoire.