[résolu]Méthode pour mise en page complexe

(reprise du message précédent)

comme tu peux le voir, c joli ( et encore on a rajouté qq éléments graphiques qui font que ça commence à bien me plaire) mais je pense que je ne suis pas sorti de l'auberge !
Modifié par utku (21 Jul 2005 - 08:44)

Ahhhh, bah au moins comme ça, on y voit plus clair
J'essairai de voir ce qu'on peut en faire, c'est un petit challenge

Par contre, le bonhomme, il est pas un poil trop grand ?
Tu fais comme tu le sens, mais là ça va mettre 3 plombes à charger et ça va prendre de la place enfin ça ne change pas la problèmatique générale mais bon ^^

<edit>Par contre, un truc qui serait cool, ça serait que tu édites le titre de ton sujet qui n'est pas très évocateur quand au contenu réel.

Tu pourrais mettre un truc du style "méthode pour mise en page complexe" par exemple, à toi de voir
Modifié par Olivier (20 Jul 2005 - 19:18)

Je te donne en gros l'idée générale qui me vient là, j'ai pas testé.

Un conteneur global dans le quel tu mets le fond blanc sur toute la largeur (avec l'ombre de la partie contenu) en utilisant la méthode des "colonnes factices" (recherche sur le forum ces termes pour voir ce que c'est si tu connais pas)

Ensuite, un conteneur "header" qui contiendrait un titre <h1> correspondant à ton titre de page, le positioner en absolu lui mettre la hauteur de l'image et les coins du fond blanc ainsi que le titre lui même.

Tu fais le menu en dessous, en float: right; ou mieux, margin: auto 0 0 0; ce qui le mettras direct à droite à condition que tu connaissent la taille (largeur), si c'est une largeur variable, il faut utiliser le float.

Ensuite, le menu vertical en float: left; le formulaire de login en position absolue callé à droite, le contenu en float: left; avec les marges qui vont bien.

Un truc qui serait pas mal pour se simplifier la vie c'est d'inclure tout ce bordel qui suit le header (à partir du 1er menu) dans un div "sous conteneur" et de le marger (en haut) plutôt que de marger chacun des éléments un à un. Ca te fait un conteneur de plus pour un eventuel fond si y a besoin.

Ensuite le footer en clear: both; qui se callera bien sagement sous tout le reste.

Pour ton image qui semble de causer des soucis, c'est une image de contenu ou de deco ?

l'image en question (le perso calé en bas à droite) était prévu pour être décorative (si si, c'est important)
Néanmoins, je me suis dit hier que l'on pourrait utiliser cet espace pour indiquer des erreurs, ou des validations (exemple : votre score a bien été enregistré)
pour cela, il faudra pouvoir remplacer cette image par une autre plus grande qui contiendrait par exemple une bulle, par dessus laquelle on rajouterait le texte d'erreur ou de validation !
cela peut être sympa!

enfin commençons par le commencement : comment caler cette image de manière à ce qu'elle soit positionnée juste sur le footer (il faut imaginer que la maquette que j'ai publiée est étirable en hauteur -le bloc contenu- en fonction de la quantité de texte). Tu verras également sur la maquette que le perso déborde un peu sur le bloc de contenu. C'est plutot pas mal et ça brise un peu le coté rigide de la mise en page, et j'aimerais donc le garder si c'est possible)

autre question, je n'ai pas vraiment compris comment faire pour qu'un div par exemple s'étire en hauteur de manière à occuper toute la place disponible. ça marche assez facilement pour la largeur, mais j'ai l'impression que l'alignement vertical, c'est pas la fête en css !

enfin, je suis confiant

sinon, avant de m'endormir hier soir (et de cauchemarder toute la nuit sur le css) je me suis dit que le footer pourrait contenir en fait :
- la barre de lien (hauteur: environ 20 px)
- le logo en float: left (hauteur 86 px)
- la petite barre d'information (type bandeau d'info CNN ) probablement réalisé en flash (les infos affichées seront celles d'un flux rss)
- le perso à droite

utku a écrit :

enfin commençons par le commencement : comment caler cette image de manière à ce qu'elle soit positionnée juste sur le footer (il faut imaginer que la maquette que j'ai publiée est étirable en hauteur -le bloc contenu- en fonction de la quantité de texte).

Je me permet de te signaler que la css que je t'ai indiquée répond à cette question. Donc où est le problème ?

j'ai testé ça hier soir en mettant une image
l'image s'est positionnée à gauche dans le footer, mais a aussi étirée le footer de la hauteur de l'image.
je continue mes essais !

bizarre, bizarre

je te met la page en ligne

Testée sous environnement window xp pro :
firefox -> ok
IE6 -> ok
opera dernière maj -> ok

mea culpa !
je viens de tester à nouveau
bon, y'a quand même des choses qui m'échappent !

