[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)

Salut,

tes descriptions sont assez précises, mais j'ai quand même du mal à visualiser la chose

T'as pas l'image de la maquette ?

A priori de ce que je lis, rien d'impossible, mais bon, je vais avoir du mal à t'aider si je visualise pas la chose...

Sinon, pour ton menu flash, tu peux le ranger dans les cartons, c'est pas question d'être anti flash ou quoi que ce soit, c'est que c'est désolé, je trouve pas d'autre mot ^^, c'est une connerie !

Je m'explique (ne t'offusque pas hein ), imagine dans un premier temps un utilisateur n'ayant pas le plugin flash... ahh bah zut, il ne peut pas visiter ton site du tout, plus rien n'est accessible...
Là tu vas me dire, c'est un portail de jeux, les visiteurs ont tous flash, à la limite, on peut le concevoir, même s'il ne faut jamais douter que la configuration d'un visiteur peut être à 300 lieues de ce qu'on pense, donc imagine maintenant le magic' google ou ses cousins les yahoo et compagnie, leurs petits robots arrivant sur ce menu en flash vont péter un cable et passer leur chemin et l'indexation de ton site sera catastrophique.

J'aimerais bien voir pourquoi tu utilises flash pour un menu, je ne vois généralement aucun interet pour un menu, ça clignote, ça fait bip bip, rien de plus énervant pour le visiteur, ça fait juste marrer le webmaster finalement

Voilà voilà, désolé c'est un peu sec, mais le prend pas mal c'est pas dit dans ce sens.

no problemo
rassure toi je ne m'offusque pas
bon, pour monsieur google, tout est prévu.
premièrement, dans mon footer j'ai un lien vers une page qui s'appelle "plan du site" donc, les bots seront contents.
Maintenant, les gens qui n'ont pas encore le plug in flash d'installé, comme dirait didier super, " j'ai la solution, la déportation ..."
pardon, c'est un peu fort, mais on peut quand même estimer que 90 à 95 % des internautes utilisent flash.
Bref, pour l'instant on peut toujours faire machine arriere et remplacer un beau menu flash tout funkysexy par un menu plus classique, mais disons que je me poserai la question plus tard, une fois que ma page fonctionnera correctement, et que fièrement le montrerai à mes collègues comme je suis devenu fort en xhtml+css (^^)

Bon, maintenant, un petit coup de photoshop, je vous fait un shema de ma page... je le post dans quelques minutes

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...

on peut aussi procéder étape par étape.
Pour l'instant ce qu ime bloque vraiment, c'est l'alignement vertical.
Dans un tableau, on pouvait facilement dire à une celulle d'avoir un alignement vertical "bas" par exemple.

La, mon bloc "perso" j'aimerais bien qu'il soit aligner en bas, posé juste au dessus du footer.
Il a donc un flot:right; pour se situer à droite du bloc content.

J'ai aussi oublié un bloc dans mon dessin.
C'est le bloc "login" qui contiendra le formulaire pour se loguer.
Il est situé à droite de bloc content (il devrait aussi avoir droit à son float:right;, à moins que je ne fasse un div dans lequel je met tous mes éléments situés à droite -> le perso et le formulaire de login)

Mais pourquoi vous êtes toujours contre flash ? Pas besoin de menu supplémentaire ou quoi que ce soit ! Flash, tout comme les image, peut avoir du contenu alternatif. C'est même écrit la

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...

++

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 !

<body>
 <div id="container">
	<div id="top">
		<h1>titre de la page-> remplacée par une image</h1>
                <p><a href="lien.php" title="blabla">exemple de sousmenu</a></p>
	</div>
	<div id="Menu">

	</div>
	<div id="rightNav">
                <p id="login">
			formulaire de login
		</p>
		<p id="perso">
			<img src="img/persos/hus1.gif"  alt="">
		</p>
	</div>
	<div id="content">
		<h2>et hop un titre</h2>
		<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
		</p>
		<p>
		Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
		</p>
	</div>
	<div id ="footer">
		<a href="lien.php" title="blabla">lien</a> <a href="lien.php" title="blabla">lien</a> <a href="lien.php" title="blabla">lien</a> <a href="lien.php" title="blabla">lien</a>
	</div>
</div>
</body>

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)

d'accord
j'ai testé de mettre mon contenu en premier
cependant la mise en page a sauté
en effet, le div "menu" est un div flottant avec le paramètre float: left.
A priori le div doit être situé avant le div à gauche duquel il est censé se trouver, en l'occurence le div "content" ici !

pour les liens, quel est l'interet d'utiliser des listes ?
si c'est pour les séparer visuellement, j'avais prévu de préparer mon css de sorte que les balises <a> aient un padding à gauche avec une image en background pour séparer le lien du lien qui est directement à sa gauche

sinon, pour répondre à ta question l'image perso sera utilisée pour afficher une illustration (un des personnage du jeu en random)

<edit> pour le logo j'ai oublié de le mettre dans le code html pardon^^
d'ailleurs il reste d'autres éléments que je vais rajouter après, comme un lecteur de flux RSS (à priori en flash -pardon- ) qui permettra
mais bon, je me concentre déjà sur la mise en page des premiers éléments, et j'ai encore beaucoup à faire !
Modifié par utku (20 Jul 2005 - 15:30)

utku a écrit :
d'accord
j'ai testé de mettre mon contenu en premier
cependant la mise en page a sauté

comme je te l'ai indiqué précédemment à structuration différente, css différente pour un même rendu visuel donc pas de panique sur ce point.

Pour la mise en liste des série de lien c'est simplement la solution considérée comme la plus adéquate par tout le monde, mais ce n'est pas une obligation. Par contre ne t'y trompe pas celà ne correspond à aucun but de rendu visuel, c'est simplement le choix d'un balisage ad hoc que les css vont de toute façon triturer dans tous les sens.

Bon je me penche un peu sur tout ça et je repost + tard.

merci beaucoup
bon, j'ai eu une idée pour "poser" mon perso au dessus du footer
je l'ai tout simplement mis dans le footer et je l'ai remonté avec un margin-top négatif (on peut considérer que toutes mes illustrations auront la même taille)

mais bon, je me dis qu'il y a moyen de le placer dans le rightNav et faire en sorte de l'aligner en bas de la page pour qu'il se retrouve au dessus du footer

c quand même pas simple le css ! ou alors j'ai trop fait de tableaux, et je ne prend pas le problème du bon coté !

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é...)

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)