Web Page Layouts using Cascading Style Sheets

[jlhaslip 4]

Here are a set of three Web pages I wrote a long time back when I was first starting to develop sites.
The first one is a two columned page with a full length sidebar for navigation links.
There are two that are identical except the sidebar positions are reversed.
Another is "one way" to create a three column layout.
And lastly, a 'framed' look on a page.

These are not 'fancy', you will need to look into the code and colourize it to suit, maybe set a width and centre it if you want, whatever...

Please feel free to snag the source and develop the pages into something you need. The only cost is please pass on the information to assist others as they need assistance on the Forum.

Full height sidebar

Left sidebar - full percentage width

Right sidebar - full percentage width

Three Column

Framed, single column

Should you have any questions about these layouts, or need help in Modding them to suit your particular design, please post a new Topic in the Cascading Style Sheet Sub-forum in the Programming Forum.

Thanks, and you are welcome.

[jlhaslip 4]

bump. no credits here

[TheDisturbedOne 1]

This tutorial is good, I'm going to bump it also

[innosia 1]

I am quite confuse with designI want to ask a question if you can help....When designing, do you prefer the web to have a fix width or a flexible width? I notice some site uses 80% of the width relative to the screen then it center the page, while the left 10% and right 10% which makes the site looks quite good. Do you have any idea how to css design that? And this is good since when they open with 800x600 or 1024x768 or even 1280x800 (widescreen) all look good, there is a space at left and right, while the center is flexible to the screen! Teach me how to design like that using CSSAnd one more question, if the design is so flexible, how do we put an image, I mean an image must be estimated so that it won't overrun the 100% width on a small resolution, so which resolution do you pick with to have a largest image width? This surely to prevent horizontal scroll

[gold_standard 0]

I am quite confuse with design
I want to ask a question if you can help....

When designing, do you prefer the web to have a fix width or a flexible width? I notice some site uses 80% of the width relative to the screen then it center the page, while the left 10% and right 10% which makes the site looks quite good. Do you have any idea how to css design that? And this is good since when they open with 800x600 or 1024x768 or even 1280x800 (widescreen) all look good, there is a space at left and right, while the center is flexible to the screen! Teach me how to design like that using CSS

And one more question, if the design is so flexible, how do we put an image, I mean an image must be estimated so that it won't overrun the 100% width on a small resolution, so which resolution do you pick with to have a largest image width? This surely to prevent horizontal scroll

Wow your site looks great! I am just staring to learn PHP, as my language is Java. It may seem like a daft question, but isn't it possible to get the dimensions of the screen from the browser, and then present the web page layout according to the space available?

[innosia 1]

Wow your site looks great! I am just staring to learn PHP, as my language is Java. It may seem like a daft question, but isn't it possible to get the dimensions of the screen from the browser, and then present the web page layout according to the space available?

Thanks, hehe sign the guest book please...

woah i never try to get the dimensions of the screen from browser (i think it must need javascript to do the post back or redirect after knowing the width? Is this is true then it might not good for search engine and well interface), I prefer using percentage in css but still learning it, my current site is used fix 800 px for optimize view for 800x600 screen with IE 7 and mozila firefox (lower version of IE might have a bit not nice things showing in my website).

where are you learning php from? http://php.net/ might have good resource about php and include a chm file for explaining any functions of php. but i think a book about desigining php and optimizing classes design is good, any idea? I still need to learn too to improve my site.

[jlhaslip 4]

isn't it possible to get the dimensions of the screen from the browser, and then present the web page layout according to the space available?

javascript is able to do this. I don't have a script for that, or I would share it. Try w3schools.com. They have a decent javascript tutorial system.
Lately, I have been designing sites for the 1024 width by setting widths to around 990px wide, using margin: 0 auto on the body and a background colour to suit the style. Sometimes I will use the same colour as the content for the body, other times a different colour. If I have a chance, I will create a sample to post up here.

[rpgsearcherz 5]

This tutorial is pretty good and helps understand most of what I've been messing with(I downloaded an already made CSS) but I'm still not understanding how to make the footer always stay at the bottom.Like...When you add text, rather than have to keep moving the footer with every line you do, it will always stay at the bottom of the box.Also really not understanding how to edit someone else's CSS. I have one with a top box, left, and center, but I was wanting to move the top to the left instead,=/