PDA

Click to See Complete Forum and Search --> : footer not playing nice

colonel5
02-26-2007, 07:03 PM
I'm having some issues with my footer as I'm building a site. It was fine until I added the div classes ".contleft" and ".contright". now as I'm playing with it it will only show up right over or right behind my "#main" area. any ideas why it's not going on the bottom like it should? below is the xhtml and css


<body>
<div id="container">
<div id="headerwork">
<h1><a href="index.html"><img src="imgs/name.png" alt="name" border="none" /></a></h1>
</div>
<div id="menuwork">
<li class="menu"><a href="home.html">goHome</a></li>
<li class="menu"><a href="work.html">goWork</a></li>
<li class="menu"><a href="play.html">goPlay</a></li>
<li class="menu"><a href="learn.html">goLearn</a></li>
<li class="menu"><a href="tell.html">goTell</a></li>
</div>
<div id="main">
<div class="contleft">
<h2>What would you say I do here?</h2>
<p class="content">I offer an array of services but my core competency's are in clean, front-end <a href="#">web design</a>, <a href="#">print design</a> and <a href="#">corporate brand/identity</a>.</p>
</div>
<div class="contright">
<p class="content">
Stop in and ask Miss Belle for some of her sweet tea. Then a left will take you to the interstate, but a right will bring you right back here to me.
</p></div>
</div>
<div id="footer">
<p class="footer">Ben J. Tipler &raquo; 952.240.2830 &raquo; <a href="mailto:info@bentipler.com">info@bentipler.com</a></p>
</div>
</div>
</body>



#main {
background-color:#FFFFFF;
padding: 5px 8px 5px 8px;
width:634px;
height:auto;
position:absolute;
}
.contleft {
width:420px;
float:left;
}
.contright {
width: 190px;
float:right;
border: 1px dotted black;
color:#000000;
padding: 0px 5px 0px 5px;
}
#footer {
background-color:#333333;
width:650px;
margin: 0 auto;
}
StupidDarthFlanders
02-26-2007, 07:11 PM
Don't know if this is your problem but I noticed that your #main is using absolute positioning. Your #footer is not. You might want to take it off of #main or put it on your #footer. I had a similar issue a while back and this fixed it.
colonel5
02-26-2007, 07:19 PM
i tried that and it just positions it right over the #main area
Neballer
02-26-2007, 07:58 PM
try clearing the footer.
clear:both;
colonel5
02-27-2007, 02:20 PM
try clearing the footer.
clear:both;

tried and it it still positions it right over the main content area... this is getting kind of frustrating
EC
02-27-2007, 03:57 PM
Did you do both? Have to do both.

#main = remove absolute positioning, can't have that and a footer beneath it (the footer doesn't know it's there)

#footer = add clear: both; to clear the two floated sections above it
colonel5
02-27-2007, 08:36 PM
the only problem with taking the absolute position is then it messes up the div classes .contleft and .contright
Neballer
02-27-2007, 09:42 PM
What is it that you are trying to accomplish by positioning the main div absolutely? From what I see you don't need to be doing it.

I'd suggest taking it off and fixing your div classes - probably save you some pain in the long run.
colonel5
02-27-2007, 09:51 PM
maybe that should have been my original question cause I knew absolute positioning probably wasn't the right thing to do...

what is wrong with my div classes? how do I get them to display correctly inside of the div #main
Neballer
02-27-2007, 09:55 PM
I don't know what is happening, can you post a pic or a link?
I'll look at it when I get home, but I must bid you adieu.
EC
02-27-2007, 10:17 PM
yeah tell us what you're trying to achieve I'll try to come back and help, even a quick illy sketch with just boxes showing positioning would be fine.
colonel5
02-28-2007, 03:43 PM
ok here's the full xhtml and css and I've also attached the layout I'm going for.

the xhtml


<body>
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="imgs/name.png" alt="name" border="none" /></a></h1>
</div>
<div id="menu">
<li class="menu"><a href="home.html">goHome</a></li>
<li class="menu"><a href="work.html">goWork</a></li>
<li class="menu"><a href="play.html">goPlay</a></li>
<li class="menu"><a href="learn.html">goLearn</a></li>
<li class="menu"><a href="tell.html">goTell</a></li>
</div>
<div id="main">
<img src="imgs/mainbg.jpg" alt="cassie" border="0" />
</div>
<div id="footer">
<p class="footer">xxx.xxx.xxx &raquo; xxx.xxx.xxxx &raquo; <a href="mailto:info@blank.com">info@blank.com</a></p>
</div>
</div>
</body>


and the css


