Définir mon menu fixe dans la marge de ma page

Invité · 23/02/2010, 15h52

Tout d'abord, bonjour à tous, je viens juste me m'inscrire ici :O

Alors j'ai l'impression que des questions similaires ont été posé mais comme les réponses ne m'éclaircissent pas, je post un nouveau topic (rho le chieur^^)

Alors en faite, avec mon fichier css, j'ai défini le corps du texte à 150 pixel de la gauche comme ça

Code :

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

1
2
3
4
5
6
body	{
MARGIN-TOP:0;
MARGIN-LEFT:150px;
MARGIN-BOTTOM:0;
MARGIN-RIGHT:0;
}

Du coup le menu fixé que j'ai fait serait à l'extérieur des balises body, et ce placera alors à l'emplacement de la marge. Il ferait alors 150 pixels de largeur, mais pour la hauteur il faudrait qu'elle se définisse automatiquement en fonction de la résolution de l'écran. Voici une petit image, de comment devrait être organisé la page, pour que ce soit plus claire:

Voici le code que j'utilise pour mon menu fixe mais je vois franchement pas comment le fixé pile à l'emplacement de ma marge

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 20 px;
  left: 20 px;
  width: auto;
  right: auto;
}

Je crois avoir compris que c'est la valeur de width qu'il faut changer et j'ai vu sur certains topic qu'on pouvait mettre genre 100 %, je me suis dis cool mais on a répondu après que ça marchait pas forcément dans tous les cas...

**austriker** · 23/02/2010, 18h40

Bonsoir,
Bon tout d'abord, il ne faut jamais mettre des balises html hors du Body.
Ton body n'est pas simplement le contenu de ton site mais tout ton site.
Donc ton menu fixe doit se trouver dans le body.
je te donne ici un petit exemple rapide de ce que tu peux faire, qui a priori est compatible avec IE.

Code :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
	border:0;
	height:100%;
}
#menu {
	position:fixed;
	width:150px;
	height:100%;
	background:#666;
	border:none;
}
#content_wrap {
	position:absolute;
	top:0;
	left:150px;
	right:0;
	height:100%;
	background:#CCC;
	display:block;
}
#header {
	display:block;
	height:25px;
	background:#000;
	color:#FFF;
	padding:10px;
	text-transform:uppercase;
}
#content {
	padding:10px;
}
</style>
</head><body>
<div id="menu">Menu</div>
<div id="content_wrap">
  <div id="header">Mon site</div>
  <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae neque tellus. Morbi hendrerit tincidunt lorem, nec elementum turpis scelerisque vitae. Quisque nisl tortor, placerat sodales sagittis at, tincidunt at sapien. Nullam dignissim pellentesque turpis ultricies mattis. Ut dui neque, imperdiet eget tincidunt vel, fermentum vel dui. Duis eu ultricies libero. In ultricies, purus </div>
</div>
</body>
</html>

Voilà, fais toi plaisir, bricole le, joue avec.
Sachant que la div menu est résevée à la colonne qui te sert de menu et l'autre (content_wrap) pour tout le reste (header, contenu, footer).

En éspérant t'avoir aidé.
Austriker.

EDIT: Au passage, évites les majuscules dans ton CSS, c'est pas beau!

Invité · 01/03/2010, 18h58

Merci pour cette réponse rapide et désolée de pas avoir répondu après.

J'avoue n'avoir pas été très aidé par votre réponse en premier lieu, et cela m'a même découragé quelque temps pour m'y remettre. Là je viens de tenir compte de vos conseils, j'ai essayer de passer mon menu dans le body et j'ai piquer les bout de codes qui me semblait intéressant et qui pouvait m'aider et ça commence à ressembler à ce que j'imaginais. Je vais continuer à bricoler cela et quand ce sera finit je viendrait poster un lien vers le site et vous me direz si il n'y a pas trop de problème et je penserai également dans le même temps à mettre le topic en résolu si vous ne voyez aucune erreur dans le site!

PS: Les majuscules dans le CSS c'est parce que c'est copié/collé

Définir mon menu fixe dans la marge de ma page

CSS

Discussions similaires

Partager

Partager