...

View Full Version : Need help with footer alignment



dazd
04-27-2011, 11:51 PM
Hey all,

First time coding a site, trying to figure all this out.
Having problems trying to figure out how to make the footer expand all the way across the bottom rather then being the size of my content.

Here is my css code for the footer part.

#footer {
margin: 0px;
padding: 5px; padding-top:5px; padding-bottom: 5px;
clear: both;
background-image: url(images/footerbg.jpg);
float: left;
width: 100%;
}

#footer li a {
decoration: underline;
font-family: verdana;
color: #999999;
font-size: 11px;
float: left;
}

.foot {
color: #999999;
font-family: verdana;
padding-left: 40px;
float: right;
padding-bottom: 100px;
}

Here is my HTML Footer code.

<div id="footer">
<div id="footerimg">
<img src="footerbg.jpg" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="foot">

Tried to make an id of footerimg but that didn't work in the css. I'm confused, remember it's my first website :) lol

dazd
04-28-2011, 01:15 AM
Also, trying to figure out how to align text and images next to each other.
So something like this:

Social Connection (so much padding in between) Contact (padding) News & Updates

With images and text below? How would I make them appear next to each other? Here's a pic of what I am trying to accomplish and here's a pic of what I got so far.

Any help would be appreciated.
Thanks,
Jon

http://i1037.photobucket.com/albums/a460/b00kin/whatigotsofar.jpg

and here is what I am trying to get.

http://i1037.photobucket.com/albums/a460/b00kin/whatimtryingtoget.jpg

alykins
04-28-2011, 03:06 AM
i would try removing float: left; from the footer section... also you open 3 <div> elements and never close them... what does rest of code look like? for the three areas- i see them as columns... try three div block elements... that would be my approach

dazd
04-28-2011, 03:36 AM
Thanks for that, I removed the float: left but it's still not correct.
I'll be happy to past my code in this message, but it takes up a huge area. Is there an easy way to post my code without it take up a full page in this thread?

Thanks,
Jon


i would try removing float: left; from the footer section... also you open 3 <div> elements and never close them... what does rest of code look like? for the three areas- i see them as columns... try three div block elements... that would be my approach

teedoff
04-28-2011, 03:46 AM
The # button wraps your code in code tags. Better would be a link to your live test page.

dazd
04-28-2011, 03:51 AM
The # button wraps your code in code tags. Better would be a link to your live test page.

Don't have it on my site, give me a sec and i'll put it up.
Thanks for the help!

Edit: Alright added it to my site, visit pvdemos.com

Thanks!

dazd
04-28-2011, 11:41 PM
Anyone??

alykins
04-29-2011, 12:24 AM
I looked at your code (html and css)
I think your on the right path... I am currently working through learning alignment/placement of div elements myself (waiting on my text refrence to come in the mail)...

I might try doing the following (but I don't know what the consequences would be...)

for col 12&3...
try placeing them within a container or wrapper div... get this div to sit where you want it... then you only have to worry about manipulating the divs col123 within that element... so you could do something like
<div id= "contain"><col1></><col2></><col3></></div> ( i shorthanded these, obviously would need to write out actual code)

then in your css could set widths based on % and they would be within the containing element...

Like I said, I am still working out learning positioning elements myself... unfortunately all the web resources I've found are kind of vague in their description of how these interact... but this is the avenue I would venture down.

dazd
04-29-2011, 12:54 AM
You lost me, lol.
Confused on how you think I should change the html for col1,2&3

Not quite familiar with all of the codes and terms.


I looked at your code (html and css)
I think your on the right path... I am currently working through learning alignment/placement of div elements myself (waiting on my text refrence to come in the mail)...

I might try doing the following (but I don't know what the consequences would be...)

for col 12&3...
try placeing them within a container or wrapper div... get this div to sit where you want it... then you only have to worry about manipulating the divs col123 within that element... so you could do something like
<div id= "contain"><col1></><col2></><col3></></div> ( i shorthanded these, obviously would need to write out actual code)

then in your css could set widths based on % and they would be within the containing element...

Like I said, I am still working out learning positioning elements myself... unfortunately all the web resources I've found are kind of vague in their description of how these interact... but this is the avenue I would venture down.

alykins
04-29-2011, 02:38 AM
well right now you have something like this...

<div id= "col1>
the stuff you have inside that div (text and pics)
................................................
..........................
...............
</div>

<div id= "col2">
the stuff in there......
and then it closes and you have a third.... I would try doing something like:

<div id= "contain_col">
<div id= "col1">
your text and pics and links
</div>

<div id= "col2">
stuff...
</div>

<div col3 and then close it />
</div

then in your css, remove float parameters from col1 col2 col3 and set them up with a % base width... I think this will work... you may have to fidget with them some, but if you had something like:
#col1{ margin-top: 0%; margin-right: 67%; margin-bottom: 0%; margin-left: 0%;}
#col2{ margin-top: 0%; margin-right: 34%; margin-bottom: 0%; margin-left: 34%;}
#col3{ margin-top: 0%; margin-right: 0%; margin-bottom: 0%; margin-left: 67%;}

I think that will set up your div elements within your "container" element... then instead of trying to get 3 elements to behave properly on the page you only have one- you still need to make them behave within that one, but i think itll be easier... I would wait and see if someone of senior coder status agrees or has some insight (like i said, I'm trying to get a firm grasp on this as well- that would just be my approach :) )

dazd
04-29-2011, 08:48 AM
Well it looks like you know a lot more then I do lol..

Thanks for that, i'll give it a try. Still trying to figure out the Footer lol!

Thanks again
Jon


well right now you have something like this...

<div id= "col1>
the stuff you have inside that div (text and pics)
................................................
..........................
...............
</div>

<div id= "col2">
the stuff in there......
and then it closes and you have a third.... I would try doing something like:

<div id= "contain_col">
<div id= "col1">
your text and pics and links
</div>

<div id= "col2">
stuff...
</div>

<div col3 and then close it />
</div

then in your css, remove float parameters from col1 col2 col3 and set them up with a % base width... I think this will work... you may have to fidget with them some, but if you had something like:
#col1{ margin-top: 0%; margin-right: 67%; margin-bottom: 0%; margin-left: 0%;}
#col2{ margin-top: 0%; margin-right: 34%; margin-bottom: 0%; margin-left: 34%;}
#col3{ margin-top: 0%; margin-right: 0%; margin-bottom: 0%; margin-left: 67%;}

I think that will set up your div elements within your "container" element... then instead of trying to get 3 elements to behave properly on the page you only have one- you still need to make them behave within that one, but i think itll be easier... I would wait and see if someone of senior coder status agrees or has some insight (like i said, I'm trying to get a firm grasp on this as well- that would just be my approach :) )

amitsh
04-29-2011, 09:12 PM
u r looking for sticky footer solutionas far as footer part is concerned..
code for that is below



<!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>
<link rel="stylesheet" href="layout.css" ... />
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
.footer div {
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<div>
<p>Copyright (c) 2008</p>
</div>
</div>
</body>
</html>


use the above code just to check for footer part and than try u use in ur code... it's called sticky footer

source url http://ryanfait.com/sticky-footer/

for references



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum