Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> 100% Height Issue With Stretching Top To Bottom - Full Page, Problem with content not stretching from top to bottom.
sonesay
post Jul 1 2007, 12:41 PM
Post #1


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 640
Joined: 20-June 07
From: Auckland
Member No.: 45,102



Another CSS problem thats been annoying me. I got this tempalte off http://www.xs4all.nl/~peterned/examples/csslayout1.html the css file is here http://www.xs4all.nl/~peterned/examples/css/layout1.css I went ahead and applied it to my template. Their main divs contain 1 main container, 3 sub divs (header, content, and footer).
HTML
<div id="container">

<div id="header">
</div>

<div id="content">
</div>

<div id="footer">
</div>

</div>

I've had to add a few more divs inside the header div to include my table for banner and navigation.
HTML
<div id="header">
<?php include("includes/_header_section.php"); ?>
<?php include("includes/_login_section.php"); ?>
<div id="content_section_heading"> </div>
</div>

my output template file http://sonesay.trap17.com/gag/new_template.php its css http://sonesay.trap17.com/gag/css/new_style.css

I need the content part to cover all the space between the header and footer to cover the #cotainers bg color.


my original problem which lead me to redo the above template was the output of my news (sample version) http://sonesay.trap17.com/gag/news_test.php. Once the page got too long the footer which is surpose to be fixed at the bottom moves. I ran the document at w3 validator and it checked out ok.

http://sonesay.trap17.com/gag/news_test.php is using CSS from http://sonesay.trap17.com/gag/css/style.css sorry its abit clutered and have alot of unused ids and classes there.

Notice from BuffaloHELP:
Always use proper bbcode tags.


This post has been edited by BuffaloHELP: Jul 1 2007, 03:01 PM
Go to the top of the page
 
+Quote Post
BuffaloHELP
post Jul 1 2007, 03:05 PM
Post #2


Desperately seeking "any key" to continue...
Group Icon

Group: Admin
Posts: 3,427
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042



Try adding
CODE
DIV#content_section_heading

with position, height and width values.

When you place ID on DIV tags, you have to define it in CSS every time. Or, you could have defined DIV to be full width and height all the time. But that's at designer's choice. To make every DIV to be in full height and width:
CODE
DIV { height:100%; width:100% }

Go to the top of the page
 
+Quote Post
jlhaslip
post Jul 2 2007, 05:52 AM
Post #3


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,868
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol



Do you want something like this: http://jlhaslip.trap17.com/samples/templat...amed/index.html

Snag that page and check it out.
Go to the top of the page
 
+Quote Post
sonesay
post Jul 2 2007, 09:29 PM
Post #4


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 640
Joined: 20-June 07
From: Auckland
Member No.: 45,102



Yeah Jihaslip thats the desired effect but I dont like frames(or fame effect) sad.gif. I prefer the vertical scroll bar to span all the way from top to bottom and have the page appear as one long page. But I think the problem occurs when the page gets too long and the footer comes off position as here http://sonesay.trap17.com/gag/news_test.php but its just cosmetic.

I've tried the sugestion by buffalohelp its still not doing what I want it to do. There is another template i may look at its at http://www.openwebdesign.org/design/3270/zenlike/ its similar to what i want but without the top and bottom being set at 0 hopefully this wont lost position when i put in the content.

Thanks for the link to that example on frame like layout. I would probably like to use something like that for future projects. As for now Il' keep trying to fix it or maybe try get it working on the zenlike template. But I really should keep working on finishing the site as much as Id like things to be exactly as I want it to be I know because of differrent browsers its almost impossible.

Again thanks for your hlep guys trap17 rules!

This post has been edited by sonesay: Jul 2 2007, 09:30 PM
Go to the top of the page
 
+Quote Post
delivi
post Aug 11 2007, 04:45 PM
Post #5


Trap Grand Marshal Member
***********

Group: [HOSTED]
Posts: 1,298
Joined: 11-January 06
From: Chennai, India
Member No.: 16,932



thanks for sharing the information, this is really very useful

I was searching for an effective method that works in all browsers.
Go to the top of the page
 
+Quote Post
jlhaslip
post Aug 15 2007, 12:31 AM
Post #6


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,868
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol



Found this link in my travels.

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

Might work for you???
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. How Do I Extend My Div To 1oo% Height?(13)
  2. Css Help 100 % Height(6)


 



- Lo-Fi Version Time is now: 20th July 2008 - 07:58 PM