Hey, I posted this entry again, because I felt like the other one was not as clear.:-|
Ok, I have a common problem, I've made my page layout with CSS, but unlike tables, I have no clue how to make the layout autostretch, and work for higher resolutions. I'll write the code of my logo that is just like yours, goes across the whole top of the screen.

#top {position: absolute; top:0px; left:0px;}

I just need to know how to make it adapt to different resolutions, and probably different browsers, using CSS.

(Sorry if this is a dumb question, I just started to using xhtml and css;-) )

"http://funnyguys99.tripod.com/index.htm"
Here's my page, look at the source code if you want, also I cannot figure out hwo to get the bar in the middle to the very bottom:-(

ok thank link does not work, here's the adress:
http://funnyguys99.tripod.com/index.htm

? ok thank link does not work, here's the address:
? http://funnyguys99.tripod.com/index.htm

Okay, what you need to do is give your 'top' div a background image. By default, a div without a width stretches all the way across the screen; you can test this by adding this rule to .top:

.top { background-color:#0066ff; }

Now that works, let's think about the background image. Open 'logo.gif' in your image editing software and select an area 1 pixel wide and as tall as the image is from the right hand side. Crop to that size so you have a really thin slice of image and save it as 'logobg.gif' in the same directory as your 'index.htm' file. Now you just need to edit that CSS code to read:

.top {
background:#0066ff;
background-image:url("logobg.gif");
background-repeat:repeat;
height:91px; /* this should be the same height as the image */
}

Finally, if you also add the following rule to your CSS, you can remove the need for the position rule on .top:

body {
margin:0;
padding:0;
}

Hope that helps Brett.

? out how to get the bar in the middle to the very bottom:-(

Hi Brett,

The theory was right; position the element 0 pixels from the bottom of the screen. The sad fact is that it doesn't allow for overflow- content that goes further than one screen's worth of space. Now we could set an overflow property to our CSS, but it would only be honoured by a handful of browsers, so instead we're going to instruct our page to display it after everything else in the page. We do this simply by removing the position rules you have set on .bottom and replacing with:


.bottom {
clear:both;
}

Let me know if this doesn't work as I'm working from memory, and I've only just got up! (no coffee on board yet!) Cheers.

Hey I appreciate you guys helping me, and I think the problem's almost fixed, but the background repeat property is not working:-| It only show the background color. Why do you put the background color anyways? Won't logobg.gif fill that space anyway? Thanks for helping me so far, I hope there's not much more to solve.:-D . I updated the page to what it looks like now, if you want to take a look.

? Hey I appreciate you guys helping me, and I think the problem's almost
? fixed, but the background repeat property is not working:-| It only show
? the background color. Why do you put the background color anyways? Won't
? logobg.gif fill that space anyway?

The background-color property should work if the image is not available or images are turned off. I've noticed on the new page that you are using this:

background-image:url("C:\Documents and Settings\Brett Rutledge\My Documents\Site\Jokes\Pictures\logobg.gif");

That won't work online because C:\ etc doesn't exist. You need to use your server's root- / or relative linking ../ ../../ etc. Failing that, try absolute: http://www.yoursite.com/logobg.gif

Hope that helps.

GL

Hey i researched a bit, got some tips, mixed them with yours, and now the layout is perfect! It isn't up on tripod yet, because you can't edit css files there. One last question, wise one, what is a good place for free or cheap wepspace?

Oh, and I will link to this site after I am done, give you guys a couple extra hits:-)

http://www.supanames.co.uk/

? Oh, and I will link to this site after I am done, give you guys a couple extra hits :-)

Hey thanks, but its not the hits we're after, we like new people to talk to :-) Welcome, by the way, Brett.

Thank You:-D

It looks good, but the width is fixed. What if I want the middle column to stretch according to the browser window width?

? It looks good, but the width is fixed. What if I want the middle column to
? stretch according to the browser window width?

yes, you can do that with no problems.