Discussion :

[manuzed78]

Bonjour à tous
je me suis intéressé récemment à ce framework CSS innovant.

J'ai d'abord lu un tuto et ensuite j'ai téléchargé la derniere version...
Tuto : version2.?
derniere version (en date de ce post) : v 3.1

le principe des colonnes n'ayant pas changé, le tuto est loin d’être obsolète...
Et en lisant sur http://getbootstrap.com les différences et améliorations on retombe vite sur ses pieds.
Par contre, y'a un truc sur lequel j'ai pas mal galéré, c'est le menu !

On va dire que j'y suis parvenu (non sans mal car les exemples manquent je trouve) et le résultat me convient bien ... sur Chrome et IE10 mais pas sur FF (dans sa version 27)

Alors meme que je pensais éviter ce genre de désagrément avec le framework !

Voici la partie de mon site réalisé avec le bootstrap 3.1 : http://www.manu-jdr.fr/5e_index.php

regardez la différence avec FF ... les pills du menu n'ont pas la meme taille ! horreur

Pour ceux qui ont réussi à mettre en place un menu plus propre ( et surtout fonctionnel à 100%) que le mien m'indiquent comment faire please...

Voici mon menu :

Code php :

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
<?php
$path = $_SERVER['PHP_SELF'];
$file = basename ($path);
if ($file=='5e_index.php' OR $file=='5e_liste_news.php' OR $file=='5e_gary_gygax.php'){$li1='<li class="dropdown active">';}
else{$li1='<li class="dropdown">';}
if ($file=='5e_liste_membres.php' ){$li2='<li class="dropdown active">';}
else{$li2='<li class="dropdown">';}
if ( $file=="5e_liste_citations.php" OR  $file=='5e_liste_liens.php' OR $file=='5e_liste_joueurs.php' OR $file=="5e_livre_or.php"){$li5='<li class="dropdown active">';}
else {$li5='<li class="dropdown">';}
?>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-collapse collapse">
                <ul class="nav nav-pills nav-justified">
                    <?php echo $li1; ?>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Accueil <span class="glyphicon glyphicon-home"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="5e_index.php">Accueil DD5</a></li>
                            <li><a href="5e_liste_news.php">News</a></li>
                            <li><a href="index.php">Retour Portail</a></li>
                            <li class="divider"></li>
                            <li><a href="5e_gary_gygax.php">Gary Gygax</a></li>
                        </ul>
                    </li>
                    <?php echo $li2; ?>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Joueurs <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="5e_liste_membres.php">Liste des membres</a></li>
                        </ul>
                    </li>
                     <li class="dropdown">
                        <a href="#">MD</a>
                        <!--<ul class="dropdown-menu">
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>-->
                     </li>
                     <!--<li class="divider"></li>-->
                     <!--<li class="dropdown">
                        <a href="#">Test</a>
                          <ul class="dropdown-menu">
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                     </li>-->
                    <?php echo $li5; ?>
                         <a href="#"  class="dropdown-toggle" data-toggle="dropdown">Goodies<span class="caret"></a>
                            <ul class="dropdown-menu">
                               <li><a href="piwigo" target="blank" >Photos</a></li>
                               <li><a href="5e_liste_liens.php">Liens</a></li>
                               <li><a href="5e_liste_citations.php" >Citations</a></li>
                               <li><a href="5e_liste_joueurs.php" >Liste des Joueurs</a></li>
                               <li><a href="#">Statistiques</a></li>
                               <li class="divider"></li>
                               <li><a href="5e_liste_romans.php">Romans</a></li>
                               <li><a href="#">Livres DD5</a></li>
                               <li><a href="5e_livre_or.php">Livre d'Or</a></li>
                            </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

[NoSmoking]

Bonjour,
commence par virer la width:1%, cela devrait rétablir un semblant d'unitée. Ensuite si tu utilises display:table-xxx autant le faire de façon cohérante.

Code :

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

1
2
3
4
.nav-justified > li {
    display: table-cell;
/*    width: 1%;  /* OUT */
}

La UL en display:table sur toute la largeur de son conteneur

Code :

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

1
2
3
4
.nav-justified {
  display: table;
  width: 100%;
}

La navbar-header doit également occuper toute la largeur donc exit float:left

Code :

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

1
2
3
.navbar-header {
/*    float: left; /* */
}

On ne devrait pas en être loin.

[manuzed78]

OK merci NoSmoking pour cette réponse rapide mais surtout pertinente !

C'est très bien comme cela, les pills ne sont pas de taille identique (je ne veux pas mettre de largeur fixe ) mais au moins cela s'adapte au texte ...
Par contre du coup je ne comprends pas comment cela pouvait marcher avec un width à 1% et encore moins d'ou venait la différence d’interprétation des navigateurs .

[rodolphebrd]

Par contre du coup je ne comprends pas comment cela pouvait marcher avec un width à 1% et encore moins d'ou venait la différence d’interprétation des navigateurs .

N'avez-vous pas trifouiller dans le code du framework ?

[NoSmoking]

je ne comprends pas comment cela pouvait marcher avec un width à 1% et encore moins d'ou venait la différence d’interprétation des navigateurs

l'interprétation et le calcul de la largeur n'est pas forcément la même suivant les navigateur, dans une width:1% il y a peu de chance que tu puisses y mettre grande chose donc certains augmenterons la dimension jusqu'à ce que le contenu apparaisse et d'autres feront une estimation/calcul différente.

Tu peux toujours essayer d'en savoir plus en lisant Comment fonctionnent les navigateurs

[manuzed78]

Merci pour vos réponses
effectivement, les methodes d’interprétations peuvent bien différentes !
Par contre c'est plus la logique même qui me chagrine : 1% de ma largeur totale comme largeur de pills, cela pourrai faire 100 pills dans une largeur d'écran !?