Découpage d'un design web

Bonjour à tous,

J'ai créé un design pour un big band, mais j'avoue que je buche sur le découpage de celui-ci, ainsi que l'intégration css .

Voici le desgin :


J'ai surtout des problèmes avec l'ombre du joueur, car elle "dépasse" sur l'image dans le header et elle "passe" sous le footer. Si le contenu de ma page doit s'allonger, comment est-ce que je peux faire bouger cette ombre ?

La solution que je verrais c'est de faire une image "quasi" entière de la page à mettre en background... mais c'est pas très élégant !

Est-ce que vous verriez une méthode pour pouvoir faire cela ?

Salut,

Tu pourrais créer des div avec des id de cette manière là :


http://nsa02.casimages.com/img/2008/09/13/08091311230466300.png

Tu pourrais ainsi facilement aligner ton logo sur le div "contenu" sur mon exemple


A bientot
Modifié par <j0n@s/> (13 Sep 2008 - 23:24)

Hello,

Quel comportement souhaite-tu obtenir quand ta page s'allonge ?

1/ Que le joueur reste en haut, avec son trombone par dessus le header et qu'on puisse lui voir les pieds si la page est assez grande ?

2/ Que le joueur soit toujours aligné en bas de page et que si la page est assez grande, son instrument ne dépasse pas sur le header ?

Tout d'abord, merci pour vos réponses !

<j0n@s/> a écrit :
Salut,

Tu pourrais créer des div avec des id de cette manière là :


http://nsa02.casimages.com/img/2008/09/13/08091311230466300.png

Tu pourrais ainsi facilement aligner ton logo sur le div "contenu" sur mon exemple


A bientot

Au départ j'avais pensé ajouter le logo directement dans le header... mais je crois que ta façon de découper et plus élégante, merci

Tymlis a écrit :
Hello,

Quel comportement souhaite-tu obtenir quand ta page s'allonge ?

1/ Que le joueur reste en haut, avec son trombone par dessus le header et qu'on puisse lui voir les pieds si la page est assez grande ?

2/ Que le joueur soit toujours aligné en bas de page et que si la page est assez grande, son instrument ne dépasse pas sur le header ?

C'est là ou vient les problèmes ! Alors j'ai réfléchis et je pense que la solution numéro (1) et plus facile à réaliser (surtout à cause du chevauchement sur le header). Je n'ai pas les pieds du joueur, donc je me disais que je pouvais :
- soit lui allonger les jambes
- soit le copier en miroir horizontal

Veriez-vous une autre manière de faire ?

Je pense que la solution (2) et difficile à réaliser à cause du chevauchement du trombone sur le header. Il faudrait utiliser une image png et c'est pas génial au niveau compatibilité avec IE (c'est juste ce que je raconte ?).

Maintenant, si j'utilise la solution (1), il faut résoudre le problème du footer. Ce-dernier passe par-dessus l'ombre du joueur de trombone. Si le contenu de ma page s'agrandit, le footer doit se "déplacer" contre le bas et son "background" doit se modifier pour correspondre au joueur !
Comment peut-on réaliser cela ?
Modifié par Niouk18 (14 Sep 2008 - 13:53)

Niouk18 a écrit :
Maintenant, si j'utilise la solution (1), il faut résoudre le problème du footer. Ce-dernier passe par-dessus l'ombre du joueur de trombone. Si le contenu de ma page s'agrandit, le footer doit se "déplacer" contre le bas et son "background" doit se modifier pour correspondre au joueur !
Comment peut-on réaliser cela ?

Pourquoi ne pas tenter la chose suivante :
- Ton body ou un conteneur contient l'ensemble de ton site et prend pour image d'arrière-plan ton joueur.
- Ton footer, vient se placer à l'intérieur (par dessus donc) et prends une bête couleur d'arrière-plan. Si tu lui affecte une opacité de 75 ou 50%, tu devrais obtenir l'effet escompté : lorsque ta page n'est pas suffisamment longue, le footer chevauche ton joueur et lorsque celle-ci est plus longue que le joueur, elle s'affichera par-dessus une simple couleur d'arrière-plan.

Voilà, à priori, ça devrait fonctionner.

Cygnus a écrit :

Pourquoi ne pas tenter la chose suivante :
- Ton body ou un conteneur contient l'ensemble de ton site et prend pour image d'arrière-plan ton joueur.
- Ton footer, vient se placer à l'intérieur (par dessus donc) et prends une bête couleur d'arrière-plan. Si tu lui affecte une opacité de 75 ou 50%, tu devrais obtenir l'effet escompté : lorsque ta page n'est pas suffisamment longue, le footer chevauche ton joueur et lorsque celle-ci est plus longue que le joueur, elle s'affichera par-dessus une simple couleur d'arrière-plan.

