21-09-2008, 03:16 PM
(Modification du message : 21-09-2008, 03:17 PM par Sephi-Chan.)
Salut,
Le problème de ce design, c'est qu'il utilise de nombreuses textures qui — dupliquée de manière variable — risque d'avoir un rendu bizarre, je pense notamment au menu de gauche.
Je suppose que c'est le bloc contenant les connectés qui va s'étendre. Heureusement, les graphistes ont été sympas et on laissé un fragment où il n'y a ni bordure à gauche, ni à droite. C'est donc cette portion qui va être étendue.
Le fond de ce bloc va devoir être découpé en 3 parties : le haut, le bas et le milieu.
Tu peux également utilise 2 images en découpant le haut et le reste, en faisant une image très haute pour le reste : tu dupliques la texture de fond sur 700 pixels et tu y ajoutes le bas du bloc. Mieux vaut le faire en 3 parties à mon sens.
Tu donnes au <div /> l'image de fond qui représente le bas de ton bloc, en attachant le fond au bas du bloc (background-position : bottom left;).
Tu donnes au titre l'image de fond qui représente le haut de ton bloc.
Ensuite, tu positionnes simplement ton titre en lui donnant les marges que tu veux.
Tu positionnes ensuite ta liste <ul /> en lui donnant comme fond la partie centrale du bloc.
Et voilà, ça roule. Le même principe s'applique pour le conteneur central. Tu peux jouer sur les marges négatives pour améliorer un peu le rendu, mais je te laisse expérimenter ça.
Pour tes effets de survols sur les boutons, je te conseille d'utiliser le principe des sprites CSS décrit sur Alsacréations - Une image réactive en CSS avec une seule image et sans javascript.
Voilà, si tu as des questions n'hésite pas ! J'aurais été ravi de t'aider à intégrer ce design mais j'ai pas le temps de m'y pencher.
Sephi-Chan
Le problème de ce design, c'est qu'il utilise de nombreuses textures qui — dupliquée de manière variable — risque d'avoir un rendu bizarre, je pense notamment au menu de gauche.
Je suppose que c'est le bloc contenant les connectés qui va s'étendre. Heureusement, les graphistes ont été sympas et on laissé un fragment où il n'y a ni bordure à gauche, ni à droite. C'est donc cette portion qui va être étendue.
Code :
<div class="connectes">
<h3><img src="connectes.png" alt="Connectés" /></h3>
<ul>
<li>Tartuffe</li>
<li>Arpic</li>
</ul>
</div>Le fond de ce bloc va devoir être découpé en 3 parties : le haut, le bas et le milieu.
Tu peux également utilise 2 images en découpant le haut et le reste, en faisant une image très haute pour le reste : tu dupliques la texture de fond sur 700 pixels et tu y ajoutes le bas du bloc. Mieux vaut le faire en 3 parties à mon sens.
Tu donnes au <div /> l'image de fond qui représente le bas de ton bloc, en attachant le fond au bas du bloc (background-position : bottom left;).
Tu donnes au titre l'image de fond qui représente le haut de ton bloc.
Ensuite, tu positionnes simplement ton titre en lui donnant les marges que tu veux.
Tu positionnes ensuite ta liste <ul /> en lui donnant comme fond la partie centrale du bloc.
Et voilà, ça roule. Le même principe s'applique pour le conteneur central. Tu peux jouer sur les marges négatives pour améliorer un peu le rendu, mais je te laisse expérimenter ça.
Pour tes effets de survols sur les boutons, je te conseille d'utiliser le principe des sprites CSS décrit sur Alsacréations - Une image réactive en CSS avec une seule image et sans javascript.
Voilà, si tu as des questions n'hésite pas ! J'aurais été ravi de t'aider à intégrer ce design mais j'ai pas le temps de m'y pencher.
Sephi-Chan