Jump to content
geekmonster

Need help alligning image in header with bootstrap elements

Recommended Posts

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>

post-198384-0-89875600-1464050774_thumb.png

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...