Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > CSS
Recharger cette page centrage impossible dans un blog
S'inscrire Règles FAQ Marquer les forums comme lus
CSS Forum d'entraide sur l'utilisation des feuilles de style CSS. Avant de poster : Cours CSS, FAQ CSS, Galerie CSS
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 18/02/2011, 22h09   #1
Invité de passage
 
Inscription : mars 2009
Messages : 90
Détails du profil
Informations forums :
Inscription : mars 2009
Messages : 90
Points : 2
Points : 2
Par défaut centrage impossible dans un blog
bonsoir a vous tous

je suis sur canal blog et j arrive pas a centrer les titres d un menu

j espère que vous pourrez m aider car j ai essayer pas mal de chose
et en plus je suis très novice voir débutant

un tout grand merci pour l aide

partie mise dans la feuille de style en 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
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
 
 
/*--------- Menu horizontal -----------*/
/* Credits: Stu Nicholls */
/* URL: http://www.stunicholls.com/menu/skeleton/skeleton.css */
 
#nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px georgia; border:1px solid #000; border-color:#000; border-width:1px 1px 1px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:30px; width: 900px; padding:0;}
 
#nav li {float:left;}
#nav li li {float:left;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
 
#nav li a {display:block; float:center; color:#000; border-right:1px solid #000; border-color:#FFF; margin:0 10px 0 10px; height:30px; line-height:30px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
 
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
 
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
 
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#;}
 
 
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:0px; margin-left:100%; top:5px;}
 
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
 
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:none; color:#FF0000;} /* Hover sur les liens */
 
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#000;} /* Les liens */
/* ================================================================
The original version  http://www.stunicholls.com/menu/skeleton.html
Copyright (c) 2005-2007 Stu Nicholls.
=================================================================== */
 
stuHover = function() {
    var cssRule;
    var newSelector;
    for (var i = 0; i < document.styleSheets.length; i++)
        for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
            {
            cssRule = document.styleSheets[i].rules[x];
            if (cssRule.selectorText.indexOf("LI:hover") != -1)
            {
                 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
            }
        }
    var getElm = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<getElm.length; i++) {
        getElm[i].onmouseover=function() {
            this.className+=" iehover";
        }
        getElm[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

et la partie a mettre dans sa feuille d acceuil
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
 
 
 
<br>
<center>
<script type="text/javascript">
 
stuHover = function() {
    var cssRule;
    var newSelector;
    for (var i = 0; i < document.styleSheets.length; i++)
        for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
            {
            cssRule = document.styleSheets[i].rules[x];
            if (cssRule.selectorText.indexOf("LI:hover") != -1)
            {
                 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
            }
        }
    var getElm = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<getElm.length; i++) {
        getElm[i].onmouseover=function() {
            this.className+=" iehover";
        }
        getElm[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
 
<ul id="nav">
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 ------------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
   <li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
</ul>
</center>
<br>
et le lien de mon blog

http://talonaiguille.canalblog.com/


un tout grand merci pour votre aide
flexi2202 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 18/02/2011, 23h14   #2
Rédacteur/Modérateur
 
Homme Jérome Debray
Responsable de projet
Inscription : mai 2009
Messages : 627
Détails du profil
Informations personnelles :
Nom : Homme Jérome Debray
Âge : 32
Localisation : France

Informations professionnelles :
Activité : Responsable de projet
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : mai 2009
Messages : 627
Points : 3 064
Points : 3 064
Salut,

Il ya tout d'abord une erreur. Au niveau de #nav li a, enleve float:center; (cela n'existe pas).

Ensuite il y a 2 façons de régler ton problème.

la plus simple, dans #nav li a, rajoute ceci:
Code css :
Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
padding-right:20px;

sinon l'autre solution consiste à mettre la bordure sur le li et non sur le a :
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
 
#nav li a {
    display: block;
    color: black;
    margin: 0 10px 0 10px;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    white-space: nowrap;
}
#nav li {
    float: left;
    border-right: 1px solid white;
}
ornitho13 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 18/02/2011, 23h21   #3
Invité de passage
 
Inscription : mars 2009
Messages : 90
Détails du profil
Informations forums :
Inscription : mars 2009
Messages : 90
Points : 2
Points : 2
mega super nickel cela fonctionne a présent

ben un immense merci a toi
flexi2202 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 18/02/2011, 23h40   #4
Invité de passage
 
Inscription : mars 2009
Messages : 90
Détails du profil
Informations forums :
Inscription : mars 2009
Messages : 90
Points : 2
Points : 2
je viens de m apercevoir que quand je clique sur le titre les sous catégories viennent chevaucher le titre du menu
comment l éviter stp
flexi2202 est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 09h20.

Nous contacter - Developpez.com - Archives - Haut de page

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum CSS

Blogs

Hébergement

 
Partenaires

Hébergement Web