Gabbarit centré -

Bonjour,

j'aimerais obtenir un gabbarit de ce genre en css (voir "dessin" :d), et malgré mes recherches (notamment dans les gabbarits alsacreations), je ne trouve pas mon bonheur. Je n'ai pas d'idée sur la mise en oeuvre de ce genre de technique ... si vous pouviez m'aider.

--------------------- LARGEUR PLEINE PAGE ------------------------
-------------------------------------------------------------------
-....largeur auto......-......largeur fixe 980px.....-.....largeur auto........-
-..........................-...................................-............................-
-..........................-...................................-............................-
-..........................-...................................-............................-
-..........................-...................................-............................-
-..........................-...................................-............................-
-..........................-...................................-............................-
-..........................-...................................-............................-
-..........................-...................................-............................-
-..........................-...................................-............................-
-------------------------------------------------------------------

Merci à vous.
Modifié par mcorgnet (17 Apr 2007 - 08:41)

qu'y a-t il exactement dans tes largeur auto ?

Parce que 980 ca me semble déjà très large ! Donc s'il y a des info dans les largeurs auto, ca risque d'être vraiment trop large...

Bonjour, et merci de ta réponse.

J'ai mis 980 complètement au hasard. En réalité, la largeur centrale c'est 750px.

Simplement, je n'arrive pas à automatiser la largeur des blocs de droite et de gauche, pour que le bloc du centre reste centré.

Salut

Page HTML :

<div id="global">

     [i]contenu de ton site là[/i]

</div>

CSS :

body {   
margin:0;
text-align: center; /* pour corriger le bug de centrage IE */ }

#global {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 750px; }

Modifié par BeliG (16 Apr 2007 - 14:39)

rha super !

c'est exactement ça, BeliG. En fait, faut que je puisse maintenant ajouter des éléments à gauche et à droite du global. Mais je vais pouvoir me débrouiller.

Merci beaucoup.

mcorgnet a écrit :
c'est exactement ça, BeliG. En fait, faut que je puisse maintenant ajouter des éléments à gauche et à droite du global. Mais je vais pouvoir me débrouiller.

Aheum... tu en es vraiment sûr? À priori, ce n'est franchement pas si évident.

Benjamin D.C. a écrit :
Aheum... tu en es vraiment sûr? À priori, ce n'est franchement pas si évident.

Voui mais en fait, si je cherche pas un peu quand même ...

Disons que là, ça faisait depuis ce matin que je galérais sans trouver de solution.

Votre aide m'a été précieuse, et le sera sûrement encore. Mais quand même, j'ai l'habitude des forums, j'aime pas abuser.

z'allez rire ...

j'y arrive pas.

Tu vas rire, mais la solution que je t'ai donné ne permet absolument pas de faire ce que tu veux

Tu aurais dû être plus explicite dans ta question d'origine, j'avais pas prévu qu'il devait y avoir du contenu sur la gauche et la droite du bloc central

mcorgnet a écrit :
z'allez rire ...

j'y arrive pas.

Tu vas rire, je vais me répéter :

Florent V. a écrit :
Mais pour te conseiller efficacement, il faudrait avoir un aperçu un peu plus solide de ce que tu veux faire. Où sont placés les contenus, à quoi ressemble l'habillage graphique, etc.

D'accord, voici ce que j'essaie de mettre en place :

(pardon pour l'image en gros)

http://www.lavisducitoyen.com/protected/mathieu/meyer.JPG

Le but, c'est de centrer tout ça, à savoir que le bloc central a une taille fixe, et que les blocs de droite et de gauche s'étirent en fonction de la résolution.

Ca peut se faire, j'imagine.

Mais je ne vois pas comment, en fait.

j'ai créé trois blocs :

#gauche {
	position: relative;
	float: left;
	background-color: blue;
}
#centre {
	margin: 0px auto;
	text-align: left;
	width: 750px;
}
#droite {

}

Modifié par mcorgnet (16 Apr 2007 - 17:22)

Pas pour paraître insistant hun ... J'ai cherché, j'ai lu pas mal d'interventions dans les divers topics du forum, j'ai aussi lu les articles sur le positionnement des blocs en css ...

