Centrage d'un bloc div

Invité · 19/09/2012, 22h16

Hello

Je n'arrive pas à centrer le menu suivant :

http://data.imagup.com/12/1162751218.png

Ne pas se soucier de la couleur qui est à gerber c'est un essai pour ma connaissance personnel

Ma page est une table 3 * 3 , dans la case 1 colonne 2 se trouve le div "menu" , problème celui ne se met pas à gauche par defaut ?

Je veux le mettre à gauche ou centrer comment faire ?

La colonne de bouton doit se trouver aligner avec la liste déroulante du moins dans le même axe

code CSS que j'utilise

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.menu { witdh: 120 px; }
 
 
ul ul {display: none;  }
li:hover ul.niveau2, li li:hover ul.niveau3 {display:block; list-style-type : none ; list-style-image : none ;}
 
li {list-style-type : none ;}
 
.menu a:hover {background-color : darkblue ; background-image : url("../image/bouton.png") ;  }	
 
.menu a {text-align : center ; background-image : url("../image/bouton.png"); color : grey ; text-decoration : none ; display : block ; width : 140px ; line-height : 30px ; float : center ; margin-left :auto ; margin-right : auto ; background-repeat : norepeat ;  }	
 
.menu a:visited {background-color : purple ; background-image : url("../image/bouton.png") ;  }

Merci de m'aiguiller

**mcoutant** · 20/09/2012, 12h08

Salut tanka59,

Ton image n'est plus disponible donc j'ai pas très bien compris ce que tu voulais et qu'elle était ton problème.

Peux tu ré-up ton img ? merci =)

**Torgar** · 20/09/2012, 12h23

Et si possible le code HTML.

Sinon :
li:hover ul.niveau2, li li:hover ul.niveau3 {display:block; list-style-type : none ; list-style-image : none ;}
Le list-style-image à none n'est pas obligatoire puisque tu mets un list-style-type: none.

Ensuite, float: center; ça n'existe pas, c'est soit left, soit right ou bien inherit (Cf. définition de float).

Et enfin, color : grey, c'est gray (notation américaine plutôt qu'anglaise).

**Muchos** · 20/09/2012, 13h12

Envoyé par Torgar

Et enfin, color : grey, c'est gray (notation américaine plutôt qu'anglaise).

Les deux orthorgaphes sont acceptées.

+1 pour les autres remarques

**FirePrawn** · 20/09/2012, 14h25

Même si tu as raison Muchos, w3schools n'est pas du tout une référence.

Il faut arrêter de croire que ce site est en lien avec le W3C, ce n'est absolument pas le cas (procès pour utilisation abusive de nom de domaine même).

**Muchos** · 20/09/2012, 14h34

En effet ! Une rapide recherche confirme ce que dit FirePrawn : w3schools n'a aucun lien (et est même critiqué) par le w3c.

Résultat : selon le wiki du w3c, Torgar avait bien raison : Il faut écrire `gray' et non `grey'.

Merci de m'avoir révélé ça. Même si j'aime utiliser w3schools, je passerai en premier par la doc officielle du w3c.

Invité · 24/09/2012, 12h45

Nom : 1162751218.png
Affichages : 54
Taille : 103,7 Ko

Hello

Je relance le sujet voici le problème sur l'image (reposté comme ci joint )

Invité · 25/09/2012, 15h50

Bonjour,
"relancer le sujet" sans mettre le moindre code n'a aucun intérêt...

Il faut :

le CSS
le code html de la page

A priori, un simple margin:0 auto; devrait faire l'affaire :

Code :

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

.menu { witdh: 120px; margin:0 auto; }

@Muchos & Cie : même la recommandation W3C accepte les deux notations grey/gray : CSS/Properties/color/keywords => Extended colors

**Candygirl** · 25/09/2012, 16h51

Envoyé par jreaux62

même la recommandation W3C accepte les deux notations grey/gray

Le grey fait partie des extended color recensées dans le CSS Color Module Level 3 mais n'était pas présente dans les recommandations html4.01 / css2.1.