première question :
à quel endroit donnes tu la hauteur du bloc content ?
il semble avoir une hauteur défini (comme s'il avait un min-height: 800px)

deuxième question :
pourquoi chez toi le perso arrive t'il à être aligné comme je le souhaitais !
est-ce ton bottom-margin qui fait le truc ?
je comprend pas !
par contre, j'ai remplacé le bloc noir par une vraie image et dans ie elle est tronquée
bref, je vais déjà copier le code source de ta page (peut être que tu as fait une ou deux modifs depuis hier...ou alors c moi qui est modifié des truc dans ton code ^_^)

pour info mon image étant plus grande que ton carré noir, j'ai utilisé un margin-top négatif
ça place correctement l'image dans firefox, mais ie tronque l'image...

les dimensions du perso : 150x305 px
par contre,suis je obligé d'avoir une image qui a toujours la même taille ?

utku a écrit :

sinon, que penses tu de l'idée de mettre le perso dans le footer et de le positionner grace à un margin top négatif (et un float:right afin qu'il soit bien à droite de la liste de liens) ?
par contre le fait que les images soient tronquées dans ie avec cette méthode m'inquiéte un peu...

je n'en pense rien du tout et tu as toi même déjà indiqué dans un précédent message que tu associais "logiquement" perso et rightnav. Ce point "oblige" ta structuration html et la structuration html prime tout catégoriquement.

de deux choses l'une :
ou tu estimes que la logique qui a présidé à ton choix n'est pas bonne et tu changes
ou tu estimes que c'est bien ainsi que les choses doivent être pensées et tu ne changes rien.

Si par rapport à cette alternative tu introduis une quelconque question de mise en page, et bien tu tu te retrouves à nouveau à prendre la question à l'envers.

Je viens de tester ma css avec margin-top:-150px; pour une image de 150px de haut et il n'y a aucun souci avec IE (version 6)
Modifié par clb56 (21 Jul 2005 - 10:54)

utku a écrit :

par contre,suis je obligé d'avoir une image qui a toujours la même taille ?

Avec cette méthode oui. Mais peut être y a t'il d'autres solutions suivant les nécessités à prendre en compte.

Simplement c'est toi qui a dit que les différents perso auraient a priori la même taille

et effectivement c'est quand même plus simple

pour la taille, je m'interrogeais car nosu avons eu l'idée de peut être utiliser le perso, comme indiqué un peu plus haut, pour les messages d'erreur (par exemlpe, avec une bulle dans laquelle on affiche le texte du message...)

concernant la logique de la structure, c'est vrai que je ne sais pas vraiment sur quel pied danser pour l'instant.
que me conseilles tu ?

sinon pour le coup de l'image tronquée, je crois que c'est quand je met le margin négatif sur autre chose que le div
dans ces cas là, on dirait qu'IE masque tout ce qui dépasse...
enfin c'est pas grave.

bon, en tous cas ta proposition me semble plutot adaptée (y'a encore des choses à modifier je pense)
par contre, je t'avoue que j'ai du mal à voir pourquoi et comment tu as fait tes choix, et pourquoi ils fonctionent mieux que les miens (mis à part le fait que tu maitrise mieux que moi le css ^_^)
j'aime bien comprendre, ça me permet de mieux assimiler, puis d'aider aussi d'autres rescapés du <table><table><table><table><table>...

wep
merci en tous cas
bon j'ai arreté d'être tétu
j'ai donc arreté de bosser sur mon fichier, et j'ai pris le code que tu m'as filé
je suis en train d'intégrer les différentes choses
je publierais certainement la page (ou au moins une capture) afin de montrer mon taff et avoir vos conseils sur des éventuelles améliorations.

Je laisse le sujet ouvert car je suis sûr que je vais rencontrer de nouveaux problèmes... (une intuition, comme ça..^^)

utku a écrit :

concernant la logique de la structure, c'est vrai que je ne sais pas vraiment sur quel pied danser pour l'instant.
que me conseilles tu ?

Très pragmatiquement, le moyen le plus simple pour se faire un avis c'est de vérifier systématiquement son travail en enlevant toute css. C'est très simple avec firefox : onglet affichage > style de la page > aucun style.

Pour le positionement du bonhomme, il faut justement savoir si c'est du contenu ou du graphisme, savoir si c'est une image à positionner ou simplement une image de fond via CSS.

Olivier a écrit :
Pour le positionement du bonhomme, il faut justement savoir si c'est du contenu ou du graphisme, savoir si c'est une image à positionner ou simplement une image de fond via CSS.

tout à fait d'accord avec toi olivier. C'est justement une des premières questions que je me suis posée (cela valant également pour l'image logo). Néanmoins l'image semble fortement associée au visiteur/joueur une fois qu'il s'est identifié ce qui orienterait plutôt le choix vers une présentation en dur.

PS : pour ta nouvelle signature, tu ne devrais pas dire des choses comme ça, tu te fais du mal je t'assure .

<edit>
suis plus qu'à 2 messages de 400
</edit>
Modifié par clb56 (21 Jul 2005 - 14:05)

oui, je vois mieux ce que vous voulez dire
effectivement le personnage peut être considéré comme du contenu
nous n'avons pas encore tout à fait fixé notre choix mais à priori nous pourrions choisir un personnage en random parmi tous ceux disponibles et l'afficher ici
donc à priori ça ne peut pas figurer dans le css