Centrer le texte d'un menu horizontal CSS

Version imprimable

Voir 40 message(s) de cette discussion en une page

Tous ces z-index sont inutiles.

Le plus simple est de revenir à des choses plus simples, lapalissade (en bois!!)

Reprenons avec une structure standard pour ce genre d'exercice.

la structure HTML de la page :

Code:

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
<body>
<div id="page">
  <div id="banniere">
    <div id="colonne_gauche">
      <img src="http://club.developpez.com/webdesign/Developpez.com/Logos/newdvp_100x100_blanc.gif" alt="logo">
    </div>
    <div id="colonne_milieu_haut">
      <img src="http://club.developpez.com/webdesign/Developpez.com/Boutons/ancien/bouton_big_navy.gif" alt="bannière">
    </div>
    <div id="colonne_milieu_bas">
        <ul id="topnav">
          <li><a href="../modelev2test.html">Accueil</a></li>
          <li><a href="#">test</a>
          <div>
            <a href="../info_1.html">test 1</a> | <a href="../info_2.html">test2</a>
          </div>
          </li>
          <li><a href="info_appli.html">Applications</a></li>
          <li><a href="info_materiel.html">Matériel</a></li>
          <li><a href="info_system.html">Systèmes &amp; Réseaux</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
  </div>
  <div id="corps_page">
     <p>Filius quae clades lapide exilium ab quarto pater quae cruribus vicensimo acti Crateras ad filius per fortunas igitur cum Apollinares suam acti actitata constaret Apollinares locum clades quaedam cum Apollinares.</p>
     <p>Sibi quaesitoresque accusatores militum subditivos accitus quae subsidia imperiale tumor Vrsicinus Caesaris forensibus a subditivos abnuens certamina isdem litteris quorum cerneret agitabantur sibi militum accusatores consociatos sui exhalaret iunxerat iunxerat.</p>
     <p>Sibi honorem per superiore Syriarum velut cedentem Palaestina civitates Caesaream exstructas quasdam per et cultis exstructas ad nullam exstructas velut sed nitidis Ascalonem Palaestina exstructas exaedificavit Neapolim terris itidemque abundans.</p>
  </div>
</div>
</body>

le CSS associé

Code:

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
html, body {
  width: 100%;
  height:100%;
  font-family: Verdana;
  margin:0;
}
#page{
  width:1000px;
  min-height:100%;
  margin:auto;
  background-color: #F0F0FE;
  border-left:1px solid #B0B0FF;
  border-right:1px solid #B0B0FF;
}
#banniere{
  height:250px;
  text-align:center;
  background-color: #CBCBFE;
}
#banniere img{
  vertical-align:middle;
}
#colonne_gauche{
  width:208px;
  height:250px;
  line-height:250px;
  float:left;
  background-color: #E1E4F2;
}
#colonne_milieu_haut{
  height:149px;
  line-height:149px;
  background-color: #FFFFFF;
}
#colonne_milieu_bas{
  height:50px;
  margin-top:10px;
  padding-top:10px;
  background-color: #303050;
}
#corps_page{
  min-height:300px;
  margin:10px;
  padding:10px;
  background-color: #FEFEFE;
}

Il te reste toutefois à rajouter le style de ton menu.

Tu noteras qu'il n'y a aucune déclaration de style dans les balises (CSS inline).

La structure est plus souple, et tout est "configurable" dans la partie CSS.

Les couleurs de background ne sont là que pour visualiser la surface des éléments.

On reste à ta disposition pour d'éventuelles questions.

06/12/2012, 22h41
Bovino

Citation:

Envoyé par NoSmoking

Le plus simple est de revenir à des choses plus simples, lapalissade (en bois!!)

Désolé pour ce message inutile, mais :
:bravo:

hummm :-/

je vois ça dans ton code :

Code:

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
	<ul id="topnav"> 
		<li><a href="">Home</a></li> 
		<li> 
			<a href="">About</a> 
			<div> 
			<a href="">The Company</a>
			<a href="">The Team</a>
			<a href="">Careers</a> 
			</div> 
		</li> 
		<li> 
			<a href="">Services</a> 
			<div> 
			<a href="">What We Do</a>
			<a href="">Our Process</a>
			<a href="">Testimonials</a> 
			</div> 
		</li> 
		<li> 
			<a href="">Portfolio</a> 
			<div> 
			<a href="">Web Design</a>
			<a href="">Development</a>
			<a href="">Identity</a>
			<a href="">SEO & Internet Marketing</a>
			<a href="">Print Design</a> 
			</div> 
		</li> 
		<li><a href="">Contact</a></li> 
</ul>

...

tes sous menu doivent être aussi des listes ... ton code devrait plus ressembler (pour la partie HTML) à :

Code:

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
<ul id="topnav"> 
		<li><a href="">Home</a></li> 
		<li> 
			<a href="">About</a> 
			<ul>
				<li><a href="">The Company</a></li>
				<li><a href="">The Team</a></li>
				<li><a href="">Careers</a> </li>
			</ul>
		</li> 
		<li> 
			<a href="">Services</a> 
			<ul> 
				<li><a href="">What We Do</a></li>
				<li><a href="">Our Process</a></li>
				<li><a href="">Testimonials</a></li>
			</ul> 
		</li> 
		<li> 
			<a href="">Portfolio</a> 
			<ul> 
				<li><a href="">Web Design</a></li>
				<li><a href="">Development</a></li>
				<li><a href="">Identity</a></li>
				<li><a href="">SEO & Internet Marketing</a></li>
				<li><a href="">Print Design</a></li>
			</ul> 
		</li> 
		<li><a href="">Contact</a></li> 
	</ul>

avec une autre définition de ta sous liste : cette fois la définition des attributs CSS de ta sous liste ne doit pas etre de type list-style-type:inline

Le JavaScript ne te sert à rien pour faire ton menu.

Si ton problème est IE, n'essaie surtout pas d'utiliser CSS3, tu risques de te faire des nœuds au cerveau(pour cause de compatibilité), sachant que tu n'y arrives pas en CSS2.

sinon le site de W3C qui est l'organisme de définition des standards doit également être capable de t'expliquer comment faire tes menus.

Good luck

++
zwaldo

07/12/2012, 15h49
Muchos

Citation:

Envoyé par zwaldo

list-style-type:inline

C'est nouveau ? Ça vient de sortir ?
07/12/2012, 15h56
NoSmoking

Une erreur de frappe visiblement.

Ceci dit c'était la prochaine étape, la plus simple car en remplaçant les DIVs par des UL et en encadrant les A par des LI cela devrait fonctionner tout pareil mais plus mieux sémantiquement parlant.
Penser à modifier le CSS également.

Il resterait encore à voir l'utilisation des préfixes vendeur, propriétaire ou....
08/12/2012, 14h10
neaux

Merci à tous,

Grace à vous mon menu est nickel
il me reste quelques modifs à faire pour nettoyer le code mais j'ai réussi à faire ce que je voulais et c'est en très grande partie grace à vous.:ccool:
08/12/2012, 14h24
NoSmoking
Citation:

Envoyé par NoSmoking

Il resterait encore à voir l'utilisation des préfixes vendeur, propriétaire ou....

petite précision concernant des propriétés avec préfixe vendeur, préfixe propriétaire...
Code:

1 2 3 4 5 6 ul#topnav li ul { display: none; -webkit-box-shadow: 5px 5px 5px #818181; -moz-box-shadow: 5px 5px 5px #818181; box-shadow: 2px 2px 5px #818181; }
on termine par la notation standard.

Voir 40 message(s) de cette discussion en une page