Layout help. - HTML Forums

Kashira · 04-29-2006, 07:41 AM

I assume this is the correct forum for this thread, since this is a general question and I have no idea whether the answer lies in HTML or CSS; I apologize in advance if I've misplaced this.
There was an idea I had for the layout of my site, http://ninthdimension.net which kept the banner across the top and a 100px space at the bottom (letting the "ground" image show through) fixed, but allow the site content between these two to scroll. Is this possible to achieve without resorting to frames?
Thanks.

-i-dont-know- · 04-29-2006, 07:50 AM

Hi and welcome to the forums

If you put the content between the banner and 'ground' in a div and add overflow: auto; to the CSS, when the content gets too big a scroll bar will be placed in the appropriate direction still preserving what you have at top and bottom.
If any of this confuses you just say and i'll be happy to help

Kashira · 04-29-2006, 07:59 AM

Thank you. :3 Will this allow for the space at the bottom as well? I forgot to mention I have tried to force the space, but all the div codes I've tried don't seem to like being aligned to the bottom; they'll appear somewhere on the page at random instead. Would an example code of how a layout like this would work be too much to ask for?

-i-dont-know- · 04-29-2006, 08:08 AM

Try something like this:
HTML

Code:

<div id="header">
<img src="logo.jpg" alt="This is the logo">
</div>
<div id="content">
<p>Lorem ipsum</p>
</div>
<div id="footer">
Copyright etc...
</div>

And the CSS

Code:

#content {
width: 300px;
height: 500px;
overflow: auto;
}

Then when the content gets bigger than 500px vertically a scroll bar only for that div will appear. Eg: http://www.livingunderworld.org/
You see the text box with scroller on this link, like that. Oh and you'll need to adjust heights and widths from the ones i gave you

Kashira · 04-29-2006, 08:20 AM

I think I see.. is there a way to arrange the scrollable div so the height will adjust according to the browser window size, or would the size have to be static? A div of adjustable size seems to dislike the space at the bottom. I'm sorry, I'd forgotten to mention the adjustableness I'm looking for as well before.

-i-dont-know- · 04-29-2006, 08:24 AM

Ok if you want to presevere liquidity then you'll need to give percentages to the heights of the top, middle and bottom div. So extra to the code i gave before:
CSS

Code:

#header {
height: 20%;
}
#content {
height: 60%;
}
#footer {
height: 20%;
}

Again you may need to mess around with the percentage values to get them right for your layout.

Kashira · 04-29-2006, 08:47 AM

Hm.. the middle section still covers up the bottom, and the header doesn't seem to mind scrolling along with the middle.. I get this feeling there may be something else in the html that's making the rest weird, or I may be adding the code improperly, so I uploaded a few textfiles if those will help:
http://ninthdimension.net/testindex.txt
http://ninthdimension.net/testindex2.txt

-i-dont-know- · 04-29-2006, 10:39 AM

Hmm, the having a mixture of tables and divs for layout isn't a very good idea. Can you convert your code using divs instead? Basically instead of using table cells use divs and apply the same formatting. Take a look at the file I attached. If you need just apply the same formatting to this one.

Kashira · 04-29-2006, 12:04 PM

Yes, thank you very much! That's exactly what I wanted it to do.
Sorry for the bombardment of questions, but I have just a few more: will the layout stay like that even if I give the bottom and top a fixed size? And could I create a similar-looking layout with the divs as I did the tables? Divs are still a new thing to me, so I'm not entirely sure what they're capable of.

-i-dont-know- · 04-29-2006, 02:12 PM

You can't give the top and bottom fixed heights because then you need them to fill up the space dead space (try it and you'll see what i mean). What you need to do is set the background colour to one that will look fine even if it isn't part of the image. eg. for the bottom place make the background colour #336600 so when the div expands to bigger than the image it still looks fine becuase the colours are the same. As for divs vs. tables check out this link on why you shouldn't use tables:
www.hotdesign.com/seybold/
Divs can do anything tables can do and have the advantages mentioned in the link. If you need any help concerning divs, again just ask

Kashira · 04-29-2006, 03:10 PM

Okay. Thanks a lot :3 I'll see how this goes..

-i-dont-know- · 04-29-2006, 03:18 PM

No problem, glad I could help

Kashira · 04-29-2006, 04:48 PM

Looks good so far, though there's still one small problem.. how would I hold the left content bar in place? The layout I was using before used a position: absolute to hold it down so the larger right-side bar could go next to it, but using that now gives me problems if I add enough content to the left bar that it would have to scroll. Is there another way these two can be rearranged to rest beside each other without using the abolute positioning?

-i-dont-know- · 04-30-2006, 03:41 AM

What do you want it to do if you add more content to it? It will either have to scroll or overlap the 'ground'.

Kashira · 04-30-2006, 08:34 AM

I was hoping there was a way it could scroll normally with whatever I put in that scrollable section. o: