Les composant de Navbar s'affichent verticalement

**Lotfiphp** · 27/03/2018, 16h15

Bonjour,
Les composant de mon Navbar s'affichent verticalement et hors le bar, j'ai passé beaucoup de temps pour trouver la source du problème mais j'ai pas réussi, merci de m'aider si possible

, voici le code:

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
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
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title Gestion Phosphate</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 
    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
 
</head>
<body>
 
    <! --NAVBAR-->
    <div class="bloc-principal">
        <nav class="navbar navbar-default navbar-fixed-top text-info">
            <div class="container-fluid ">
 
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
 
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="~/Home" class="navbar-brand"><img src="~/Images/Logo.png" class="logo-sieze img-rounded" /></a>
                </div>
 
                <div id="mynavbar" class="collapse navbar-collapse ">
 
                    <ul class="nav navbar-nav ">
 
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" id="mydropdown" data-toggle="dropdown">Réception <span class="caret"></span></a>
                            <ul aria-labelledby="dropdown" class="dropdown-menu">
                                <li><a href="~/Réception_Camions/Index"> Par camions</a></li>
                                <li><a href="~/Réception_trains/Index"> Par trains</a></li>
                            </ul>
                        </li>
                        <li><a href="~/Consommations/Index">Consommation</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" id="mydropdown" data-toggle="dropdown">
                                Transferts et Ventes<span class="caret"></span>
                            </a>
                            <ul aria-labelledby="dropdown" class="dropdown-menu">
                                <li><a href="~/Transferts/Index"> Transferts</a></li>
                                <li><a href="~/Export/Index"> export</a></li>
                            </ul>
                        </li>
 
                        <li>@Html.ActionLink("Suivi personnels", "Contact", "Home")</li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right ">
 
                        <li> <a href="@Url.Action("LogOut","Login") "> <i class="glyphicon glyphicon-user "></i> LogOut</a></li>
                        <li> <h5 style="color:yellow; position:relative;display:block;height:100px;padding-top:8px;padding-right:inherit"> Nom d'utilisateur: @Session["userName"].ToString()</h5></li>
                    </ul>
                </div>
 
 
            </div>
        </nav>
    </div>
 
 
 
    <div class="container ">
        <div class="row">
            @RenderBody()
        </div>
 
 
    </div>
 
    <footer>
        <center>   <h5>&copy; @DateTime.Now.Year - My ASP.NET Application</h5></center>
    </footer>
    <script src="~/Scripts/jquery-3.0.0.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/notify.min.js"></script>
 
    @RenderSection("scripts", required: false)
 
</body>
</html>

et pour le 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
.navbar-default {
    background-color: forestgreen;
    border-color: darkgreen;
    margin-left: inherit;
    font-weight: bold;
 
}
 
/*body {
    margin: 0;
    font: 14px/1.5 verdana, arial, helvetica, sans-serif;
}*/
 
#mydropdown {
    background-color: forestgreen;
}
 
.dropdown ul li {
    background-color: forestgreen;
    color: blue;
    width: auto;
}
 
 
/*.bloc-principal {
    min-height: calc(100vh -10px);
    
}*/
 
 
/*.body {
    padding-top: 65px;
  
}*/
 
 
.navbar-default .navbar-nav > li > a {
    color: #e7e7e7;
 
 
}
 
    .navbar-default .navbar-nav > li > a:hover {
        color: blue;
    }
 
.navbar {
    text-align: justify;
 
    display:block;
    height: 60px;
    padding-top: 10px;
}
.container {
        max-width:1200px;
 
    }
.logo-sieze {
    width: 100px;
    height: 60px;
    margin-top: -25px;
    margin-left: -1300px;
    position:fixed;
}
/*.field-validation-error{
    color:red;
    font-weight:bold;
      }
     input.input-validation-error{
    border:1px solid red;
}
 
#tableconsommation tr td {
    height: 10px;
}*/

**CalyphoZz** · 05/04/2018, 11h51

j'ai l'impression que tu as beaucoup de choses qui servent à rien dans ton code.. mais as tu essayé

Code :

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

 <nav class="navbar navbar-expend navbar-default navbar-fixed-top text-info">

?

Les composant de Navbar s'affichent verticalement

CSS

Discussions similaires

Partager

Partager