PDA

View Full Version : Footer, Full Width Of Page



oodoloo
04-09-2014, 05:22 PM
Hello,

i'm designing a website with joomla and using the bootstrap framework.
Now i have a problem by my footer. Basically i use a simple grid layout and i want the content part of the site in the center of the page with space on the left and the right side which i already achieved.
And now i want the footer not in the middle like the content but on the end of the page and over the whole width of it and NOT FIXED. So i want normally scroll down the page and at the end of it the footer shall appear with full width.
I searched for it a long time but i don' find any solution that worked.
I hope somebody can help me to achieve it...

In the following are the scripts of the php-page and the css file i used

index.php


<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- main container -->
<div class='container'>
<!-- header -->
<div class="mainMenuTop"/>
<div class='row'>
<jdoc:include type="modules" name="position-1" style="well" />
</div>
<div class='row'>
<!-- main content area -->
<div class='span12'>
<div class="article">
<jdoc:include type="component" />
</div>
</div>
</div>
<!-- footer -->
<div class='row'>
<div class='span12'>
<div class='footer'>
<jdoc:include type="modules" name="footer" style="none" />
</div>
</div>
</div>
</div>
</body>
</html>


style.css


body
{
overflow-y: scroll;
background: url(../images/Test.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.article
{
padding: 25px;
margin-top: 30px;
margin-bottom: 30px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255); /* The Fallback */
font-size: 12pt;
font-family:"Calibri", Times, serif;
}

.footer
{
height: 50px;
border-top: solid 1px black;
}


Kind Regards,
oodoloo

jmalone1187
04-28-2014, 10:49 PM
Hey Oodoloo

This is actually a very simple fix. If you remove your footer from the container div it will stretch a full 12 grid cols across the page.



<html>
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- main container -->
<div class='container'>
<!-- header -->
<div class="mainMenuTop"/>
<div class='row'>
<jdoc:include type="modules" name="position-1" style="well" />
</div>
<div class='row'>
<!-- main content area -->
<div class='span12'>
<div class="article">
<jdoc:include type="component" />
</div>
</div>
</div>
</div> <!-- End your container before the foorer -->

<!-- footer -->
<div class='row'>
<div class='span12'>
<div class='footer'>
<jdoc:include type="modules" name="footer" style="none" />
</div>
</div>
</div>
</body>
</html>


I've used this same method for footers on a few sites, I love the look of it. Hope this helps.

oodoloo
04-30-2014, 02:28 PM
Thanks for your reply! I tried this, but that was not enough for my needs. Only the left side enlarges to the full size, the rightside begins already at the point where the content starts. Can you help me once more please? I have created an example where you can see the problem and which you can use to fix it http://jsfiddle.net/Pxmv7/2/.

Kind Regards,
oodoloo

jmalone1187
05-01-2014, 07:32 PM
Thanks for your reply! I tried this, but that was not enough for my needs. Only the left side enlarges to the full size, the rightside begins already at the point where the content starts. Can you help me once more please? I have created an example where you can see the problem and which you can use to fix it http://jsfiddle.net/Pxmv7/2/.

Kind Regards,
oodoloo

I would just add style='width:100%;' to the footer.


<div class='row'>
<div class='span12' style='width:100%;'>
<div class='footer'>
<p>footer<p/>
</div>
</div>
</div>

oodoloo
05-01-2014, 08:27 PM
Hi jmalone,

thanks for your solution. I agree it, but now when you minimize the width of the window suddenly the footer has no longer the whole width of the page, but only the width of the content. Have you any idea how to fix this also?

jmalone1187
05-02-2014, 04:43 PM
Hi jmalone,

thanks for your solution. I agree it, but now when you minimize the width of the window suddenly the footer has no longer the whole width of the page, but only the width of the content. Have you any idea how to fix this also?

try adding !important to the end of the 100%

style='width:100%!important;'

Not sure it will work but its worth a shot. It sounds to me that there is another style sheet over writing that width, so setting it to important will tell the sheets to keep that width no matter what.

oodoloo
05-10-2014, 10:33 AM
Hi,

only to add the "important" keyword doesnt help.
I've tested it again with some other combination and now i fixed it like you can see here http://jsfiddle.net/Pxmv7/3/.

I have added "width: 100%", "position: absolute", "left: 0" and "right:0" to the css-class ".footer".
I think decisive was the "position: absolute".
Then i have to add the "left: 0" because the left side doesnt take the fullsize. after adding this it does.
The "right: 0" i added, because of completeness. Doesnt know if it is needed in any other browser. Here it works also without it.

saint-wp
06-05-2014, 02:59 PM
If I understand correctly i think you are looking to style the footer to the full width of the page, but keep the content inline with the rest of the page?

Using HTML >>



<div class="footer-wrapper">
<div class="container">
<div class="row">
<div class="span12 footer">
<p>Footer Content</p>
</div>
</div>
</div>
</div>


CSS >>



.footer-wrapper {
width: 100%;
background-color: #333
}
.footer {
color: #FFF;
padding: 10px 0px;
}