0

I have a footer where on the left is the name of the link, on the right is a navigational button made with css.

current footer

Here is my code that affects this footer:

layouts/_footer.html.erb

<li>
  <a href="http://www.bruxzir.com/" title="http://www.bruxzir.com/">
    <span>HOME</span><span>&raquo;</span>
  </a>
</li>

custom.css

@media only screen and (min-width: 1px) and (max-width: 479px) { 
  #footer { text-align: left; }
  #footer ul li { 
    display: block; 
    padding: 12px; 
  }
  #footer ul li a { } 
  #footer ul li a span:nth-of-type(2) {
    padding:9px;
    background-color: rgb(202, 0,0 );
    float: right;
    border-radius:2px;
  }
  #footer div.inner p {margin-left: 12px;}
}  

@media only screen and (min-width: 480px) { 
  #footer { text-align: center; }
  #footer ul li { display: inline; }
  #footer ul li:not(:last-of-type) { margin-right: 12px }
  #footer ul li a span:nth-of-type(2) { display: none; }
}

As you can see I created the button by adding padding in the <a> of the second span. So I tried adding equal padding to the text on the left but neither padding nor margin moved it at all.

JGallardo
  • 11,074
  • 10
  • 82
  • 96
  • After implementing the accepted answer which technically answered the question as phrased, i ran into a problem with the button being to the side of the text. So what I did to fix that was to give the first `` a flexible width of 96%. Full [code on github](https://gist.github.com/JGallardo/6557717) – JGallardo Sep 14 '13 at 00:36

2 Answers2

2

Using display: table* for same height "cells" (it's only visual, unrelated to HTML table layout):

@media only screen and (min-width: 1px) and (max-width: 479px) { 
  #footer { text-align: left; }
  #footer ul li { 
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 12px; 
  }
  #footer ul li a span {
    display: table-cell;
    vertical-align: middle;
  } 
  #footer ul li a span:nth-of-type(2) {
    width: 10px; /* 28 = 10 + 2*9 if you aren't using box-sizing: border-box (you should, so much simple) */
    padding:9px;
    background-color: rgb(202, 0,0 );
    border-radius:2px;
  }
  #footer div.inner p {margin-left: 12px;}
}  

@media only screen and (min-width: 480px) { 
  #footer { text-align: center; }
  #footer ul li { display: inline; }
  #footer ul li:not(:last-of-type) { margin-right: 12px }
  #footer ul li a span:nth-of-type(2) { display: none; }
}

Previous related answers I did on the subject: 2 columns layout

Community
  • 1
  • 1
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
0

Try to set a class identifier on your li element, then modify it via css using that identifier, for example:

<li class="footer">
    <!-- footer code goes here -->

</li>

And on css:

li .footer{
  /* Set margin here */
}

Also, you can put your footer outside of the list and do the same thing, in order to avoid maybe css applied to it as part of the list and have a more simple css accessing.

Nick Louloudakis
  • 5,856
  • 4
  • 41
  • 54