body {
background-color:black;
background-repeat:repeat;
font-family:Arial;
font-size:10px;
margin: 0 auto;
padding: 0;
}
#container {
background:transparent;
width: 650px;
height:auto;
padding: 0px 0px 0px 0px;
margin: 0 auto;
color:#FFFFFF;
}
/*Begin Header Styles*/
#header {
background-image:url(imgs/headerbg.jpg);
width:650px;
height:150px;
}
#headerhome {
background-image:url(imgs/headerbghome.jpg);
width:650px;
height:150px;
}
#headerwork {
background-image:url(imgs/headerbgwork.jpg);
width:650px;
height:150px;
}
#headerplay {
background-image:url(imgs/headerbgplay.jpg);
width:650px;
height:150px;
}
#headerlearn {
background-image:url(imgs/headerbglearn.jpg);
width:650px;
height:150px;
}
#headertell {
background-image:url(imgs/headerbgtell.jpg);
width:650px;
height:150px;
}
/*End Header Styles*/
h1 {
padding: 10px 0px 0px 10px;
font-size:14px;
font-weight:bolder;
color:#FFFFFF;
}
/*Begin Menu Styles*/
#menu {
background-color:#333333;
background-repeat:no-repeat;
width:650px;
height:auto;
padding-top: 5px;
padding-bottom: 5px;
}
#menuhome {
background-color:#66CCFF;
background-image:url(imgs/bghome.png);
background-repeat:no-repeat;
width:650px;
height:auto;
padding-top: 5px;
padding-bottom: 5px;
}
#menuwork {
background-color:#0066FF;
background-image:url(imgs/bgwork.png);
background-repeat:no-repeat;
width:650px;
height:auto;
padding-top: 5px;
padding-bottom: 5px;
}
#menuplay {
background-color:#CA402E;
background-image:url(imgs/bgplay.png);
background-repeat:no-repeat;
width:650px;
height:auto;
padding-top: 5px;
padding-bottom: 5px;
}
#menulearn {
background-color:#663333;
background-image:url(imgs/bglearn.png);
background-repeat:no-repeat;
width:650px;
height:auto;
padding-top: 5px;
padding-bottom: 5px;
}
#menutell {
background-color:#008B83;
background-image:url(imgs/bgtell.png);
background-repeat:no-repeat;
width:650px;
height:auto;
padding-top: 5px;
padding-bottom: 5px;
}
/*End Menu Styles*/
#main {
background-color:#FFFFFF;
width:650px;
height:auto;
position:absolute;
}
.contleft {
width:420px;
padding: 5px 5px 5px 5px;
float:left;
}
.contright {
width: 190px;
float:right;
border: 1px dotted black;
color:#000000;
padding: 0px 5px 0px 5px;
}
#footer {
clear: both;
background-color:#333333;
width:650px;
margin: 0 auto;
}
li.menu {
text-align:center;
font-weight:700;
list-style:none;
line-height:1.7em;
font-size:12px;
}
li.menu a:link{
color:#FFFFFF;
text-decoration:none;
border-left: 1px dotted white;
border-right: 1px dotted white;
padding: 0px 4px 0px 4px;
}
li.menu a:hover {
text-decoration:none;
color:#ffffff;
background-color:#000000;
padding: 2px 2px 4px 2px;
}
p.footer{
text-align:right;
font-size:10px;
padding: 5px 10px 5px 0px;
}
p.footer a {
text-decoration:none;
color:#FFFFFF;
font-size:10px;
}
h2 {
font-size:14px;
color:#003333;
line-height: 0px;
}
h3 {
font-size:11px;
color:#333333;
}
.content {
font-size:10px;
color:#000000;
}
.content a:link {
font-size:10px;
font-weight:800;
color:#999999;
text-decoration:none;
}
.content a:hover{
font-size:10px;
font-weight:800;
color:#003333;
text-decoration:none;
}


and the mock layout

thanks for the help everyone
Neballer
02-28-2007, 06:47 PM
If it's not one thing, it's another. I think you were having problems with your floated divs because of the padding you gave them. I took those out and added padding to the p inside them.
test page (http://www.angelsoftheweek.com/carp/colonel5.html)
colonel5
03-01-2007, 01:27 PM
that makes sense. the only thing I noticed is on the footer that it's about 20 pixles below the #main area. how do i get that to but up against it?
colonel5
03-01-2007, 04:50 PM
after a little more playing around with it I got it to work. Thanks for everyone who took time to help me out.
Neballer
03-01-2007, 11:41 PM
no prob - I noticed the footer problem, what was causing that?
colonel5
03-02-2007, 05:33 PM
i'm not sure, all i know is it works now ;o) though to learn I should probably figure that deal out.
Neballer
03-02-2007, 06:03 PM
word.
Glad to here it's working.