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

bonjour,
je vous avoue que je suis un peu déçu.
J'étais pourtant très enthousiaste à l'idée de créer des pages html validées w3c et en plus permettant à l'instar de csszengarden de modifier relativement facilement le design général de mes pages en modifiant simplement le css...

Mon DA m'a tombé une maquette de site, avec comme d'habitude des trucs bien chiant à mettre en page.
Bon, voici le topo, j'espère simplement que vous pourrez m'apporter une solution aux difficultés que je rencontre.

La structure principale des pages est composée d'une image en haut à gauche (que je pense mettre en background de ma balise body, ou de mon div "container" qui contient tous les autres...) jusqu'ici tout va bien...

J'ai prévu que le site s'adapte à la taille de l'écran et donc il sera "liquide" (j'ai vu ce terme sur des sites anglais...je trouve ça marrant) sachant qu'il aura quand même une largeur maximale (adaptée aux écrans de 1280 px de large... ce qui est plutot pas mal)

Sur la gauche, j'ai un menu en flash, que j'intègrerai donc directement au code html.

Ensuite en haut, aligné sur la droite, le titre de la rubrique, avec les éventuels sous menu.

Enfin en bas, j'ai un footer avec différents liens.

à priori jusqu'ici je n'ai pas trop de problème
Mais ça va se corser.

Le contenu de chaque pages est située dans un bloc (bien entendu avec des joyeusetés du genre bords arrondis, et ombre portée, donc je devrais je pense rajouter des div à l'intérieur pour faire tout ceci...)
Déjà, la première difficultée est que ce bloc est censé être aligné sur le bas de la page, et avoir un point limite en hauteur qu'il ne pourra pas dépasser (cela peut être mon div "top") . Mais pour les écrans qui ont de bonnes résolutions, il devra pouvoir descendre un peu de manière à pouvoir laiser un peu de place au éléments du haut de la page (illustration en haut à gauche et titre de la page en haut à droite) pour pouvoir aérer un peu la mise en page...
Bien entendu, ce bloc s'étire en hauteur s'il y a beaucoup de textes...

Autre difficulté, j'ai un bloc avec un personage à droite de mon bloc de contenu. Ce bloc permettra d'afficher l'illustration d'un personnage, et sera aligné sur mon footer (il doit être posé sur le footer, aligné sur la droite). Et pour corser le tout, l'illustration doit pouvoir chevaucher un peu le bloc de texte !
Je n'ai jusque là pas réussi à faire ceci. Avant avec la mise en page old school, aussi pourri soit elle, je pouvait dire à ma cellule de tableau d'aligner son contenu sur le bas, le haut, le centre, la gauche...Etc
là je ne sais pas comment faire.

Evidemment, le css doit pouvoir fonctionner sur ie (j'utilise firefox, mais même si je pense militer pour firefox sur ce portail, car il s'agira d'un portail de jeu que notre studio est en train de développer, la majorité des gens utilisent IE 6 au mieux...)

bref, j'ai l'impression de ne plus pouvoir avancer
j'attends vos conseils.

merci d'avancde
Modifié par utku (21 Jul 2005 - 17:29)

Voici le modèle de mise en page.
A priori toutes les pages du site auront ce modèle à une ou deux exeptions près.

a écrit :
mais on peut quand même estimer que 90 à 95 % des internautes utilisent flash.

Donc on peut estimer qu'une partie de la population ne pourra pas du tout naviguer sur ton site.
Selon tes objectif, une partie c'est peut-être négligeable pour toi. On voit que tu n'en fais pas partie, justement

a écrit :
Bref, pour l'instant on peut toujours faire machine arriere et remplacer un beau menu flash tout funkysexy par un menu plus classique

Et pourquoi ne pas proposer les deux, tout simplement ? (un menu "classique" textuel en bas de page, histoire que les internautes handicapés puisse aussi surfer)
Modifié par Raphael (20 Jul 2005 - 11:21)

pourquoi pas en effet...
mais le choix du menu en flash n'est pour l'instant pas définitif.
C'est juste que flash est notre principal outil de travail et que nous aimons bien en mettre en peu dans nos pages.
Il est encore possible de faire ce menu en html classique, avec juste un petot rollover mignon.

Bref, ce qui est certain par contre c'est que je dois au moins tenter de réaliser cette mise en page...

J'espère que je n'ai offensé personne !
je n'arrive pas à trouver de réponse à mon problème !

bonjour utku,

ce qui manque pour pouvoir t'aider efficacement c'est la structuration, même sommaire, de ton document (structuration à laquelle la css va s'appliquer pour une mise en écran). Suivant tes choix de structuration les solutions à mettre en oeuvre seront différentes.

Pour l'instant le seul point qui me semble un peu délicat c'est de regrouper dans le visuel top le titre de page et le sous menu. Ce qui ne signifie pas qu'il n'y a pas de solution.

Donc si tu peux fournir unsquelette de structuration...

++

utku a écrit :
bien sûr !
par contre, je débute un peu, alors je suis preneur si ma structure xhtml n'est pas correcte, ou pas optimale !

Il y a pas mal de discussion la dessus mais il semble bien que la structuration :

<h1></h1>
<contenu>
<menus>

est préférable à :

<h1></h1>
<menus>
<contenu>

Et ce pour des raisons d'accessibilité.

Sinon ton image "perso" correspond elle à un contenu ou bien s'agit-il seulement d'une illustration ?

Il faut éviter les liens adjacents :

<a></a> <a></a>

en utilisant des séparateurs, par exemple : |

Tu peux aussi regrouper tes séries de liens en listes :

<ul>
<li><a>lien</a></li>
<li><a>autre lien</a></li>
etc...
</ul>

Mais pour la question qui t'occupe c'est bien le choix de structuration globale du document qui importe.

<edit>
ah oui, t'as oublié ton logo dans le code html ? Ou tu penses le mettre en background d'un élément ?
</edit>
Modifié par clb56 (20 Jul 2005 - 15:22)

utku a écrit :
et je ne prend pas le problème du bon coté !

t'as tout compris

Bon cette image perso d'un point de vue logique (pas de mise en page) tu l'associes à quoi ?

a priori ça me semblait être au rightnav. Je me trompe ?

Précision : ton formulaire de loggin tu veux le mettre où ? Je parle bien de mise en page cette fois ci.
ce sera quoi les dimension du perso ?
Modifié par clb56 (20 Jul 2005 - 16:31)

l'image à priori, je l'associais au rightnav (disons que c'est comme ça que je l'ai tout de suite fait)
donc le right nav contient :
- un formulaire login aligné en haut (on pourra lui mettre un petit margin-top:20px; histoire de l'aligner avec le bloc content)
- une illustration, alignée en bas du right nav (si l'on considère que le righnav s'étire à 100%, jusqu'à atteindre en bas le footer, de sorte que lillustration est posée sur le footer). Dans la maquette de mon collègue, pour compliquer un peu les choses l'illustration chevauche un peu le bloc content (histoire d'avoir une structure moins rigide). Je pensais faire ça avec un margin-left:-30px par exemple...

partant de la structure html suivante :

<body>
<h1>Titre page</h1>

<div id="content" style="height:700px; background:#afa;">
...
Ici le contenu
...
</div>

<div id="rightnav">
<p id="log">Loggin</p>
<p><img src="perso.jpg" /></p>
</div>

<ul id="ssmenu">
<li><a href="#ici">ssmenu1</a></li>
<li><a href="#ici">ssmenu2</a></li>
<li><a href="#ici">ssmenu3</a></li>
<li><a href="#ici">ssmenu4</a></li>
</ul>

<ul id="menu">
<li><a href="#ici">menu1</a></li>
<li><a href="#ici">menu2</a></li>
<li><a href="#ici">menu3</a></li>
<li><a href="#ici">menu4</a></li>
</ul>



<div id="footer" style="height:80px; background:#ddd; margin-top:0;"><img id="logo" src="perso.jpg" /> Ici le footer</div>

</body>

Je te propose la page suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>
             test utuk
        </title>

<style>
h1 {
margin-left:25%;
background:blue;
height:3em;
}

#content {
margin-right:10%;
margin-top:4em;
margin-left:20%;
}

#rightnav {
float:right;
margin-right:3%;
margin-top:-50px;
width:50px;
margin-bottom:0;
}

body>#rightnav {
margin-right:6%;
}

#rightnav p {
margin-bottom:0;
margin-top:0;
}

#log {
background:yellow;
position:absolute;
top:12em;
right:10px;
}

#ssmenu {
font-weight:bold;
height:2em;
background:blue;
position:absolute;
top:2em;
right:5%;
}

