Bonjour,
J'ai un petit souci avec un menu au footer, je n'arrive pas à le centrer dans le bloque dans le quelle il est.
https://jsfiddle.net/gg8ed1zL/
Si vous aviez une solution !
Bonjour,
J'ai un petit souci avec un menu au footer, je n'arrive pas à le centrer dans le bloque dans le quelle il est.
https://jsfiddle.net/gg8ed1zL/
Si vous aviez une solution !
Bonjour,
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 ul#footer-serv { width: 615px; display: block; margin: 0 auto; text-align:center; } ul#footer-serv > li { list-style-type: none; display: inline-block; margin: 0 10px; }
Excuse moi, je me suis trompé, j'ai oublié un morceau de CSS plutôt important :
https://jsfiddle.net/gg8ed1zL/5/
Avec le inline block, je n'ai plus mes liste style.
Et bien, je voudrais centrer mon menu tout en gardant mes list style.
Bonjour,
quand on ne trouve pas de solution, on cherche dans une autre direction.
En voici une :
Ou :
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
15
16
17 ul#footer-serv { width: 615px; display: block; margin: 0 auto; background-color: white; text-align:center; } ul#footer-serv > li { list-style-type: none; display: inline-block; } li.lst-type:before { content:'.'; font-size:300%; line-height:0.01em; color: #448499; margin: 0 10px; }
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 li.lst-type:before { position:absolute; display:block; content:''; left:-8px; top:0; font-size:24px; line-height:20px; color: #448499; padding: 0 10px; }
Dernière modification par Invité ; 30/08/2016 à 09h38.
Une autre solution, utilisant font-awesome : http://codepen.io/jreaux62/pen/qaWkLV
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 <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> <div class="col-md-12 footer-img"> <div class="menu-footer"> <ul id="footer-serv" class="menu"> <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"> <i class="fa fa-circle" aria-hidden="true"></i><a href="http://concortel.galago.fr/fr/chambres-suites/">Chambres & suites</a></li> <li id="menu-item-51" class="lst-type menu-item menu-item-type-post_type menu-item-object-page menu-item-51"> <i class="fa fa-circle" aria-hidden="true"></i><a href="http://concortel.galago.fr/fr/lhotel-en-images/">Lhôtel en images</a></li> <li id="menu-item-50" class="lst-type menu-item menu-item-type-post_type menu-item-object-page menu-item-50"> <i class="fa fa-circle" aria-hidden="true"></i><a href="http://concortel.galago.fr/fr/votre-sejour/">Votre séjour</a></li> <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"> <i class="fa fa-circle" aria-hidden="true"></i><a href="http://concortel.galago.fr/fr/avis-et-commentaires/">Avis et commentaires</a></li> <li id="menu-item-48" class="lst-type menu-item menu-item-type-post_type menu-item-object-page menu-item-48"> <i class="fa fa-circle" aria-hidden="true"></i><a href="http://concortel.galago.fr/fr/offres-exclusives/">Offres exclusives</a></li> <li id="menu-item-47" class="lst-type menu-item menu-item-type-post_type menu-item-object-page menu-item-47"> <i class="fa fa-circle" aria-hidden="true"></i><a href="http://concortel.galago.fr/reserver/">Réserver</a></li> <li id="menu-item-402" class="lst-type menu-item menu-item-type-post_type menu-item-object-page menu-item-402"> <i class="fa fa-circle" aria-hidden="true"></i><a href="http://concortel.galago.fr/fr/actualites/">Actualités</a></li> </ul> </div> </div>
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
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 .menu-footer a { color: black; font-family: Brandon_blk; text-transform: uppercase; font-size: 12px; letter-spacing: 2px; font-weight: 100; } .menu-footer a:hover{ text-decoration: none; color: #448499; } ul#footer-serv { width: 615px; display: block; margin: 0 auto; background-color: white; text-align:center; } ul#footer-serv { width: 615px; display: block; margin: 0 auto; background-color: white; text-align:center; } ul#footer-serv > li { position:relative; list-style-type: none; display: inline-block; } ul#footer-serv > li.lst-type { padding-left: 12px; } li.lst-type > .fa { position:absolute; display:block; content:''; left:0; top:6px; font-size:8px; line-height:8px; color: #448499; } li:not(.lst-type) > .fa { display:none; }
En effet, ça marche ! Encore une fois, merci.
LA LECON DU JOUR :
Inutile de s'acharner quand on est dans l'impasse.
Il existe souvent des voies de contournement.
Le tout est de savoir prendre du recul, et garder l'esprit ouvert.
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager