28173 sujets

CSS et mise en forme, CSS3

Comment réalisé une page web sur une "palette" ?

Bonjour à tous,


Tout d'abord je sais que mon titre ne veut rien dire pour vous les grands professionels car vous avez sûrement un lexique plus dévellopé que moi... En fait ce que je n'arrive pas à faire c'est d'avoir un site sur une "palette" à bords ronds ou carrés (en fait les bords peu importe) qui repose sur une image ou couleur d'arrière plan. Des exemples rapides pour mieux me faire comprendre :

- iClan
- bah... Alsacréations
- les modules à droite et à gauche sur ce blog

Vous voyez ce que je veux dire maintenant, non ? Smiley bawling
Bon d'après ce que j'ai pu comprendre ça passerait par un style css avec le body étant le fond du site (donc on met une couleur ou un fond), mais à quelle balise on applique le style de la palette que l'on désire : div ? p ? autre ?
Je continu à chercher mais si vous avez la solution je vous laisse la parole !

Makushimu
Si je reprends cet exemple là :
http://japon.over-blog.net/

D'abord il faut dire qu'il est très mal foutu ! Il y a une imbrication de balises <div>, genre 12 div pour créer un seul bloc (de type "palette" comme tu dis). C'est reprendre la mauvaise habitude des tableaux imbriqués dans des tableaux imbriqués dans des tableaux imbriqués dans des tableaux (accessibilité : zéro), en l'appliquant à XHTML+CSS. Argh.

On va faire la même chose mais en plus propre.

Pour que ça soit simple (et qu'on puisse faire quelque chose de propre), il faut que ça soit fixé en largeur. Partons sur une largeur de 200px.

On va créer une image de fond pour le dégradé en bas de la "palette". Et une autre pour le dégradé + zone de couleur du titre en haut. Pour les côtés, on aurait pu utiliser des bordures simples de 1px (en CSS), mais ça risque d'être difficile à gérer pour les aligner au pixel près avec les bordures du haut et du bas. On va donc une image qui contiendra les deux bordures latérales. Ça alourdit un peu artificiellement le code, mais je n'ai pas mieux en tête pour l'instant.

On va donc avoir :
HTML :
<div class="palette">
	<h2>Titre de palette</h2>
	<div class="corps">
		<p>Contenu de palette.</p>
		<p>Encore du contenu... autant qu'on veut en fait, vu que notre bloc "palette" sera extensible vers le bas !</p>
	</div><!-- fin de div.corps -->
</div><!-- fin de div.palette -->

CSS :
div.palette {
	width: 200px;
	padding-bottom: 15px;
	background: white url(image_bas.png) no-repeat center bottom;
}
div.palette h2 {
	padding: 4px 10px;
	background: white url(image_haut.png) no-repeat center top;
}
div.palette div.corps {
	padding: 4px 10px;
	background: white url(image_cotes.png) repeat-y center top;
}

Et le tour est joué.

Variantes :
Variante 1: pas de div.corps. La div.palette a pour image de fond l'image avec les bordures latérales. Par contre, il faut rajouter un élément tout à la fin de cette div, soit une image avec la bordure, soit une div vide (snif) avec la bordure du bas en image de fond.

Variante 2 : si les div.palette ont un contenu relativement limité, on peut avoir dans la même image la bordure du bas et les bordures latérales. Il faut alors penser à faire une image relativement haute, que l'on positionnera comme image de fond tout en bas du bloc (pour un petit bloc, une grande partie de l'image de fond sera alors cachées). Solution élégante au niveau du code HTML car aucun élément n'est ajouté artificiellement (on a juste un conteneur, un titre et du contenu). Mais solution lourde si on pense au poids de l'image à utiliser (qui pourrait faire 200px de large pour 600px de haut, par exemple...).

Note finale :
Si l'on voulait un bloc de hauteur ET de largeur variable, on retomberait alors sur des histoires de tableaux à 9 cellules (4 images de taille fixe pour les coins, 4 images extensibles pour les 4 bordures, et une cellule pour le contenu...). Ce qui est limite mieux que la soupe de <div> sur le blog http://japon.over-blog.net/ (enfin la soupe du gabarit créé par Over-Blog.net).
Modifié par mpop (12 Feb 2006 - 13:23)
Bonjour,

Tu as un tutoriel pour ce que tu recherches à faire sur Alsacréations et dans le livre de Raphaël "CSS2 pratique du design web". En suivant l'exemple donné tu arriveras au résultat voulu.
Sujet clos
Aller à