Menu je veux te mettre au centre

**nimois3O** · 05/07/2007, 11h36

Bonjour,
Voila la 1ére page de mon site internet :

J'aimerais :

* Que mon menu soit centré sur ma page
* Que les titre de mon menu soit centré a l'horisontale et a la verticale

Si quelqu'un pouvais m'aider...svp

Mon code HTML :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<title>Presentation</title>
 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
 
<!-- Menu -->
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Robots" content="follow" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
 
<!----------------->
 
<style type="text/css">
   @import "page.css";
</style>
 
<style type="text/css">
    @import "menu.css";
</style>
 
</head>
 
 
 
 
<div class="divCentre">
<br>
<br>
<center><img src="fracespetj.png"></center>
<br>
 
<!--.............DEBUT MENU................-->
 
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
<!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
 
 
<!-- liste imbriquée de liens qui fera office de menu -->
<ul id="menu">
    <li><a href="page.htm">Accueil</a>
    </li>
 
    <li><a href="patines.htm" >Patines et chaux</a>
    </li>
 
    <li><a href="imitations.htm" >Imitations</a>
    </li>
 
    <li><a href="trompeloeil.htm">Trompe l'oeil</a>
    </li>
 
    <li><a href="baches.htm">Bâches peintes</a>
    </li>
 
    <li><a href="tableaux.htm">Tableaux</a>
    </li>
 
    <li><a href="projets.htm" >Projets</a>
    </li>
 
    <li><a href="contacts.htm">Contact</a>
    </li>
 
 
</ul>
 
<script type="text/javascript">
    initMenu();
</script>
 
<!--.............FIN MENU................-->
<br><br><br><br>
 
<!-- Modifier le style -->
 
</head>
 
<body bgcolor="#377BC4" text ="#0B5690" style="font-size:12pt;font-family:arial;">
 
 
<br>
<br>
<center><img src="presentation.jpg"></center>
<br>
<br>
<center>Vous proposent un large éventail de techniques pour répondre aux attentes les plus diversifiées :</center>
<br>
<br>
~ Patines<br>
~ Imitations de bois, marbres, pierres etc...<br>
~ Badigeon à la chaux<br>
~ Plâtre et chaux cirés<br>
~ Stucco <br>
~ Décors en trompe-l'oeil<br>
~ Meubles peints<br>
~ Rénovation de meubles de cuisine et de salle de bains<br>
~ Peinture générale d'intérieur<br>
<br>
<br>
<center> /!\ Les couleurs des photos peuvent variées d'un écran à l'autre /!\</center>
<br><br>
<center><img src="tableau.jpg"></center>
<br><br>
</body>
</html>

Mon code CSS menu :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/* CSS du menu horizontal, bieler batiste */
 
.menu{
    position:absolute;
    display:block;
    margin:5;
    padding:0;
    width:970px;
    height:120px;
    margin-top: 20px;
    }
 
.menu ul{
    position:absolute;
    display:block;
    width:80px;
    margin:0;
    padding:0;
    }
 
.menu li ul{
    visibility:hidden;
    }
 
.menu li li ul{
    position:absolute;
    margin-left:183px;
    margin-top:-23px;
    }
 
.menu li{
    list-style:none;
    width:120px;/*espacement entre les intitulés*/
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    }
 
.menu li li{
    display:block;
    float:none;
    color: #FF0000;
    height:22px; /*espaement entre les sous-menu*/
    }
 
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }
 
/* possition initaile*/
 
.menu a{
    text-align:center; /*alignement du text*/
    background-color: #377BC4; /*couleur du fond*/
    border:1px #ffffff solid; /* bordure (taille, couleur, etat */
    color:#FFFFFF; /*couleur du text*/
    display:block;  /*type d'element*/
    width:120px;  /*longeur cases*/
    height:30px;
    text-decoration:none; /* decoration du text*/
    padding:px 0; /*marge interieure*/
    margin:1px;  /*marge exterieur*/
    }
 
/*passage de la sourie*/
 
.menu a:hover
{
    background-color: #FFFFFF;/*couleur du fond*/
    border:1px #ffffff solid;/* bordure (taille, couleur, etat */
    color: #377BC4; /*couleur du text*/
    cursor : crosshair; /*type de curseur*/
    }
 
 
/* for a mozilla better display with key nav 
.menu a:focus{
    background-color: #aaf;
}
 
a.linkOver{
    background-color: #eee;
    }
*/

Merci de votre aide...

**Ermanpoe** · 05/07/2007, 12h01

Salut,

Je peux te proposer une solution avec des "div" imbriquées et avec un positionnement en css.

voici un exemple pour l'html :

Code :

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

1
2
3
4
 
<div id="title">
    <div id="imgBan"></div>
</div>

pour le css :

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
 
#title {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 800px;
	height: 250px;
	border: 1px solid #000000;
}
#imgBan {
	position: absolute;
	top :         50%;
	left :        50%;
	width :       400px;
	height :      150px;
	margin-left : -200px;
	margin-top :  -75px;
	border :      1px dotted #000000;
}

voila, j'espère t'avoir un peu aider.

Menu je veux te mettre au centre

HTML

Vue hybride

Discussions similaires

Partager

Partager