View Full Version : Getting there, need some more help on stretching banner!

04-12-2006, 10:29 AM
Hi all,

I was having issues with stretching a particular design to fit the browser... But with the help of some of you guys I'm getting somewhere!


Ok, so there's still a long way to go, but I'm hitting a brick wall again! I've managed to get the banner to do exactly what I want it to do - the graphic moves and stays to the right as you change the width of the browser, and it (almost!) stays smooth over the tiled image... But as you will see, the rest of the page is breaking up in strange places. I would like the footer to always be 'glued' to the bottom of the browser, whereas at the moment if you stretch your browser to full height, it stays about a third of the way up....And then there's the side bar, it breaks away from the footer when you take the browser down below a certain size.

So I'm hoping with some slight table manipulation I can start making it look sweet?! I understand this stuff can be acheived using CSS, but wouldn't know where to start- I'm completely new to even tables...

Any advice much appreciated!



04-12-2006, 12:42 PM
remove half of your filler text then post back

04-12-2006, 02:58 PM
Ok, here is where I am now!


Tried sticking it in a frameset. This works with regards to the footer always staying down the bottom... But do you have any suggestions on how I could make the side bar match up nicely, or fit in neatly? If I can't make the whole design look like one flowing thing, then I think I will go back to making it a fixed size...which is still possibly the best option for this design(?) it's just the guy asked if i could try a stretched one, and I fancied the challenge....

Any other general feedback on how I could make this look better is welcomed!!


04-12-2006, 03:28 PM

you have used framesets

please get rid of them. You dont need to use them

this is whats causing you to have problems

04-12-2006, 03:38 PM
but the first example - http://uzugexe.com/stretch/amp_stretch.html

is not a frameset just tables, and appears to be doing the same thing! How would I get the footer to 'stick' to the bottom of the browser without using frames? Thanks for you reply!

04-12-2006, 09:41 PM
but the first example - http://uzugexe.com/stretch/amp_stretch.html

is not a frameset just tables, and appears to be doing the same thing! How would I get the footer to 'stick' to the bottom of the browser without using frames? Thanks for you reply!

Cascading Style Sheets (CSS) are excellent, if a bit tricky to learn, for web site layouts, as well as specifying typography.

Creative Insanity
04-12-2006, 10:05 PM
I take it you are talking about the footer gap.
Simple to fix. If you slide the template correctly you can make the footer section that are just the lines a BG and then it will repeat and fill any gaps that happen.

04-13-2006, 11:07 AM
Thanks for the replies guys!

Yeah I wasn't too worried about the gap in the footer, more about what happens to the sidebar when you resize the browser. Can anything be done with just tables to stop this happening or at least improve the look?

I thought that CSS could be the answer, I'm gonna check out some CSS tutorials now....

04-18-2006, 12:30 PM
So I'm back on this one again!

I thought that a way to sort out the side bar navigation could be to have the image tiled instead, but the table would have to be 100% in height for it to have the desired effect....and push the footer to the bottom.

I understand this is not possible with regular html though? I've tried doing searches on this and found some CSS examples of how to achieve this but none of it works. Can anyone enlighten me on how to get tables 100% in height, or point me in the direction of a tutorial?!

Many thanks!


04-18-2006, 04:30 PM
100% height:

04-18-2006, 05:32 PM
Thank you domedia, that is exactly what I'm after! The only problem being that it assumes that you have a certain amount of knowledge...I know nothing about CSS or <div> that kind of thing, have only just started using tables!

So with the following code used in the example, where do I refer to this in my code? I assume this bit would go in the <style type="text/css"> bit? -

body {
background:pink url(leftcolbg.jpg) repeat-y left top;
color: #000000;

And then I tried referring to it in the table that I want to make 100% high like so -

<table id="body"......>

Am I going about this completely the wrong way?! :?: Should I even be using tables at all here? ......sorry! :?

04-18-2006, 07:25 PM
Yes you got it wrong :)
If you want to use custom CSS code you should read up on some beginner tutorials, or just *carefully* read the link I gave you above.

04-20-2006, 01:21 PM

Well I went away and did some reading and found another really useful forum and here is where I'm at now! (using the 100% height and CSS techniques described in that link)




The first is more with just dummy graphics, just to practice positioning the different areas and to see how it could fit together....

The second, is using the finished graphics and (almost!) looks exactly how I would like it to look (and shift when browser size is reduced/expanded) ...but, I've had to change the bottom wrapper to 550px and get rid of the text to fit it in! So this is obviously not practical as with text in there, most of the graphics would get shifted out of site completely....

Is there a way of getting pages/ text in there while retaining this appearance? (or as close to as possible!)

Thanks for all your help :)