homepage Welcome to WebmasterWorld Guest from 54.234.0.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
need footer only under right column
badams1




msg:4209717
 3:54 am on Oct 1, 2010 (gmt 0)

Developing a site and I need the footer only under the right column of a two column layout. I do not want it stuck to the bottom of the window, I need it to stick to the bottom of the content.

I've got my code so messed up now that nothing looks right. Is there a site that outlines how to do this?

Every site I come across wants the footer stuck to the bottom of the window.

Thanks

 

sanji41




msg:4209730
 4:44 am on Oct 1, 2010 (gmt 0)

hi! im not sure what you wanted, but footer is designed to be on the bottom of the page. but i think what you need is to put the footer code into the <div> of one of the column..and maybe you can show me the site example so i can be a more help to you. cheers!

Major_Payne




msg:4209923
 1:31 pm on Oct 1, 2010 (gmt 0)

There's options for a footer, but by definition, a footer goes on the bottom. You can either put it ANYWHERE on the bottom, centered, left, right, what have you. You can even have it scroll with the contents or have it fixed at the position you want. You can pretty much style it ANY way you want. But, we can't give you much help unless you post your CSS/HTML and let us have more details.

badams1




msg:4210120
 7:03 pm on Oct 1, 2010 (gmt 0)

Ok here is my code now that things are back right:

css

.container {
width: 782px;
margin-right: auto;
margin-left: auto;
text-align: left;


}

body{
margin: auto;
padding: 0;
font-size: 1em;
font-family: Helvetica,Arial,sans-serif;
background: #000066;

/*background-image: url(../images/fade.jpg);
background: no-repeat;*/
}

#Banner {
background-color: #000066;
height: 170px;
background-image: url(../images/header.png);
background-repeat: no-repeat;
}

#bannertext {
font-weight: bold;
color: black;
width: 200px;
font-size: 150%;
text-align: center;
padding-top: 30px;
padding-left: 20px;
font-family: Times New Roman;
}

/*#Main{ Main display area
clear: both;
height: 100%;
margin-left: 190px;
padding-bottom: 15px;
padding-left: 50px;
padding-right: 50px;
background-image: url(../images/bg.png);
background-repeat: repeat-y;

}*/

#Footer{ /*Footer display area*/
clear: both;
height: 43px;
width: 594px;
background-image: url(../images/footer2.png);
background-repeat: no-repeat;
float: right;
margin-top: -3px;

}

#MainRight {
background-image: url(../images/bg.png);
background-repeat: repeat-y;
margin-left: 190px;
}




#left {
float: left;
width: 200px;

background-image: url(../images/menubg.png);
text-align: center;
}

#left ul{
margin: 0em;
padding-left: 1.5em;
padding-top: 1em;
}
#left ul ul{
padding-top: 0em;
}
#left span.breadcrumbs {
display: block;
margin-top: 1em;
padding-left: .5em;
font-size: 90%;
font-family:arial;
}

.footertext {
text-align: center;
font-size: small;
padding-top: 15px;
}

#leftmenu {
list-style-type: none;
text-decoration: none;
font-family:arial;
font-size: 14px;
text-align:left;
color: red;
}


img {
/* Internet Explorer doesn't use bicubic interpolation by default so enable it to eliminate image jaggies*/
-ms-interpolation-mode: bicubic;
/*Allows IE7 to shrink images when browser window size is made smaller*/
max-width: 100%;
border: none;
}


/*Simple formatting for all pages*/
a {
color: black;
text-decoration: none;
}

h1 {
color:black;
text-align: center;
font-size: 180%;
text-transform: uppercase;
font-family:arial;
}

h2 {
color:black;
text-align: left;
font-size: 130%;
/*text-transform: uppercase; */
font-family:arial;
}

h3 {
color:black;
text-align: left;
font-size: 130%;
/*text-transform: uppercase; */
font-family:arial;
}

p {
color:black;
text-align: left;
font-size: 100%;
/*text-transform: uppercase; */
font-family:arial;
}

.small {
padding: 30px;
font-size: 60%;
}


html

<?php echo '<?xml version="1.0" encoding="utf-8"?' .'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body>
<div class="container">
<div id="Banner">
<div id="bannertext">Banner Text<br />Date</div>
</div>

<div id="left"><div id="leftmenu"><jdoc:include type="modules" name="bannerlinks" />Menu</div>

<jdoc:include type="modules" name="right" />
</div>

<div id="MainRight"><!--Main display area-->Content<p>This is more content</p><p>This is even more content</p><p>Bunches more content.</p><div id="Footer"><!--Footer display area / Footer-->
<p class="footertext">2010 Copyright</p>
</div></div>
</div>
</div>
</body>
</html>

sanji41




msg:4210281
 1:48 am on Oct 2, 2010 (gmt 0)

maybe you put the footer div inside the right div..and change some code in the css to make it look right.
also, your div's are in the wrong order. wrapped them first then you can set left or right. hope this helps!

badams1




msg:4210861
 1:11 am on Oct 4, 2010 (gmt 0)

sanji, what do you mean the div's are in the wrong order? I'm using the container as a wrapper.

As for changing the code to make it look right, if I do it won't look right in the when the content in the right column is longer than the left column (already tried that).

sanji41




msg:4210877
 1:54 am on Oct 4, 2010 (gmt 0)

sorry man, must have miss it. use comments on your code so you'll never be lost on div's and keep div id's minimun. anyways, here it is.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">
body{
margin:0;
padding:0;
}
#wrapper{
width:960px;
margin:0 auto 0 auto;
padding:0px;
}
#header{
height:100px;
padding:5px;
}
#header .banner{
float:left;
}
#container{
padding:5px;
}
#container .left{
float:left;
margin:0;
width:200px;
height:100px;
}
#container .right{
margin:0;

height:100px;
}
#footer{
margin:0;
}
#footer .foot{
float:right;
width:200px;
}
</style>
<body>
<div id="wrapper"><!--wrapper-->

<div id="header"><!--start of header-->
header
</div><!--end of header-->
<div id="container"><!--start of container-->

<div class="left"><!--start of left-->
left
</div><!--end of left-->
<div class="right"><!--start of right-->
right
</div><!--end of right-->
</div><!--end of container-->
<div id="footer"><!--start of footer-->
<div class="foot"><!--start foot-->
foot
</div><!--end of foot-->
</div><!--end of footer-->

</div><!--end of wrapper-->
</body>
</html>

badams1




msg:4211362
 3:30 am on Oct 5, 2010 (gmt 0)

Thanks for your help.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved