5568 sujets

Sémantique web et HTML

Bonjour à tous!

J'aimerais savoir comment réaliser un design comme celui de ce site http://www.alsacreations.com
1.créer un bloc <div></div> avec un effet d'ombre pour le mettre en valeur
2.realiser un menu comme celui ci (alsacreations) de sorte qu'une fois sur un menu
qu'il y ait une fleche sur le menu montrant que c'est sur cette page nous sommes

J'aimerais aussi savoir comment realiser un design qui occupe tout l'ecran et donc
s'adapte à tout type de résolution comme celui du http://www.siteduzero.com

merci pour votre aide!

galant01
Bonjour,

galant01 a écrit :
1.créer un bloc <div></div> avec un effet d'ombre pour le mettre en valeur

Voir du côté de box-shadow en CSS3. Attention, le support dans les navigateurs est encore assez récent.

galant01 a écrit :
2.realiser un menu comme celui ci (alsacreations) de sorte qu'une fois sur un menu qu'il y ait une fleche sur le menu montrant que c'est sur cette page nous sommes

On pourra lire à ce sujet: Comment appliquer des styles spécifiques à la page en cours dans un menu ?

galant01 a écrit :
J'aimerais aussi savoir comment realiser un design qui occupe tout l'ecran et donc s'adapte à tout type de résolution comme celui du http://www.siteduzero.com

Il s'agit de ce qu'on appelle un design «fluide». Certaines largeurs de conteneurs sont en width:auto (le bloc prend toute la largeur disponible), d'autres sont des largeurs en pourcentages. Apparemment le site que tu donnes en exemple utilise aussi min-width pour imposer une largeur minimale.
Ce genre de design est réalisable relativement facilement une fois qu'on a de bonnes bases en positionnement CSS.
On pourra aussi se pencher sur la question des Media Queries pour adapter le design à différentes résolutions (par exemple pour proposer une mise en page sur une seule colonne pour les petits périphériques tels que les smartphones et les tablettes en mode portrait).
Modifié par fvsch (20 Jun 2011 - 10:22)