Jazza Posted April 5, 2015 Share Posted April 5, 2015 (edited) Hi. I am not to sure how to explain but I will try my best. I am trying to make a navigation bar and it will not all go on the 'navbar' id. <!DOCTYPE html><head><link rel="stylesheet" typ"text/css" href="css/bootstrap.css"><link rel="stylesheet" typ="text/css" href="css/mystyle.css"></head><body> <div id="navbar"> <div id="logo"> <p>hdfdf</p> </div> <div style="margin-left:750px;" id="navicons"> <span class="glyphicon glyphicon-bell" aria-hidden="true" style="padding-right:20px;"></span> <span class="glyphicon glyphicon-comment" aria-hidden="true" style="padding-right:20px;"></span> <p>Jazza</p> </div> <form class="form-horizontal" style="width:100px;"> <div class="form-group"> <label for="search" class="col-sm-2 control-label"></label> <input type="search" class="form-control" id="inputEmail3" placeholder="Search"> <button class="btn btn-success">Search</button> </div> </div></body></html> When the localhost process that code, the search field is below the navigation box and the name 'Jazza' is not to the right of the glyphicon's. It is all in the navbar div. Also, if you have a look at the attachment, that is what I am getting when I process the file. Thanks Jarrod Edited April 5, 2015 by Jazza Link to comment Share on other sites More sharing options...
Ingolme Posted April 5, 2015 Share Posted April 5, 2015 Have you tried making sure your HTML is valid first? http://validator.w3.org/ I would advise against using things like style="margin-left:750px;" and style="width:100px;" If you're going to use Bootstrap, stick with it all the way. If you try to mix in your own layout styles you'll mess up the way bootstrap works. By setting a left margin of 750px you're basically destroying Bootstrap's primary goal: Making pages that display properly on all screen sizes. Read about Bootstrap's grid system: http://getbootstrap.com/css/#grid It should help you organize your page properly. Link to comment Share on other sites More sharing options...
faroukekilimanjaro Posted April 5, 2015 Share Posted April 5, 2015 can you post the css Link to comment Share on other sites More sharing options...
dsonesuk Posted April 5, 2015 Share Posted April 5, 2015 Wheres form closing tag? Link to comment Share on other sites More sharing options...
Jazza Posted April 5, 2015 Author Share Posted April 5, 2015 can you post the css #navbar{ width:100%; height:50px; background-color:#D00000; } #logo{ width:90px; height:auto; margin-left:1%; margin-top:1%; margin-bottom:1%; float:left; border-style: solid; border-width:2px; } #navicons{ width:250px; height:50px; border-style:solid; border-width:1px; } .glyphicon.glyphicon-bell{ font-size:40px; padding-top:5px; padding-bottom:5px; color:#b0b0b0; } .glyphicon.glyphicon-comment{ font-size:40px; padding-top:5px; padding-bottom:5px; color:#b0b0b0; } #name{ width:auto; height:10px; } Link to comment Share on other sites More sharing options...
Jazza Posted April 5, 2015 Author Share Posted April 5, 2015 Wheres form closing tag? I forget to add it in, but I did put it now and the search field is still not in the right place. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 6, 2015 Share Posted April 6, 2015 (edited) You are looking for bootstrap stying like this <div id="navbar"><div class="row"><div id="logo" class="col-md-2"><p>hdfdf</p></div><div id="navicons" class="col-md-2 col-md-offset-6"><span class="glyphicon glyphicon-bell" aria-hidden="true" style="padding-right:20px;"></span> <span class="glyphicon glyphicon-comment" aria-hidden="true" style="padding-right:20px;"></span> <p>Jazza</p></div><div class="col-md-2"><form class="form-horizontal"><div class="form-group"> <label for="search" class="col-sm-3 control-label"></label> <input type="search" class="form-control" id="inputEmail3" placeholder="Search"> <button class="btn btn-success">Search</button></div></form></div></div></div> Edited April 6, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
tejasamrute Posted April 6, 2015 Share Posted April 6, 2015 <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Company Logo</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-bell aria-hidden="true"></span> Link</a></li> <li><a href="#"> <span class="glyphicon glyphicon-comment aria-hidden="true"></span> Link</a></li> </ul> <div class="col-sm-3 col-md-3 pull-right"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="q"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div></nav> is its something like this u are trying to achieve? Link to comment Share on other sites More sharing options...
Jazza Posted April 6, 2015 Author Share Posted April 6, 2015 <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Company Logo</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-bell aria-hidden="true"></span> Link</a></li> <li><a href="#"> <span class="glyphicon glyphicon-comment aria-hidden="true"></span> Link</a></li> </ul> <div class="col-sm-3 col-md-3 pull-right"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="q"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div></nav> is its something like this u are trying to achieve? Yes, however I prefer the icon's to be on the right side and the search field to be in the center. Link to comment Share on other sites More sharing options...
tejasamrute Posted April 7, 2015 Share Posted April 7, 2015 Add navbar-right in ul <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#"><span class="glyphicon glyphicon-bell aria-hidden="true"></span> Link</a></li> <li><a href="#"> <span class="glyphicon glyphicon-comment aria-hidden="true"></span> Link</a></li> </ul> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now