Don't know the proper terms for this... (screen resolution vs 100% width)

I don't know what to search for, or what this is called. It's something to do with the width of the webpage, and I'll try to explain it. I know it's simple, but I haven't found it.

I've been working on my site on a widescreen, hi-res monitor. I understand a lot of people use 800x600 or so, so I wanted to make my page width that size for most people. But if people have a wider resolution screen, and want their websites to fill up the window, how do I make my page "stretch", and not just have large blank sections on either side of the main page?

I figured out how to limit it down to 800px wide, so people don't have to scroll horizontally to see the whole width, if it was set wider. But I haven't found how to make it "auto-widen" above that.

In your style sheet.css find this and set to a fluid 100% width and it will display according to the visitors browser settings

#mainWrapper {
	background-image: url(../images/hatch_bg.gif);
        background-repeat: repeat;
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

NOTE: you must have a fluid template to use this successfully

Yes, that worked! Thank you!

Now I'm trying to figure out how to keep the logo image centered. I've been trying to change the settings in the main stylesheet, trying to find something that will keep it centered, but it keeps staying to the left, regardless of the window size.

Here is the line I'm tinkering with (if this is obvious, bear with me...I never even heard of stylesheets before last month).

#logo {float: left; position: absolute; top: 30px; left: 0px;}

I was obviously trying to change the "left", but so far haven't had it do it correctly (it just stays to the left).

Try this

#logo {
        text-align: center;
        position: absolute;
        top: 30px;
        left: 0px;}

Or better, post a url to this site

kobra:

Try this

#logo {
text-align: center;
position: absolute;
top: 30px;
left: 0px;}

I added an HTML tag to center the logo in my tpl_header.php file and it works now as I wanted it. :clap:

Hi, I realise this is an old post & may not be looked at but I have searched the forum for days for help & this is the closest I've come.
I am using darkness template & working with a fluid page (100%), I am wanting my logo to remain centred as in your website.
What html tag did you use & where in the tpl_header.php - I have tried all other suggestions for changes to the stylesheet within the forum & it doesn't seem to work.
I can't post url as I am only working on my local pc at the moment.
All help is appreciated.

majikweb,

Where is your site???
This would be a css fix most likely

my site is not live yet - still working with it on my 'local' pc. I am using 1.3.8a. Any suggestions I can try??

majikweb:

my site is not live yet - still working with it on my 'local' pc. I am using 1.3.8a. Any suggestions I can try??
If you are using "logo.gif" for this find in your css #logo and add this to that entry

#logo {
        text-align: center;
        }

Thanks but i have decided to go back to a static width instead of fluid. Then I can just make the logo to fit.