just trying to make the footer in css stick to the very bottom no matter how much content or window sizes
and ideas???
cheers peeps
0
css and height help
Started by °•Guru•°, Oct 27 2006 12:43 AM
11 replies to this topic
#1
-
- Members
-
- 73 posts
Young Padawan
- Gender:Male
- Location:Australia, Sydney
Posted 27 October 2006 - 12:43 AM
hey all,
just trying to make the footer in css stick to the very bottom no matter how much content or window sizes
and ideas???
cheers peeps
just trying to make the footer in css stick to the very bottom no matter how much content or window sizes
and ideas???
cheers peeps
#2
-
- Members
-
- 499 posts
Jedi In Training
- Location:New York City
- Interests:Fine art, web and graphic design, naval architecture, chess, and sports.
Posted 27 October 2006 - 02:19 AM
You can't do it without Javascript.
I've ran into this issue years ago, when trying to do it for one of my clients. After a lot of hours trying every possible CSS method and asking anyone I can, I haven't found a way to do it. The only method that did work that someone suggested, used javascript.
Honestly, just save yourself the trouble and leave the footer at the bottom of the content, not the page. If you have enough content, the footer will reach the bottom of the page anyways.
I've ran into this issue years ago, when trying to do it for one of my clients. After a lot of hours trying every possible CSS method and asking anyone I can, I haven't found a way to do it. The only method that did work that someone suggested, used javascript.
Honestly, just save yourself the trouble and leave the footer at the bottom of the content, not the page. If you have enough content, the footer will reach the bottom of the page anyways.
#3
-
- Members
-
- 73 posts
Young Padawan
- Gender:Male
- Location:Australia, Sydney
Posted 27 October 2006 - 02:42 AM
na i'll need to be at the bottom of the page...how exactly did you do it through javascript where did u find the tutorial?
#4
-
- Members
-
- 499 posts
Jedi In Training
- Location:New York City
- Interests:Fine art, web and graphic design, naval architecture, chess, and sports.
Posted 27 October 2006 - 04:06 AM
In that case, I can't help you much. I ended up not using the Javascript method, because I try to avoid Javascript unless it's absolutely necessary.
You can try searching for something like "javascript footer." Just a guess.
You can try searching for something like "javascript footer." Just a guess.
#5
-
- Members
-
- 73 posts
Young Padawan
- Gender:Male
- Location:Australia, Sydney
Posted 27 October 2006 - 04:51 AM
so what method did you end up using if not javascript?? how did you get yours working then?
#6
-
- Members
-
- 499 posts
Jedi In Training
- Location:New York City
- Interests:Fine art, web and graphic design, naval architecture, chess, and sports.
Posted 27 October 2006 - 05:08 AM
I did what I mentioned earlier: Just leave it at the bottom of your content.
If your content isn't long enough to fill the page, then what's the point of having the footer at the bottom of the page anyways? Few people will look that far down, if the content ends long before it.
If your content isn't long enough to fill the page, then what's the point of having the footer at the bottom of the page anyways? Few people will look that far down, if the content ends long before it.
#7
-
- Members
-
- 45 posts
Young Padawan
Posted 27 October 2006 - 04:17 PM
html, body {
height: 100%;
}
Makes 100% height in tables work
This might ruin some of your other tables tho, background issues and such. But that is easy to solve
#8
-
- Members
-
- 73 posts
Young Padawan
- Gender:Male
- Location:Australia, Sydney
Posted 27 October 2006 - 06:33 PM
hmm i tried that too but with no luck its still there but its only at the bottom the top and left and right are fine its just the bottom :S:S anyway here is my HTML code mayb i have done something wrong there in the div styles:
also how would you have all the other divs sit in one container or wrapper div?? i think that may be where the prob lies...just a guess...
<link href="mad.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #35709d;
}
body,td,th {
color: #FFFFFF;
}
.style1 {color: #000000}
-->
</style></head>
<body>
<div id="wrapper">
<div style="position: absolute; height: 600px; width: 800px; padding: 1em;">
<div id="header">
<div class="style1" style="position: absolute; left: -48px; top: -10px; height: 80px; width: 903px; padding: 1em; background:url(madheader.jpg); background-repeat:no-repeat;"></div>
<div id="mainnav">
<div class="style1" style="position: absolute; left: -48px; top: 102px; height: 25px; width: 903px; padding: 1em; background:url(madmenus.jpg); background-repeat:no-repeat;"></div>
<div id="col1">
<div class="style1" style="position: absolute; left: 200px; top: 150px; height: inherit; width: 400px; padding: 1em;">main content goes here...</div>
<div id="col2">
<div class="style1" style="position: absolute; left: 0px; top: 150px; height: inherit; width: 166px; padding: 1em;">news/nav/anything else goes here...</div>
<div id="col3">
<div class="style1" style="position: absolute; right: 0px; top: 150px; height: inherit; width: 166px; padding: 1em;">search/login/nav goes here...</div>
<div id="footer">
<div class="style1" style="position: absolute; bottom: 0; border-bottom:0; left: -48px; top: 704px; height: -25px; width: 903px; padding: 1em; background:url(madmenus.jpg); background-repeat:no-repeat;"></div>
</div>
</body>
</html>
also how would you have all the other divs sit in one container or wrapper div?? i think that may be where the prob lies...just a guess...
#9
-
- Members
-
- 499 posts
Jedi In Training
- Location:New York City
- Interests:Fine art, web and graphic design, naval architecture, chess, and sports.
Posted 27 October 2006 - 07:19 PM
I don't understand why you keep trying... I'm telling you CSS won't do it. You can waste your time if you'd like, or you can take my word for it.
#10
-
- Members
-
- 73 posts
Young Padawan
- Gender:Male
- Location:Australia, Sydney
Posted 27 October 2006 - 09:12 PM
we'll i NEED SOMETHING TO DO IT! say i'm sure someone must have a hack or know a way to do it somehow???
#11
-
- Members
-
- 45 posts
Young Padawan
Posted 28 October 2006 - 02:22 AM
CSS will do it!
I just don't really understand your code...
but your body css has to look like this:
Any table will now be 100% height if you want too, but im not sure it will also work with divs..
I just don't really understand your code...
but your body css has to look like this:
<style type="text/css">
<!--
html, body {
background-color: #35709d;
height: 100%:
}
body,td,th {
color: #FFFFFF;
}
.style1 {color: #000000}
-->
</style>
Any table will now be 100% height if you want too, but im not sure it will also work with divs..
#12
-
- Members
-
- 499 posts
Jedi In Training
- Location:New York City
- Interests:Fine art, web and graphic design, naval architecture, chess, and sports.
Posted 28 October 2006 - 10:48 AM
He's not using tables, Duckling.
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
