CSS pour faire maquette de base avec bannière et 3 colonnes

shinobi93 · 17/10/2011, 17h20

Salut tout le monde,

Pour un petit site web que je suis occupé à créer, j'aurais besoin d'aide au niveau css vu que je n'y connais rien.

Voila une petit image de ce a quoi doit ressembler mon site:

J'utilise le code suivant, mais je ne sais pas si c'est juste:

Code :

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

1
2
3
4
#container{width:100%;} 
#left{float:left;width:100px;} 
#right{float:right;width:100px;} 
#center{margin:0 auto;width:100px;}

Code html :

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

1
2
3
4
5
6
7
<body>
<div id="container"> 
  <div id="left"></div> 
  <div id="right"></div> 
  <div id="center"></div> 
</div> 
</body>

merci d'avance!

Malinaka · 17/10/2011, 17h31

Bonjour,
Juste deux petites astuces: il est plus facile de travailler avec des style qui correspondent à une réalité fonctionnelle, même si les left, right en intitulés ne sont pas faux. D'autre part, si tu mets des flottants, pense à clear, pour eviter les surprises.
D'autre part, je ne retrouve pas dans ton css les éléments de ta maquette, quelque chose à du m’échapper.

12monkeys · 17/10/2011, 21h54

Bonsoir

Tu as ce tutoriel qui indiques comment faire de la mise en page en CSS : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/. Avec un minimum d'adaptation tu auras ce que tu veux avoir.

oceane751 · 18/10/2011, 16h03

moi non plus je ne comprends pas..
ton centre à l'air plus grand que le left et le right sur l'image..
alors que dans ton css, tout est de la meme taille..

une div générale par exemple à 800px;
puis dans l'ordre :

Code :

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

1
2
3
4
un left : en float:left; avec 200px;
un centre en float:left; avec 400px;
un right en float:left; avec 200px;
le tout fait donc 800px;

17/10/2011, 21h54	#3
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 619 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 619 Points : 6 232 Points : 6 232	Bonsoir Tu as ce tutoriel qui indiques comment faire de la mise en page en CSS : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/. Avec un minimum d'adaptation tu auras ce que tu veux avoir. __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

17/10/2011, 17h31	#2
Malinaka Membre actif Apprenti/ Dev C++ Inscription : décembre 2009 Messages : 105 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Apprenti/ Dev C++ Secteur : Finance Informations forums : Inscription : décembre 2009 Messages : 105 Points : 175 Points : 175	Bonjour, Juste deux petites astuces: il est plus facile de travailler avec des style qui correspondent à une réalité fonctionnelle, même si les left, right en intitulés ne sont pas faux. D'autre part, si tu mets des flottants, pense à clear, pour eviter les surprises. D'autre part, je ne retrouve pas dans ton css les éléments de ta maquette, quelque chose à du m’échapper.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email