CODEWITHSUNDEEP
htmlcss
Luke B
Luke B

Reputation: 129

Image to the left and Text to the right in navigation bar

I have a nav bar for the top of my website. I am having trouble with aligning my image to the left and my list items to the right. Here is my code...

      .nav a li {
        color: white;
        font-family: arial;
        font-weight: 600;
        font-size: 12px;
        margin-right: 15px;
        display: inline-block;
        vertical-align: center;
      }
      .nav {
        padding-bottom: 5px;
        padding-top: 5px;
        margin: 0;
        text-align: left;
        vertical-align: center;
      }
      #top {
        background-color: #0052cc;
        height: auto;
      }
      #Homeimage {
        height: 60px;
        width: 60px;
        padding-left: 40px;
        padding-top: 10px;
        display: block;
        text-align: left;
      }
<div id="top">
  <div class="nav">
    <div class="navbar">
      <ul id="navigation">
        <a href="index.html">
          <li>
            <img src="file:///Users/Luke/Documents/STFCYouth/Images/shrewsbury%20logo.png" ; id="Homeimage">
          </li>
        </a>
        <a href="acadmey.html">
          <li>ACADEMY</li>
        </a>
        <a href="youth.html">
          <li>YOUTH</li>
        </a>
        <a href="pre-acadmey.html">
          <li>PRE-ACADEMY</li>
        </a>
        <a href="contact.html">
          <li>CONTACT</li>
        </a>
        <a href="newsEvents.html">
          <li>NEWS AND EVENTS</li>
        </a>
        <a href="sportsScience.html">
          <li>SPORTS SCIENCE</li>
        </a>
        <a href="vacancies.html">
          <li>VACANCIES</li>
        </a>
      </ul>
    </div>
  </div>
</div>

I want my image to the left and list items to the right and the text vertically aligned, can anyone help me?This is an image I designed on Word, this is my hopeful end point

Upvotes: 1

Views: 3619

Answers (1)

Skyyy
Skyyy

Reputation: 1569

Wrap Navigaiton links in separate div and use float:right;

.nav a li {
  color: white;
font-family: arial;
font-weight: 600;
font-size: 12px;
margin-right: 15px;
display: inline-block;
vertical-align: center;
}
.nav {
padding-bottom: 5px;
padding-top: 5px;
margin: 0;
text-align: left;
vertical-align: center;
}
#top {
background-color: #0052cc;
height: auto;
}
#Homeimage {
height: 60px;
width: 60px;
padding-left: 40px;
padding-top: 10px;
display: block;
text-align: left;
}
#navright{
float:right;
margin-top:20px;
}
<div id="top">
<div class="nav">
    <div class="navbar">
    <ul id="nagigation">
        <a href="index.html"><li><img src="file:///Users/Luke/Documents/STFCYouth/Images/shrewsbury%20logo.png"; id="Homeimage"></li></a>
        <div id="navright">
            <a href="acadmey.html"><li>ACADEMY</li></a>
            <a href="youth.html"><li>YOUTH</li></a>
            <a href="pre-acadmey.html"><li>PRE-ACADEMY</li></a>
            <a href="contact.html"><li>CONTACT</li></a>     
            <a href="newsEvents.html"><li>NEWS AND EVENTS</li></a>
            <a href="sportsScience.html"><li>SPORTS SCIENCE</li></a>
            <a href="vacancies.html"><li>VACANCIES</li></a>
        </div>
    </ul>
    </div>
    </div>
</div>

(View in full screen)

Upvotes: 3

Related Questions