Ok... mais j'ai pas trouvé de doc sur alsacréations pour pouvoir modifier l'opacité des images de manière valide et accessible en CSS.

Aurais-tu un lien ou je puisse trouver ces infos ?

Niouk18 a écrit :
Ok... mais j'ai pas trouvé de doc sur alsacréations pour pouvoir modifier l'opacité des images de manière valide et accessible en CSS.

1/ Utilisation de la propriété opacity pour les navigateur gecko.
2/ Utilisation d'un filtre pour IE grâce aux commentaires conditionnels.

Plus d'info : Définition de opacity

Perso je pense que lui mettre des échasses ou le couper en miroir ne sera pas très joli, la première solution serait plus esthétique.

Alors oui, elle va être un peu plus compliquée, oui il va falloir passer un plus de temps sur la version IE6, mais il n'y a rien là d'insurmontable.

En faisant une découpe de ton espace central en trois couches "superposées"
1/ D'abord au plus profond, mettre le header et le fond noir. Lui appliquer une hauteur minimum (la hauteur du joueur)

2/ Puis rajouter une autre couche, de même largeur que la première, avec le joueur en image de fond (png transparent) et la positionner en absolute, collée vers le bas de son parent. Cette couche peut même contenir directement la barre du footer dans l'image, avec le texte rajouté dessus.

3/ La dernière couche (au même niveau que la 2) contiendra le texte principal de ta page, étant lui placé en position relative, il agrandira son parent (la couche 1) et déplacera donc avec lui la couche 2

Ce qui donne (environ)

<principal>
<joueur></joueur>
<texte></texte>
</principal>

Pas testé, mais c'est comme ça que je commencerai en tout cas. Après il faudra magouiller pour les min-height et les png transparent sous IE6, mais c'est normal ^^

Merci Cygnus pour le lien !

Je comprends bien ce que tu veux dire Tymlis mais... comment faire pour que lorsque ma page est petite, le haut du trombone reste "transparent" sur le header ?

Voilà à quoi ça devrait ressembler :



Ufff... c'est compliqué tout ça ! Mais c'est un beau challenge !
Modifié par Niouk18 (14 Sep 2008 - 17:09)

Si tu définie une min-height à ton conteneur principal égale à la hauteur de ton image de trombone alors les deux vont se superposer correctement.

Ensuite pour l'effet de transparence, il te suffit de créer une image reprenant uniquement la silhouette de ton trombone, en png transparent (de façon à ce que l'ont "voit" au travers), et de l'appliquer en background. Comme ça, posé sur fond noir, il ressortira en gris, et posé sur le header il sera comme sur ton screenshot.

Ne te préocuppes pas du rendu sur IE6 à ce stade, fais déjà fonctionner ça sur des navigateurs qui gérent nativement le png transparent, on adaptera pour IE6 ensuite
Modifié par Tymlis (14 Sep 2008 - 18:33)

Okay j'ai créé une image du tromboniste en png transparente.

Maintenant j'ai la structure suivante :

<container>
  <page>
    <header>
      <easy-access></easy-access>
      <menu></menu>
      <content></content>
      <footer></footer>
    </header>
  </page>
</container>

Et j'ai les images suivantes en background :
- body ==> dégradé
- container ==> page
- page ==> image header
- header ==> image du tromboniste

Avec ça j'arrive à faire qqch mais avec quelques problèmes... une image vaut mieux que pleins d'explications :


et voici le code css (j'ai mis seulement les infos utiles) :

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}

body {
   background: #6c6c6c url(img/background_gradient.jpg) repeat-x top;
   font: normal 80%/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
   color: #dcdcdc;
   text-align: left;
}

#container {
   width: 800px;
   margin: 0 auto;
   min-height: 100%;
   background: url(img/page.png) repeat-y center;
}

#page {
   width: 750px;
   margin: 0 auto;
   min-height: 100%;
   background: url(img/header.jpg) no-repeat top center;
   border: 1px dotted red;
}

#header {
   position: relative;
   margin-bottom: 0;
   padding-bottom: 80px;
   min-height: 100%;
   background: url(img/player_shadow.png) no-repeat bottom left;
   overflow-x: visible;
   overflow-y: auto;
}

ul#menu {
   width: 190px;
   margin: 0;
   margin-left: 20px;
   float: left;
}

#content {
   width: 500px;
   float: right;
   margin-right: 20px;
}

#footer {
   position: absolute;
   bottom: 20px;
   width: 710px;
   margin: 0;
   padding: 0 20px;
}

