CODEWITHSUNDEEP
javascriptcssjquery-mobilefooter
Confused Developer
Confused Developer

Reputation: 65

jQuery Mobile dual footer

I have a very simple jQuery mobile page and would like to show a copyright message at the bottom of my page exactly above the footer.

In the page footer, I have several buttons and the copyright message should appear in small plain text on the right cornenr exaclty above the footer... I see it as a kind of dual footer .

When I add the copyright message to the footer, it will inherit the footer data-theme which is not desired. When I add it to the content of my site, it does not show the copyright at the bottom of the page. Any hints on where to inject my copyright message is highly appreciated.

Upvotes: 2

Views: 778

Answers (2)

donramos
donramos

Reputation: 534

Easy with some CSS magic

  1. create a 'copyright' CSS class:
.copyright {    
  font-size: 0.75em;    
  margin-top: -20px;   
  float:right;    
  padding-right: 5px; 
}

Notes:
a. 'margin-top' makes it render just above your footer b. 'float:right' puts in on the right of the screen. Use 'float:left' or 'float:center' if desired.

  1. In your footer, use the copyright class.
< div data-role="footer">
  < span class='copyright'>&copy; My Company Ltd</span>
  < h4>Footer </h4>
  < a href="#" data-rel="back" data-icon="home">Home</a>
< /div>

Upvotes: 1

Crwydryn
Crwydryn

Reputation: 840

Ideally I'd need to see some html to try to fix your exact problem, but the gist of what you want is something like:

<div style="position: absolute; bottom: 0; width: 100%">
     <div style="width: auto; text-align: right">Copyright...</div>
     <div style="border: 2px solid red; width: auto">footer</div>
</div>

Upvotes: 1

Related Questions