Discussion :

[bloups0]

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 !

[Invité]

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;
}

• FAQ CSS : Positionnement

[bloups0]

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.

[mathieu]

https://jsfiddle.net/gg8ed1zL/5/

je n'ai pas compris ce que vous cherchez à faire dans cet exemple de code

[bloups0]

Et bien, je voudrais centrer mon menu tout en gardant mes list style.

[Invité]

Bonjour,

quand on ne trouve pas de solution, on cherche dans une autre direction.

En voici une :

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;
}

Ou :

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;
}

[bloups0]

Merci, sur le fiddle ça marche super bien, mais sur le site web...



Je sais pas vraiment pourquoi, je n'ai pas d'autre style d'appliqué pourtant. ( Surtout pour les puces carré, j'ai enlevé le margin pour l'espacement ).

[Invité]

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 &amp; 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/">L’hô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; }

[bloups0]

En effet, ça marche ! Encore une fois, merci.

[Invité]

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.