je ne trouve pas de solution à mon problème. Si c'est pas possible, il suffit de me le dire et je ne centrerai pas.

Salut,

Je crois qu'un bon vieux tableau fera l'affaire !
Il existe des solutions "sans" mais difficilement gérables si on doit mettre du contenu dans les colonnes extérieures.

Bonjour, merci de ta réponse.

Je n'ai pas le choix, je ne passerai pas par des tableaux pour différentes raisons, notamment de xhtml strict.

Donc, il me faut la solution en css ... si elle existe.

J'ai un dégradé à gauche, sur cette image, je ne sais pas comment l'appliquer. Mon graphiste insiste pour que je le mette en place, et c'est la dernière chose qui me fasse défaut (le dégradé à gauche du sous menu, et sous le menu principal).

Bref, si quelqu'un saurait m'expliquer, je l'en remercie.

Merci encore de votre aide.

Salut Mcorgnet,

En fait, ton design n'as besoin que de trois colonnes css.

en gros, il te faudrais une grosse div centrale qui contiendrais les deux colonnes.

Apres tu met ton contenu avant ta colonne de gauche et tu lui met un float:left.

Normalement ce n'est pas compliqué.

Arf, pour avoir la barre du menu qui contenu en background, tu peux créer le motif que tu fais répéter sur les x et positionner en hauteur fixe (pour que ca coincide avec ton menu de ton conteneur. Je te fais une image rapide de ce que je pense serais possible en css).

Salut,

s'il ne s'agissait que de trois colonnes, ça serait parfait.

Comme je l'ai expliqué plus haut, ce design a été centré, et la div du centre a une largeur fixe. Ca change à peu près tout, je crois ...

Ca fait depuis hier que j'essaie de mettre en place trois colonnes, avec les colonnes de gauche et de droite qui s'alignent sur celle du centre. Du moins qui viennent s'y "coller".

Evidemment, si j'y arriverais, je ne poserais pas la question. ...

Merci encore

Voici la photo, c'est ce que tu souhaiterais avoir ?

Ce n'est pas compliqué du tout de faire ça (enfin je pense). ce n'est pas la largeur fixe qui coince, je ne vois pas pourquoi.

En gros voici la css de la photo que je t'ai donné :

body{
	background: #FFF url(images/fond_menu.gif) repeat-x;
	background-position: left 80px;
}

#bleu{
	width: 750px;
	margin-left: auto;
	margin-right: auto;
}
#gris{
	width: 100%;
	height: 100px;
}
#vert{
	width: auto;
	height: 200px;
}
#jaune{
	width: 550px;
	height: auto;
	float:right;
}

La page html qui affiche ce que tu veux :

<!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>
<style type="text/css">
			body{
	background: #FFF url(images/fond_menu.gif) repeat-x;
	background-position: left 80px;
}

#bleu{
	width: 750px;
	margin-left: auto;
	margin-right: auto;
}
#gris{
	width: 100%;
	height: 100px;
}
#vert{
	width: auto;
	height: 200px;
}
#jaune{
	width: 550px;
	height: auto;
	float:right;
}
			</style>

</head>

<body>

<div id="bleu">

<div id="gris">

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Donec ut enim id ipsum iaculis adipiscing.</li>
<li>In luctus turpis vel diam.</li>
</ul>

</div>