J'ai ajouté une bordure rouge pour montrer que le bloc "page" ne prend pas les 100% de hauteur spécifiée !

Mais apparement, ça ne fonctionne pas de mettre pleins de "min-height" pour plusieurs div

Euhm...
Moi, je maintiens qu'une bête opacité sur le footer est la solution la plus simple.

Mais bon, moi j'dis ça, moi j'dis rien...

Cygnus a écrit :
Euhm...
Moi, je maintiens qu'une bête opacité sur le footer est la solution la plus simple.

Mais bon, moi j'dis ça, moi j'dis rien...

Donc tu préconises la solution (1) qui vise à laisser le joueur en haut de la page même si le contenu de celle-ci s'agrandit (on verrait donc les jambes alongées du joueurs avec une page agrandie) ?

C'est pas que je ne veux pas entendre tes conseils , mais je trouve la solution (2) de laisser le joueur en bas de page, même si le contenu s'agrandit, élégante.

Maintenant j'ai jamais dit que c'était la solution la plus facile ! Et il est toujours possible d'utiliser l'opacité pour le footer avec la solution (2) je pense...

Voilà comment je procèderai :

- body => arrière-plan grisé avec le header calé en haut
- conteneur général => arrière-plan du joueur calé en bas
- footer => opacité 75% / marge-basse

Ainsi, lorsque ton contenu est important, le joueur est calé en bas.
Et lorsque le contenu est moindre, il remonte sur le header.

J'aurais tendance à le laisser remonter sur le header, sauf si vraiment le contenu général est très light.

Nos idées sont semblables si ce n'est que je n'utilise pas le body, mais un conteneur spécial, ce qui force à jouer avec du min-height.

Mais, j'avoue que l'approche de Cygnus est nettement plus simple que la mienne

Okay, mais je n'ai pas encore très bien compris votre manière de procéder alors...

Je résume ce que j'ai fait en tenant compte du fait qu'on ne peut pas utiliser 2 fois la propriété "background" en css.

Structure html

<container>
  <page>
    <header>
      <easy-access></easy-access>
      <menu></menu>
      <content></content>
      <footer></footer>
    </header>
  </page>
</container>

Structure css

- image de 1px de largeur comme dégradé ==> appliqué sur le background de <body> (repeat-x)
- image de 1px de hauteur comme page ==> appliqué sur le background de <container> (repeat-y)
- image du header (photo + titre "helmy more...") ==> appliqué sur le background de <page>
- image de l'ombre ==> appliqué sur le background de <header> (position: absolute;)

Voilà je ne vois pas trop comment faire pour avoir l'effet escompté sans utiliser toutes ces images !

Est-ce que vous pourriez me réexpliquer ? (désolé si je suis dure à la comprenette !)

Niouk18 a écrit :
Est-ce que vous pourriez me réexpliquer ? (désolé si je suis dure à la comprenette !)

Alors..., dans l'ordre :
- html reçoit le dégradé répété en x.
- body de largeur fixe reçoit le background général composé de l'image du header et du début du fondu au noir
- container qui aura comme background le joueur de trombone calé en bas
- footer qui aura un simple background-color et une opacité moindre.

A noter que le titre du site sera englobé dans un <h1> en position relative décalé vers la gauche.
Est-ce plus clair comme cela ?

Cygnus a écrit :
Est-ce plus clair comme cela ?

Merci ! Oui je crois que c'est plus clair... enfin je vais de ce pas essayer tout ça !

Bon ben j'arrive pas à faire exactement la même structure que toi Cygnus ! Mais j'arrive à faire qqch :



Structure
- html reçoit le dégradé répété en x
- body de largeur fixe reçoit le background de la page (le bord de la page a une petite ombre, ce n'est pas un cadre noir net que l'on peut ajouter seulement avec du css)
- container a comme background l'image du header (avec fondu au noir)
- page reçoit le background du joueur de trombone calé en bas
- footer a un simple background-color et une opacité moindre

Par contre, lorsque le contenu de ma page est petit, la page ne fait pas 100% de la hauteur du navigateur...

Niouk18 a écrit :
- body de largeur fixe reçoit le background de la page (le bord de la page a une petite ombre, ce n'est pas un cadre noir net que l'on peut ajouter seulement avec du css)

Arf, je n'avais pas fait attention à l'ombre portée.
On peut dire que tu fais tout pour te compliquer la vie !

Autre essai :
- body reçoit le background de la page (fond noir + ombre portée)
- header affiche l'image du header et est positionné en absolu
- container reçoit le background du joueur de trombone calé en bas
- footer a un simple background-color et une opacité moindre