La couleur de base est le gray et certains (très ?)vieux navigateurs ne reconnaissent pas le grey.

Invité · 25/09/2012, 23h45

Oups

oubli du code html que voici :

Code html :

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
<html>
<head>
 
<link rel="stylesheet" href="css/general.css" />
 
</head>
<body>
 
<table>
 
<tr>
<th></th>
<th> </th>
<th>  </th>
</tr>
 
<tr>
<td> <div class="menu" >
 
<ul class="niveau1">
<li><a href="index.php" >Accueil</a></li>
  <li>
    <a id="b">Aéroports</a>
    <ul class="niveau2">
        <li><a href="http://www.brusselsairport.be/fr/" >Bruxelles</a></li>
        <li><a href="http://www.nice.aeroport.fr" >Nice</a></li>
        <li><a href="http://www.toulouse.aeroport.fr/" >Toulouse</a></li>
    </ul>
 </li>
 
    <li><a href="connexion.html">Connexion</a></li>
    <li><a href="monsiteweb@essai.fr" >Contact</a></li>
    <li><a href="conditiongeneraldeventes.php">CGV</a></li>
    <li><a href="creercompte.php">Créer compte</a></li>
    <li><a href="">PDF 1</a></li>
    <li><a href="">PDF 2</a></li>  
 
    <li>
    <a id="b">Tarif</a>
    <ul class="niveau2">
        <li><a href="avion.html" >Prix</a></li>
    </ul>
    </li>
</ul>
 
</div> </td>
<td></td>
<td></td>
 
</table>
 
<html>

code css :

Code css :

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

1
2
3
4
5
6
7
.menu { witdh: 120 px; margin:0 auto; }
ul ul {display: none; margin-left :auto }
li:hover ul.niveau2, li li:hover ul.niveau3 {display:block; list-style-type : none ;}
li {list-style-type : none ;}
.menu a:hover {background-color : darkblue ; background-image : url("../image/bouton.png") ;  }	
.menu a {text-align : center ; background-image : url("../image/bouton.png"); color :#c7ecff ; text-decoration : none ; display : block ; width : 140px ; line-height : 30px ; float : left ; margin-right :auto  ; background-repeat : norepeat ;  }	
.menu a:visited {background-color : purple ; background-image : url("../image/bouton.png") ;  }

Invité · 26/09/2012, 08h50

Bon. Pas grand-chose à faire avec un code pareil :
-> on n'utilise plus les <table> pour faire la mise en page !

Il faut tout reprendre depuis le début. Voici donc un peu de lecture :
=> Div et CSS : une mise en page rapide et facile

PS :
- width, pas witdh.
- no-repeat, pas norepeat
Et on peut concaténer (ex.) :

Code :

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

1
2
3
	background-color:purple; 
	background-image:url("../image/bouton.png");
	background-repeat:no-repeat;

devient :

Code :

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

	background:purple url("../image/bouton.png") no-repeat;

Autre conseil :
écrit un code CSS "propre" et lisible :

indentation,
passage à la ligne dans le code
évite les espaces avant et après les : et les ; (ou un espace juste après les : )

Ca facilitera grandement la lecture et le débogage.

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
.menu { 
	width:120px; 
	margin:0 auto; 
}
ul ul {
	display:none; 
	margin-left:auto;
}
li:hover ul.niveau2, li li:hover ul.niveau3 {
	display:block; 
	list-style-type:none;
}
li {
	list-style-type:none;
}
.menu a:hover {
	background:darkblue url("../image/bouton.png"); 
}	
.menu a {
	text-align:center; 
	color:#c7ecff; 
	text-decoration:none; 
	display:block; 
	width:140px; 
	line-height:30px; 
	float:left; 
	margin-right:auto; 
	background:url("../image/bouton.png") no-repeat;
}	
.menu a:visited {
	background:purple url("../image/bouton.png");
}

Centrage d'un bloc div

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager