CODEWITHSUNDEEP
htmlcss
care567
care567

Reputation: 231

how to move logo to top in html

Hi in the below website http://olisvell.com/responsivedesign/index.html logo i want to move to top. My log was displaying little bit down i want to move to top.above one is my website link.thing working fine except the logo

every Can anyone please help me

html

<div class="header">
        <div class="container">
            <div class="header-right">
                <p class="right">Welcome Guest<span>Free Register</span><span>Login</span></p>
                <div class="clear"></div>
                  <br>
                <select class="right">
                    <option>Select Language</option>
                    <option>English</option>
                </select>
<br>
                <div class="clear"></div>
<br>
                <p class="right">Powered by Google Translate</p>
                <div class="clear"></div>
            </div>
        </div>
    </div>


<!-- //header -->
<!-- navigation -->
<div class="navigation">
    <div class="container">
        <nav class="navbar navbar-default">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" 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>
            </div>


<div class="logo">
            <a href="index.html"><img src="images/logo.gif" alt=""/></a>

    </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="index.html">About Us</a></li>
                <li><a href="index.html">Services</a></li>
                <li><a href="index.html">Treatments</a></li>


                <li><a href="index.html">Partners</a></li>
                <li><a href="index.html">Visa Help</a></li>
                <li><a href="index.html">FAQ</a></li>
                <li><a href="index.html">Contact Us</a></li>
              </ul>

              <div class="clearfix"></div>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
</div>

style.css

   .logo {
      float: left;
    }
    .logo a {
      display: inline-block;
    }
    .header {
      margin: 10px 0;
    }
    .container{ direction: ltr }
    .header-right .right{ float: right }
    .header-right .right span{ margin-left: 20px }
    .clear{ clear: both }
    .nav-wil{

float: right;
margin-top:10px;

}

Upvotes: 1

Views: 6432

Answers (3)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

.logo {
    float: left;
}
.header {
    margin: 10px 0;
}
.container{ direction: ltr }
.header-right, .header-right .right{ float: right }
.header-right .right span{ margin-left: 20px }
.clear{ clear: both }
.navbar-nav {
    float: right;
    margin: 0;
    padding: 11px 0;
    list-style: none;
}
.navbar-nav > li {
    float: left;
}
<div class="header">
    <div class="container">
        <div class="logo">
            <a href="index.html"><img src="http://olisvell.com/responsivedesign/images/logo.gif" alt=""/></a>
        </div>
        <div class="header-right">
            <p class="right">Welcome Guest<span>Free Register</span><span>Login</span></p>
            <div class="clear"></div>
            <select class="right">
                <option>Select Language</option>
                <option>English</option>
            </select>
            <div class="clear"></div>
            <p class="right">Powered by Google Translate</p>
            <div class="clear"></div>
            <nav class="navbar navbar-default right">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
                    <li><a href="index.html">About Us</a></li>
                    <li><a href="index.html">Services</a></li>
                    <li><a href="index.html">Treatments</a></li>
                    <li><a href="index.html">Partners</a></li>
                    <li><a href="index.html">Visa Help</a></li>
                    <li><a href="index.html">FAQ</a></li>
                    <li><a href="index.html">Contact Us</a></li>
                  </ul>
                  <div class="clearfix"></div>
                </div><!-- /.navbar-collapse -->
            </nav>
            <div class="clear"></div>
        </div>
    </div>
</div>

Upvotes: 1

Stefan
Stefan

Reputation: 1258

This might help you on the way:

<style>
    .header-left
    {
        float: left;
    }
    .header-right
    {
        float: right;
    }
</style>

and the adjusted html (don't forget to remove your logo further one)

<div class="header">
    <div class="container">
        <div class="header-left">
            <div class="logo">
                <a href="index.html"><img src="images/logo.gif" alt=""/></a>
            </div>
        </div>
        <div class="header-right">
            <p class="right">Welcome Guest<span>Free Register</span><span>Login</span></p>
            <div class="clear"></div>
            <br>
            <select class="right">
                <option>Select Language</option>
                <option>English</option>
            </select>
            <br>
            <div class="clear"></div>
            <br>
            <p class="right">Powered by Google Translate</p>
            <div class="clear"></div>
        </div>
    </div>
</div>

Upvotes: 1

Mc Filip
Mc Filip

Reputation: 19

Try this: example: <img style="position:absolute; top:0px;" src=logo.png> Very simple, this will move your logo/image to very top.

Upvotes: 0

Related Questions