?
Solved

CSS Floating footer for Joomla CMS website

Posted on 2010-01-11
5
Medium Priority
?
1,520 Views
Last Modified: 2012-05-08
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
Comment
Question by:tmnsky
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 14

Accepted Solution

by:
Kalpan earned 1200 total points
ID: 26290698
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
 
LVL 14

Assisted Solution

by:Kalpan
Kalpan earned 1200 total points
ID: 26290714
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
 
LVL 14

Assisted Solution

by:Kalpan
Kalpan earned 1200 total points
ID: 26320410
@tmnsky

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

Please let me know...

Thanks

kalpan
0
 
LVL 7

Assisted Solution

by:techsathish
techsathish earned 800 total points
ID: 26322867
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
 
LVL 7

Assisted Solution

by:techsathish
techsathish earned 800 total points
ID: 26456112
Got solution?
0

Featured Post

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question