Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1524
  • Last Modified:

CSS Floating footer for Joomla CMS website

So I'm looking for different ways to make a website stand out, and I really like these floating header/footer toolbars that I've been seeing. I'm running a website on Joomla, and I'm using a template from yootheme called symphony:

http://demo.yootheme.com/nov09/index.php

How can I add a grass image footer like the one shown on this site:
http://www.addnewfollowers.com
0
tmnsky
Asked:
tmnsky
  • 3
  • 2
5 Solutions
 
KalpanCommented:
Please run the following code with test page ......

It's all about adjusting the following...and add that tag to ur html or php page....

div.bottom {

      clear:both;
      position: fixed;
      bottom:-20px;
      width:100%;
      height:212px;
      z-index: 100;

}


Hope this will be helpful...

thanks,

Kalpan
<!DOCTYPE html>
<html lang="en">
        <head>
            <title>Get More Followers on Twitter, Twitter adder. AddNewFollowers.com</title>
            <meta charset="utf-8">
                <meta name="keywords" content="get more followers,twitter adder,twitter tool,twitter software" />
                <meta name="description" content="Get More Followers, Auto Twitter Follower, Twitter Software. Build a Powerful Network of Followers - AddNewFollowers.com" />
            <link rel="top" title="" href="/" >
                <link rel="alternate" title="RSS" href="/" type="application/rss+xml" >

                <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
            <link rel="stylesheet" type="text/css" href="http://www.addnewfollowers.com/home/css/layout.css" media="screen" >
            <link rel="stylesheet" type="text/css" href="http://www.addnewfollowers.com/home/css/color.css" media="screen" >
            <link rel="stylesheet" type="text/css" href="http://www.addnewfollowers.com/home/css/type.css" media="screen" >

            <!--jquery //-->
            <script src="http://www.addnewfollowers.com/home/js/jquery-1.3.2.min.js" type="text/javascript"></script>
                <!--jquery //-->

                <!--shadowbox //-->

                <link rel="stylesheet" type="text/css" href="http://www.addnewfollowers.com/home/js/shadowbox/shadowbox.css">
                <script type="text/javascript" src="http://www.addnewfollowers.com/home/js/shadowbox/shadowbox.js"></script>
                <script type="text/javascript">
                Shadowbox.init();
                </script>
                <!--shadowbox //-->

            <!--HTML5 for older browsers //-->
                <!--[if lte IE 8]>
                <script src="js/html5.js" type="text/javascript"></script>
                <![endif]-->
            <!--HTML5 for older browsers //-->

            <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="css/fix-ie.css" media="screen" ><![endif]-->


        </head>
<body>

</body>
<p>
<br><b>Testing - CSS</b>
</p>
<br><b>Testing - CSS</b>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<p>
<b>Testing - CSS</b>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<br>

</p>

<div class="bottom">


</div>

</html>

Open in new window

0
 
KalpanCommented:
Also check the footer class on the below...

http://www.addnewfollowers.com/home/css/layout.css

http://www.addnewfollowers.com/home/css/color.css

div.bottom {

      background: url(../img/grass.png) no-repeat transparent;
      background-position: 50% 0;

}


thanks

Kalpan
0
 
KalpanCommented:
@tmnsky

Please try the above..sure this would be appropriate, what you looking for...

Please let me know...

Thanks

kalpan
0
 
techsathishCommented:
Hi tmnsky,

For that u have to use z-index position.

In that http://www.addnewfollowers.com they have used z-index(See the following code.)

div.bottom {
 bottom:-20px;
 clear:both;
 height:212px;
 position:fixed;
 width:100%;
 z-index:100;
}

So like wise u have use in ur website....

Hope it will works...

Cheers...
0
 
techsathishCommented:
Got solution?
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now