Mise en page et boutons (débutant)

**kennyflorian** · 05/01/2009, 23h36

Salut à tous.

Je dois faire un site internet et j'ai décidé de prendre HTML + CSS pour le réaliser pour sa simplicité.

J'ai pris un exemple sur internet que j'ai modifié à ma guise.
Je suis un peu bloqué sur le CSS.

Mon objectif est d'aligner au centre le texte, la barre de menu et le header (Que le tout reste aligné même si on redimensionne la fenetre, ma fenetre fait 900 pixels de large).

De plus je voudrais que les boutons de mon menus occupent tous le même espace horizontal et si possible soient séparés.

Comment faire ?

Je vous joins mes fichiers. Le fichier .rar contient le site. Et le fichier .jpg contient ce que j'aimerais obtenir. Ca sera plus clair qu'un grand discours.

Merci bien pour votre aide.

**GihefBey** · 06/01/2009, 01h16

Bonjour,

Pour centrer, c'est simple. On trouve des solutions facilement.

Par exemple.

Place le contenu de ta page dans un bloc.
Dimentionne-le.
Centre-le.

Code html :

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

1
2
3
4
5
6
7
<body>
  <div id="conteneur">
...
le reste
...
  </div >
</body>

Code css :

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

1
2
3
4
5
6
7
8
9
body {
  background: #eaeaea url(images/body.png);
  font-family: sans-serif;
text-align : center;
  }
#conteneur {
  width : 900px;
  margin : 0 auto;
  }

Pour le menu.
Les <span> sont inutiles. Supprime-les.
Dimentionne plutôt les <a> (900/6=150).

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#menu {
  background: black url(images/boutons.png);
  list-style: none;
  margin: 0;
  padding: 0;
/*  position: relative;*/
  height: 30px;
/*  width: 900px;*/
text-align : center;
  }
#menu li {
  float: left;
/*  margin: 0 2px;*/
  }
#menu a {
  display: block;
width : 148px; /* =150-2 à cause des border */
height: 30px;
line-height: 30px;
  text-decoration: none;
  color: black;
  background: url(images/menu-lien.png);
  cursor: pointer;
border-right : 1px solid #000;
border-left : 1px solid #000;
  }
/*
#menu span {
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background: url('images/menu-lien.png') 100% 0 no-repeat;
  }
*/

À tester.

-

**razorlok** · 06/01/2009, 09h02

Pour la redimension de la fenêtre, je te conseillerais de créer ton contenu dans une div "générale" qui contient des margin auto sur les côtés :

Code :

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

1
2
3
4
5
6
7
8
9
 
 
#container {
	position:relative;
	min-width:810px;
	max-width:990px;
	margin-left:auto;
	margin-right:auto;
}

**kennyflorian** · 07/01/2009, 18h53

Merci bien pour vos réponses ça a résolu mon problème.
A la prochaine pour de nouveaux problèmes

**kennyflorian** · 07/01/2009, 21h16

J'en profites pour poser ma nouvelle question.
Après que vous m'ayez débloqué j'ai poursuivi un peu mon chemin.
Je bloque de nouveau.
J'ai voulu mettre des bandes sur le coté pour encadrer mon texte principal. Mon problème est que j'ai 20pixels de blanc entre le menu et le texte et 16 pixels de blnc entre le texte et le footer. Impossible de trouver d'où ça vient dans le fichier CSS.
Vous avez une idée ?

Sinon au niveau de l'architecture générale de mon site, je dois faire 1 fichier HTML par page je suppose et intégrer les liens dans le menu. Non ?

Aussi comment faire pour que le bouton reste actif tant qu'un autre n'est pas enfoncé. Par exemple en ce moment si je clique sur un bouton et que je clique sur le texte en dessous, je perd l'activation du bouton.

Merci

**GihefBey** · 07/01/2009, 22h05

Il est préférable que tu indiques que ce sujet est résolu et que tu poses ta nouvelle question dans un nouveau post avec un nouveau titre...

-

Mise en page et boutons (débutant)

CSS

Discussions similaires

Partager

Partager