Discussion :

[doobinay]

Bonjour !

Je déteste vraiment le CSS, je n'arrive jamais à faire les choses les plus simples du monde.

J'aimerais faire une maquette comme celle ci :



Un site d'une colonne à taille fixe (gris clair), disons 1000px. Mais la où je bloque c'est d'avoir le superflu gauche (bleu) et le superflu droit (rouge) de couleur différente !
Il faut bien sur que cela fonctionne sur toutes les résolutions.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="header"></div>
<div id="main">
	<div id="gauche"></div>
	<div id="centre"></div>
	<div id="droite"></div>
</div>

Avez-vous une piste ?
Merci d'avance, le css mange toute ma patience...

Bastien.

[Bisûnûrs]

Plus comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="header"></div>
<div id="main">
   <div id="gauche"></div>
   <div id="droite"></div>
   <div id="centre"></div>	
</div>

+ une largeur sur gauche et droite + un float left sur gauche + un float right sur droite + un margin-right et left sur le centre de la largeur des deux autres (sans float).

[doobinay]

Bonjour,
merci pour votre réponse.

C'est pas loin !
La même chose avec les div gauche et droite qui complètent le reste de l'écran (largeur non fixe) et c'est parfait.

J'ai une solution de fortune qui me vient en tête, en javascript calculer la taille de la fenêtre à chaque redimensionnement et après une simple opération, appliquer les largeurs aux 2 divs.

Ça m'a l'air un peu barbare comme solution, et je suis pas fan de faire de la mise en page en javascript.

[Bisûnûrs]

Tu peux pas vraiment avoir deux largeurs variables ... Sauf en bidouillant en Javascript.

[tsunamichups]

Avec des pourcentage nan ?

[doobinay]

En fait, voilà la maquette de ce que je veux faire


En rouge, le contenu fixe (1000px)

J'hésite vraiment à passer par javascript pour faire ceci. C'est pas que ce soit compliqué, juste une histoire d'accessibilité.

Peut être devrais-je tout simplement changer mon design...

[doobinay]

Je viens de feinter, je suis pas fan de ma solution du tout mais, dans un avenir proche ca suffira.


J'ai fait une image de 900px de gris. je l'ai mis en repeat-y. Cette image est le background du conteneur main.

Et j'ai mis un background-color blanc au div centre.

Pour le sous menu, j'ai qu'a mettre un div dans le centre et le mettre en float left avec background gris.

Merci pour vos réponses. Je reste quand même très déçu par les possibilités limitées du css.

Bastien

[tsunamichups]

ce n'est pas css qui est limite, s'est les navigateur qui sont limiter dans interprétation du css ...

A plus tard

[Bisûnûrs]

Aaah, mais tu ne veux pas avoir de contenu dans les deux colonnes extérieures .. Dans ce cas là c'est assez facile, tu n'as pas besoin de trois colonnes, juste d'une image de fond bien découpée :

http://josselin.willette.free.fr/cod.../mise-en-page/

Edit : Morde, j'ai mis du temps à répondre et au final tu as quasiment fait ce que j'ai fait. Mais ça reste la meilleure solution, et elle n'est pas mauvaise du tout.

[doobinay]

Yep, merci d'avoir fait ce travail
Ça limite le site à une largeur de ~3*largeur fixe.

A part en dualscreen, je vois mal des écran afficher des résolutions avec 3000px de largeur.