CODEWITHSUNDEEP
htmlcssfooter
Arpit Banati
Arpit Banati

Reputation: 5

alignment of links in footer

I am trying to clone google's home page.I Started from the footer of the page and got stuck at the alignment of the links in the footer.

my html code:

<div class="footer">
<hr  >
<footer >
    <a href="" class="advertising">Advertising</a>
    <a href="" class="business">Business</a>
    <a href="" class="about">About</a>
    <a href="" class="privacy">Privacy</a>
    <a href="" class="terms">Terms</a>
    <a href="" class="settings">Settings</a>
</footer>
</div>

my css code :

.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%
}

footer{
    background-color: #F4F6F7;
    height: 45px;



}

hr{
    border-color: #CCD1D1;
    margin-bottom: 0px;
}

.advertising, .business, .about, .privacy, .terms, .settings{
    color: #909497;
    font-size: 1.2em;
    margin-top: 11px;             //THIS LINE.


}

.advertising, .business, .about{
    margin-left: 40px;
}


.privacy, .terms, .settings{
    margin-right: 40px;
    float: right;

}

can anyone tell me, why the line "margin-top : 11px" is not applied to the first 3 links in the footer(advertising,business,about). Screenshot of footer: Screenshot of footer:

Upvotes: 0

Views: 2614

Answers (3)

cannydare
cannydare

Reputation: 150

Although the above answer will work, a better solution is this:

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%
}

footer {
  background-color: #F4F6F7;
  height: 45px;
}

hr {
  border-color: #CCD1D1;
  margin-bottom: 0px;
}

.align-left {
  float: left;
}

.align-right {
  float: right;
}

.footer-links {
  list-style-type: none;
}

.footer-links li {
  display: inline;
}

.footer-links li a {
  color: #909497;
  font-size: 1.2em;
  margin: 11px 20px 0px;
}
<div class="footer">
  <hr/>
  <footer>
    <ul class="footer-links align-left">
      <li><a href="#">Advertising</a></li>
      <li><a href="#">Business</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <ul class="footer-links align-right">
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </footer>
</div>

By putting the links into separate menus, it allows you to very quickly add and remove links in the future without messing around with CSS classes.

This fixes any margin errors you are having as well, as we're declaring that every anchor tag has a margin-top of 11px. You'll also notice instead of having 40px margin-left and margin-right, I've set each side to 20px which will give the same effect.

You can also use the .align-left and .align-right classes elsewhere in your HTML instead of declaring it in CSS for every class.

There's no need to give each link it's own class when they all have the same style. But if you wanted to highlight a particular link you'd naturally just add a .highlight class onto one of the anchor tags and specify the styling in CSS.

This method also gives full browser support. Flexbox is a little temperamental on IE as I write this.

Hope this helps!

Upvotes: 2

James H
James H

Reputation: 171

I ran it through codepen,it worked when I applied the margin 11px to all elements using the footer as a selector

I also would recommend using flexbox, its alot easier to use, here is an example

`http://codepen.io/HTMLanto/pen/gmNedQ`

Cheers !

Upvotes: 0

cosmoonot
cosmoonot

Reputation: 2189

You need to add float:left to your first three links, as you have applied float:right on the last three.

.advertising, .business, .about{
    margin-left: 40px;
    float:left;
}

Upvotes: 0

Related Questions