Loading...
HOME
 |
Web Page Layouts - using Cascading Style Sheets | ||
Discussion by jlhaslip with 7 Replies.
Last Update: October 19, 2008, 12:22 pm | |||
 |
|||
 |
 |
|
 |
 |
| Reply / Comment | New Discussion / Topic | Share / Bookmark | E-Mail a Friend |
 |
|
|
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.
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.
QUOTE
bump. no credits here
QUOTE
This tutorial is good, I'm going to bump it also
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
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
QUOTE (innosia)
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 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
Link: view Post: 410840
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?
QUOTE (gold_standard)
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?Link: view Post: 410849
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? www.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.
QUOTE
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.
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,=/
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,=/
|
|
|
|
|
|
| Reply / Comment | New Discussion / Topic | Share / Bookmark | E-Mail a Friend |
Similar Topics:
cascading style sheets
How To Create A Good Website With H...
Hi All, As i signed up today I thought that I should help people on making there websites better and more suffisticatedToday I am just going to show you how to make a very simple website.
But first I shall show you what the main tags you will be using meen.
You will be usin ...more
Ruling Over The Horizontal Rule Hr...
Although HTML and Cascading Style Sheets are standards defined by the World Wide Web Consortium (the W3C), the standards are loosely defined such that browser vendors, Microsoft, Mozilla, Google, and the like, implement the standards differently.
The HR tag is one such element that is i ...more
 Installing Apache And Php Need help? (2)
|
(9) Php--> Content-only Pages Create easy to edit php pages. 
|