#ssmenu li {
display:inline;
}

#ssmenu a {
color:#aaa;
}

#menu {
list-style:none;
padding-left:0;
margin-left:0;
position:absolute;
top:10em;
left:1%;
width:15%;
height:8em;
background:maroon;
}

#menu li {
margin-left:0;
}

#footer {
margin-left:15%;
}

#logo {
display:block;
position:relative;
left:-15%;
margin-top:0;
}
</style>
</head>
<body>
<h1>Titre page</h1>

<div id="content" style="height:700px; background:#afa;">
...
Ici le contenu
...
</div>

<div id="rightnav">
<p id="log">Loggin</p>
<p><img src="perso.jpg"></p>
</div>

<ul id="ssmenu">
<li><a href="#ici">ssmenu1</a></li>
<li><a href="#ici">ssmenu2</a></li>
<li><a href="#ici">ssmenu3</a></li>

<li><a href="#ici">ssmenu4</a></li>
</ul>

<ul id="menu">
<li><a href="#ici">menu1</a></li>
<li><a href="#ici">menu2</a></li>
<li><a href="#ici">menu3</a></li>
<li><a href="#ici">menu4</a></li>
</ul>



<div id="footer" style="height:80px; background:#ddd; margin-top:0;"><img id="logo" src="perso.jpg"> Ici le footer</div>

</body>
</html>

Ton avis ...

++

<edit>
Pour les images perso et logo j'ai utilisé un carré de 50px de coté.
</edit>
Modifié par clb56 (20 Jul 2005 - 18:28)

hmmm
la structure me semble pas mal
simplement je ne vois toujours pas comment positionner mon perso.jpg de manière à l'avoir "posé" sur le footer
dans le petit shéma que j'ai fait, on voit qu'il est positionner en bas à droite, juste au dessus du footer
l'idée est que quand la page s'étire en hauteur, le personnage reste sur le footer.
peut être que la solution alors est de le mettre dans le footer

bon, je vais faire mieux que de long discour, c'est te montrer la belle maquette que je dois mettre en page (je prend soin de masquer certaines zones pour des raisons de confidentialité...)