28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai le site toutenkamion.net qui est bien conçu grâce à vos conseils.
Actuellement la largeur est fixe et étudiée pour la résolution 800x600. Je tente donc d'évoluer pour proposer une interface plus élastique sans trop complexifier le code.

Je sais qu'il existe une méthode qui consiste à inclure les uns dans les autres 4 blocs pour permettre la création de paragraphe élastique aux coins arrondis mais j'ai tenter quelques chose qui me semble plus simple (à vous de confirmer)

- Essai habillé par les images : http://toutenkamion.net/image.html
- Essai habillé par des couleurs : http://toutenkamion.net/couleur.html

Pour l'instant j'ai des scrupules à utiliser des <span> imbriqué dans les titres utilisé pour les coins des paragraphes, l'utilisation de bloc est possible pour obtenir le même résultat.

Pour ne pas surcharger ce post, je vous épargne le détails de la construction de ces paragraphes élastiques mais ce serait avec plaisir que je l'ajouterai si on me la demande.

Ps : visitable avec FireFox et Opera
En l'absence de réactions, voici l'idée de base, si vous pouvez m'indiquer si je part sur une bonne piste à moins que je me complique la tache et qu'une solution plus simple existe.

Au lieu de créer des assemblage de bloc les uns dan les autres à chaque paragraphes avec coin arrondis et élastique je cherchai un moyen pour définir une image de fond pour tous le contenu.

Ensuite de placer deux éléments de décorations de chaque coté pour maquer les bords gauche et droit.

Pour finir, sur chaque titre h2, je leur est défini une autre image de fond et placé de chaque coté les coin arrondis sur ce code html :
<h2><span class="coin1"><span class="coin2">Titre test</span></span></h2>


Voici les images utilisée sur les titres en question :
- Fond du titre : http://toutenkamion.net/test/parchemin/titre.png
- Bord de gauche : http://toutenkamion.net/test/parchemin/coin1.png
- Bord de droit : http://toutenkamion.net/test/parchemin/coin2.png

Je me demande si il peut exister un moyen de placer les coins 1 et 2 sans utiliser de <bloc> ou de <span> superflue afin que le simple fait d'utiliser un titre h2 permet l'ajout des coins sans modifier le code html
Modifié par percherie (19 Dec 2007 - 09:08)
Yop en l'absence de réponse, j'ose conclure qu'il n'y a pas de problème majeur à moins que ce ne soit un peut trop complexe à aborder.

J'ai apporté quelques améliorations légère sur la portion de code autour de la balise h2.
La solution retenu est l'utilisation d'une image suffisament large pour répondre aux différente résolution, un élement de décoration la recouvrant en bout de page pour donner un coté arrondi : une seul balise <span> suffit donc.

Pour les prochains qui souhaite membres qui chercherai une solution similaire voici le lien : http://toutenkamion.net/image.html

Si il n'est plus valide, c'est que je l'aurrai mis en place sur tous le site Smiley murf

Bonne soirée à tous