<div id="jaune">

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hendrerit erat et sapien. Nulla pretium felis nec arcu. Praesent mauris neque, mollis non, iaculis in, egestas a, leo. Suspendisse orci. Aliquam vel arcu. Proin lectus. Aenean tincidunt ante in eros. Praesent nonummy nonummy nulla. Integer risus magna, ullamcorper in, porttitor quis, posuere hendrerit, orci. Etiam augue risus, malesuada sed, vestibulum ut, molestie faucibus, risus. Duis luctus. Sed pellentesque.
</p>
<p>
Donec est tortor, faucibus varius, molestie ut, aliquet viverra, nibh. Sed non justo. Nulla facilisi. Duis vitae tortor. In ultricies nisi at nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fringilla ipsum nec elit. Mauris malesuada, nisl et convallis sodales, justo tortor congue lacus, et imperdiet pede sem non dolor. Cras id odio vitae nisi ornare consectetuer. Ut diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In hac habitasse platea dictumst. Aenean vel leo. Aenean tempor, nulla quis tempus vulputate, risus felis eleifend purus, sed lobortis metus lorem ut felis. Donec vulputate massa et urna. Etiam non eros. Donec sit amet nisl. Pellentesque vulputate. Curabitur mattis augue quis mi. Fusce mi arcu, convallis non, dictum a, tristique in, orci.
</p>
<p>
Integer a dolor nec massa porttitor tempor. Vivamus at risus eget dolor bibendum placerat. Morbi a tellus. Curabitur sit amet elit id diam sagittis varius. Duis fermentum massa non lacus. Aenean magna erat, ultricies vel, porta ut, lacinia non, arcu. Curabitur libero lectus, mollis quis, pellentesque non, bibendum eget, erat. Nulla sagittis, dui non posuere facilisis, pede sapien mollis mi, nec ultricies turpis urna posuere urna. Nullam eu eros ac risus aliquam pretium. Donec non neque. Cras condimentum tincidunt massa. Nulla eget orci. Vivamus aliquam neque eget nulla. Cras cursus, quam et vestibulum congue, elit leo consequat sem, nec pharetra massa sem at purus. Duis condimentum urna a nisl. Fusce egestas tempor lectus. Aenean gravida, felis at sagittis aliquet, lorem elit dapibus orci, id dictum velit lacus luctus ligula. Cras neque eros, consectetuer quis, gravida malesuada, consectetuer sed, felis.
</p>
<p>
Nulla adipiscing gravida lorem. Quisque porttitor auctor risus. Proin placerat suscipit leo. Vestibulum vel dolor ac neque luctus varius. Aliquam a nunc. Phasellus ut sem sit amet massa molestie placerat. Vivamus ante. Aenean quis nunc. Duis non justo quis nisl nonummy adipiscing. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque lorem augue, facilisis at, convallis sed, eleifend a, velit. In tellus. In non sapien at libero placerat volutpat. Sed blandit neque et diam. Nulla a dolor sit amet risus fermentum lobortis. Nullam ut mi non augue pellentesque placerat. Nam quis augue sed sapien egestas lobortis.
</p>
<p>
Ut fermentum, libero id tempor mollis, ipsum eros rutrum pede, eu placerat leo sem nec mi. Donec vitae quam. Mauris tempus feugiat diam. Phasellus eleifend, ante et ultrices fringilla, lacus lacus semper urna, quis tristique ligula magna quis nisi. Praesent ultrices. Duis lobortis nibh. Morbi ut metus et erat tempor mollis. Nulla quam leo, vehicula eget, dapibus vel, feugiat sed, justo. Curabitur urna. Aenean hendrerit metus vitae magna. Sed vitae diam et ante pretium egestas. In erat purus, consequat vel, semper quis, suscipit non, nulla.
</p>

</div>

<div id="vert">

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Donec ut enim id ipsum iaculis adipiscing.</li>
<li>In luctus turpis vel diam.</li>
<li>Donec molestie mauris quis eros.</li>
<li>Ut rhoncus elementum mi.</li>
<li>Nunc nec erat sit amet pede volutpat egestas.</li>
<li>Sed eu dolor suscipit lectus cursus imperdiet.</li>
</ul>

</div>

</div>

</body>

</html>

Modifié par Super_baloo8 (17 Apr 2007 - 23:27)

Je te remercie beaucoup du temps que tu as passé à faire cette maquette.

Si tu me dis que je peux mettre du contenu dans la partie blanche de gauche, sur ta maquette, notamment un dégradé différent du reste, et non répliqué dans la partie de droite ... Alors je te suis.

Je t'avoue que pour l'instant, c'est exactement cette représentation que j'ai. Juste un problème de contenu à gauche du sous menu.

Merci beaucoup.