Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1037 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

A fairly newb question about CSS layouts

Thread title: A fairly newb question about CSS layouts
Closed Thread    
    Thread tools Search this thread Display Modes  
03-02-2008, 08:42 PM
#1
SyntaxError is offline SyntaxError
Status: I'm new around here
Join date: Mar 2008
Location:
Expertise:
Software:
 
Posts: 2
iTrader: 0 / 0%
 

SyntaxError is on a distinguished road

  Old  A fairly newb question about CSS layouts

Hi, I've been learning CSS for about 2 weeks and I can create a basic page, but I can't figure out or find a tutorial on how to have the main content area stretch with the content and always have the footer at the bottom of the page.. This is quite hard for me explain, so I've got a few examples.

Note: This effect is seen most on blogs.

These 2 site seem to have it

http://www.brandonmuth.com/
http://www.ttthings.com/

But this one does not.

http://www.therissingtonpodcast.co.uk/

I apologise if my question sounds very vague, but so far I haven't found a tutorial on it so I have no idea of what the effect is called.

03-03-2008, 12:54 AM
#2
Zara is offline Zara
Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:
 
Posts: 249
iTrader: 9 / 100%
 

Zara is on a distinguished road

  Old

Please post your xhtml/css that your having problems with because I'm not sure that I understand your question.

03-03-2008, 01:19 AM
#3
SyntaxError is offline SyntaxError
Status: I'm new around here
Join date: Mar 2008
Location:
Expertise:
Software:
 
Posts: 2
iTrader: 0 / 0%
 

SyntaxError is on a distinguished road

  Old

Well, posting my markup won't really help right now because the page is very basic because I stopped coding it when I couldn't figure out how to do this effect. However, I have an example that should clear things up.

http://img114.imageshack.us/img114/9607/exampleuf1.jpg

03-03-2008, 02:56 AM
#4
jclewell is offline jclewell
jclewell's Avatar
Status: I'm new around here
Join date: Mar 2008
Location: Charlotte, NC
Expertise:
Software:
 
Posts: 4
iTrader: 0 / 0%
 

jclewell is on a distinguished road

Send a message via AIM to jclewell

  Old

Try something like this:

<div id="wrapper">

<div id="header>Put your header code/content here</div>

<ul id="main-nav"><li>Home</li><li>Page</li><li>Page</li></ul>

<div id="main-content">
<p>Let's say this a blog and i want to have ...Umpteen schizophrenic Klingons comfortably bought two obese chrysanthemums. The Klingons fights slightly progressive televisions, although one irascible wart hog easily telephoned two quixotic trailers. Umpteen mats mostly quickly abused five pawnbrokers, and one trailer marries two orifices.</p>
<p>Umpteen schizophrenic Klingons comfortably bought two obese chrysanthemums. The Klingons fights slightly progressive televisions, although one irascible wart hog easily telephoned two quixotic trailers. Umpteen mats mostly quickly abused five pawnbrokers, and one trailer marries two orifices.</p>
</div><!-- end main-content -->

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

</div><!-- end wrapper -->

Try not to use absolute positioning...and everything should work out fine.
If you want to center all this on the page, check out http://www.bluerobot.com/web/css/center1.html

Hope that helps. Hard to lend a hand without your code. Do you have a link to a dev page? or a JPEG of what you are trying to do?

03-03-2008, 02:51 PM
#5
Szandor is offline Szandor
Status: Junior Member
Join date: Jan 2008
Location: Växjö, Sweden
Expertise:
Software:
 
Posts: 45
iTrader: 0 / 0%
 

Szandor is on a distinguished road

  Old

I take it you use <div> blocks for the menu and the content and that these have the "float" property in your CSS? If so, just add "clear: both;" to your footer block and it should make sure there is no content on its sides. This should work if you use "position: absolute;" too.

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed