CSS Design

Fi_C**

Hi all,

I'm doing a website using CSS Boxes for positioning the layout. Since I was new to CSS positioning it took me ages to get everything to look the way I wanted it to, however I made the big mistake of not checking it on different screen sizes / resolutions as I went along. Now I'm pretty much finished the site and when I checked it at different resolutions or on a smaller screen I end up with scrollbars (horizontal and vertical). I've been messing around changing things in the style sheet from px to em & %'s, from absolute to relative, etc but its either not helping the matter or totally messing up my layout.
Are there general rules that I should have followed for this that I can now apply at this late stage or am I going to have to redo the whole thing?

Cheers,

Fi*

Goodshape

Could you show us the site?

And are you familiar with the css overflow property?

Ph3n0m

Quickest answer is gis a link to the site and lets see what we can do for you

Otherwise yes you will have to redo it all

Fi_C**

Thanks for that guys,

Goodshape - no I hadn't come across the overflow property before - I've put in overflow: visible; in the stylesheet - it helps with regard to the scollbars - but I guess my main problem is that I need to try to maintain the site layout on different screen sizes. thanks.

I only have the site on my localhost at the moment. But I have attached a zip file with the main files needed. I'm running it on apache to handle the XMLHttpRequest, however just looking at the index.html should give you an idea as to what my problem is.

I developed on a screen resolution of 1280x1024 so anything under that looks bad.

Thanks again,
Fi*

Gordon

It looks like, from a quick glance, that the #lftBar and #rgtBar ids are too wide. Have you tried reducing them in size?

Goodshape

Fi_C** wrote:

I developed on a screen resolution of 1280x1024 so anything under that looks bad.

Hmm.. this was a mistake, I'm afraid. While some, usually more simple, designs will scale well using % widths, others won't. In any case it's highly reccommended that you design your websites for viewing on a 1024x768 display, or even 800x600 if you can. These are still the two most popular screen resolutions out there and you simply can't expect that the majority of your audiance will have anything more.

Haven't had a look at your site yet, though.. I'll see what I make of that

egan007

You could use some client side resizing.
Your default could be 1280x1024 -(so no changes to design)

Then include the settings for 1024 X 786 in some javascript.
Call the script on load.

>>>a bit of pseudo javascript...

If (screenWidth <= 1024 && screen.height <=786)
{
myFirstdiv =getElementbyid('TheFirstBoxId')
myFirstfdiv.width=200
myFirstdiv.height=100

etc...
}

I have not looked at your zip file, so i'm not entirely sure that this is what you are lookinf for.

Goodshape

Had a look :-/

You could get that working the way (I think) you want it, but yea, I think it pretty much needs redone

You seem to have a lot more going on in the code than necessary.

Fi_C**

Thanks for your help,

Ok I'm gonna get a start on redoing this... Is it just the style sheet that needs redoing?
Could you give me a tip on where I was going wrong - should I have been using %, or em instead of px, or is it just a matter of designing it for a smaller screen resolution - and it will expand itself on larger ones?

Any tips would be very welcome so that I only need to redo this once
Fi*

Goodshape

make one container div. set width 100%, height 100%. everything goes in here.

left panel.. float left, width 50%, height 100%, margin and padding 0px, put your flogo.gif in as a background image (in the css) and set the background-position to middle right (honestly not 100% sure if that will work, but try it).

right panel.. float left, width 50%, height 100%, margin and padding 0px, background image as logo2.gif, background position middle left, text-align left.

you might have to experiment a bit to get that text to vertical align. Maybe put it in a table set to 100% height first... tables cells have valign properties, but divs don't work like that for some reason.

middle panel... the width of this seems to be set by the javascript, correct? would it be possible to also manipulate the other two rows with the js? I'm thinking place this panel in between the other two in the html, setting most of the same css properties (float left, height 100%, etc.) and then, through the javascript, set the width of this to 50% and the width of the other two to
25% each.



off the top of my head that's what I'd try. sorry if it's a bit incoherent.. basically thinking out loud

good luck.

Goodshape

OK, I've done what I was talking about in html and css. I didn't bother with the javascript at all so you'll probably have to change a few things to make that work for you.

Three files in the zip..

example.html --- the html
css.css --- the css
css2.css --- the css changes that should be made when someone clicks on a link (ie. the javascript).

Uncomment the line "<link rel="stylesheet" href="css2.css" type="text/css">" at the top of the html file to see what it looks like with the middle panel expanded.

Hopefully you'll at least be able to learn something from the css code in there.

Should work at all resolutions and looks good to me in Firefox 1.5 and IE6.

(oh -- you'll need to unzip this into your 'project' folder with the images - i haven't included them. I've renamed the files so they shouldn't overwrite anything)


//edit
add 'overflow : hidden;' to the middle class in css.css and 'overflow : auto;' to the same class in css2.css. I forgot to account for when you have actual content in there.

.

Fi_C**

Goodshape: THANK YOU so much for that.
I've just had a quick look at your CSS code - yes its makes a lot of sense now.
I'll try to use that kind of code in my own project after lunch - I'll let you know how I get on with it.
Thanks a million again for all your help.
Fi*

Fi_C**

Perfect,:)
I get it now - God I was over-complicating things way too much.
Thanks again,
Fi*

Goodshape

No problem

Good luck with it.