geekmonster Posted May 24, 2016 Share Posted May 24, 2016 Hello I'm having a of a time getting my image element aligned in the top right corner of my web application and everything I try fails. at the top (head) of the page I'm using a navbar and below that I have an input group. I'm trying to float right an image (which is my school logo) but no matter what I do. I cant get it to sit nica and square where i want it. I provided a screen shoot of the problems I'm having and included is a code snippet. Can somebody please tell me WTH I'm doing wrong here? First part of code is NavBar and the second is input group. How would I set the logo by itself above the blue side panel where its supposed to be? <nav class="navbar navbar-progress"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Existential Graph Editor</a> </div> <ul class="nav navbar-nav"> <!--li class="active"><a href="#">Home</a></li--> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">File <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Edit <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">About</a></li> </ul> <!--ul class="nav navbar-nav navbar-right"> <!--li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li--> <!--img src="../images/uahLogo.png" class="img-rounded" --> <!--/ul--> </div> </nav> <form> <!--label class="label label-primary" for="drawType">Enter Expression (e, c, p, q):</label--> <div class="input-group"> <input id="drawType" type="text" class="form-control" placeholder="Enter Expression" aria-describedby="basic-addon2"> <span class="input-group-addon" id="drawC" onclick="return OnClickDraw();">Submit</span> <span class="input-group-addon" id="clear" onclick="return clearArea();">Clear</span> <span class="input-group-addon" id="save">Save</span> <span class="uahImg"><img src="../images/uahLogo.png" height="100"> </span> </div> </form> Link to comment Share on other sites More sharing options...
davej Posted May 24, 2016 Share Posted May 24, 2016 Wouldn't it make more sense to put the image at the bottom of the div containing the unordered list? </ul> <!--ul class="nav navbar-nav navbar-right"> <!--li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li--> <!--img src="../images/uahLogo.png" class="img-rounded" --> <!--/ul--> <span class="uahImg pull-right"><img src="../images/uahLogo.png" height="100" alt="alt"></span> </div> 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