I have a little problem with aligning the navbarmenu with the pagecontent so it fits herizonal perfect. Right now it looks like this picture:
As you can see i want the page content be 950px (white space) and the grey outside is an overall background-color. I have only tried to create fullsize pages, so is this the right way to do it, with the width: 950px;? or is there a smarter way to force it to 950px at fullscreen for all pages?
What i'm trying to do, is to make it look like this page (the layout):
You can see fullsize page at: This page
As you can see the navbarmenu fits and a aligned with the page content and even if you try to resize it.
Code (_Layout):
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="row">
<div class="navbarunder">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
CSS file:
.indexpage {
background-color: white;
height: 500px;
margin-left:auto;
margin-right:auto;
}
@media (min-width: 1000px) {
.indexpage {
width: 950px;
}
}
.navbar-inverse {
background-color: white;
border-width: 0px;
border-bottom: thin solid #95a5a6;
}
.navbarunder {
font-variant: small-caps;
border-top: thick solid #003665;
border-width: 8px;
}
Hope someone can tell me what i should look at, because i have tried everything what i know..
