CODEWITHSUNDEEP
csshtmlcss-positionpositioning
MCrosby97
MCrosby97

Reputation: 21

Positioning text and an image above a navigation bar. html/css

I am trying to create a website, where their is a logo on the left side, and text on the right (alongside the logo image) and having all that above the navigation bar, however I just cannot manage to get them into position at all!

.headerLogo {
  float: left;
  margin-top: 20px;
}

.headerText {
  float: right;
  margin: auto;
}
<div class="headerLogo">
  <img src="Logo.gif" />
</div>

<div class="headerText">
  <h1>Together, we can create change.</h1>
  <p>Qui cu imperdiet temporibus, nam at autem falli, cum audire salutandi abhorreant
    eu. No postea mollis lobortis pri. Natum pertinax consulatu eam an, an vix omnium
    appellantur, tamquam petentium cotidieque ut pri. In sea aliquid omittantur.</p>
</div>

<nav>
  <ul class="nav">
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="volunteer.html">Volunteer</a></li>
    <li><a href="donate.html">Donate</a></li>
  </ul>
</nav>

Upvotes: 2

Views: 10213

Answers (3)

Saeed Jamali
Saeed Jamali

Reputation: 1195

Just needed to set clearfix, Is this the result you seek?

.headerLogo{
    float:left;
    margin-top: 20px;
    width: 50%
}

.headerText{
    float:right;
    margin:auto;
    width: 50%
}

.clearFix{ clear: both};
<div class="headerLogo">
<img src="Logo.gif" />
</div>

<div class="headerText">
<h1>Together, we can create change.</h1>
<p>Qui cu imperdiet temporibus, nam at autem falli, cum audire salutandi abhorreant
eu. No postea mollis lobortis pri. Natum pertinax consulatu eam an, an vix omnium
appellantur, tamquam petentium cotidieque ut pri. In sea aliquid omittantur.</p>
</div>

<div class="clearFix">

<nav>
    <ul class="nav">
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="volunteer.html">Volunteer</a></li>
        <li><a href="donate.html">Donate</a></li>
    </ul>
</nav>

Upvotes: 0

sinanspd
sinanspd

Reputation: 2734

I am a little bit confused by the wording but please take a look at this solution and see if this is what you mean, otherwise I will edit the answer

Jsfiddle: http://jsfiddle.net/gLLa20yp/

img{
  display: inline-block;
  float: left;
  width: 10%;
}

nav{

  margin-top: 5%  
}

.nav li{
  display: inline-block;
  margin-left: 15%;
 }

remove the last part if you don't want a horizontal menu.

Future work: To make it look better I would suggest setting the width on the <p> element and giving a margin between the image and the text

Upvotes: 0

Rajeev Dixit
Rajeev Dixit

Reputation: 1541

To set accordingly, try to give styles like below having div as position relative. 

.headerLogo {
float:left;
margin:auto;
display:inline-block;
}   

.headerText {
margin-top: 10px;
margin-right: 20px;
float: right;
position: relative;
display:inline-block;
}

Upvotes: 0

Related Questions