IPB

Welcome Guest ( Log In | Register )



Tags
 
Reply to this topicStart new topic

Web Page Layouts

, using Cascading Style Sheets


jlhaslip
no avatar
<?php $answer = googleit( $question ) ; ?>
*******************
Group: [MODERATOR]
Posts: 4,433
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
myCENT:72.10



Post #1 post Mar 13 2008, 01:50 AM
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. biggrin.gif
Go to the top of the page
+Quote Post
jlhaslip
no avatar
<?php $answer = googleit( $question ) ; ?>
*******************
Group: [MODERATOR]
Posts: 4,433
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
myCENT:72.10



Post #2 post Apr 14 2008, 06:52 AM
QUOTE
bump. no credits here
Go to the top of the page
+Quote Post
willielwgg
no avatar
Super Member
*********
Group: [HOSTED]
Posts: 320
Joined: 21-February 08
Member No.: 58,221
myCENT:64.22



Post #3 post Oct 9 2008, 10:31 PM
QUOTE
This tutorial is good, I'm going to bump it also
Go to the top of the page
+Quote Post
innosia
no avatar
Super Member
*********
Group: [HOSTED]
Posts: 236
Joined: 29-August 08
Member No.: 67,024



Post #4 post Oct 10 2008, 08:22 AM
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
Go to the top of the page
+Quote Post
gold_standard
no avatar
Newbie
*
Group: [HOSTED]
Posts: 9
Joined: 9-October 08
Member No.: 69,276
myCENT:30.45



Post #5 post Oct 10 2008, 10:25 AM
QUOTE(innosia @ Oct 10 2008, 08:22 AM) [snapback]410840[/snapback]
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?
Go to the top of the page
+Quote Post
innosia
no avatar
Super Member
*********
Group: [HOSTED]
Posts: 236
Joined: 29-August 08
Member No.: 67,024



Post #6 post Oct 10 2008, 10:49 AM
QUOTE(gold_standard @ Oct 10 2008, 10:25 AM) [snapback]410849[/snapback]
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? 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.
Go to the top of the page
+Quote Post
jlhaslip
no avatar
<?php $answer = googleit( $question ) ; ?>
*******************
Group: [MODERATOR]
Posts: 4,433
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
myCENT:72.10



Post #7 post Oct 10 2008, 12:49 PM
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.
Go to the top of the page
+Quote Post
rpgsearcherz
no avatar
Privileged Member
*********
Group: [HOSTED]
Posts: 717
Joined: 18-December 07
Member No.: 54,935
Spam Patrol
myCENT:READY[246.71]



Post #8 post Oct 19 2008, 07:22 PM
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,=/
Go to the top of the page
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No new 19 templest 1,437 16th August 2004 - 08:19 AM
Last post by: psp-playstation
No New Posts   6 galexcd 612 27th June 2007 - 03:56 PM
Last post by: alex7h3pr0gr4m3r
No New Posts   5 saitunes 330 26th September 2008 - 12:35 AM
Last post by: jlhaslip
No New Posts   6 itasor 602 27th August 2004 - 04:10 PM
Last post by: ket
No New Posts   10 spawn_syxx9 1,229 10th September 2004 - 06:08 AM
Last post by: wassie
No New Posts   5 Trystim 2,288 22nd September 2004 - 03:47 AM
Last post by: X3r0X
No New Posts   2 SEOClark 462 23rd February 2007 - 07:19 AM
Last post by: SEOClark
No New Posts   8 fffanatics 649 6th February 2008 - 05:34 PM
Last post by: karlosantana
No New Posts 0 nirvana43 589 7th July 2006 - 04:17 PM
Last post by: nirvana43
No New Posts   3 Casanova 309 22nd October 2004 - 02:59 PM
Last post by: ashiezai
No New Posts   1 Oni_BlueEyes 621 27th November 2007 - 12:08 PM
Last post by: rigueira
No New Posts 12 cman500 1,031 25th October 2006 - 02:29 PM
Last post by: jlhaslip
No New Posts   10 Spectre 5,129 6th December 2004 - 02:42 AM
Last post by: icedragn
No New Posts   3 Mario 777 24th November 2004 - 03:27 PM
Last post by: ashiezai
No New Posts   3 Darth Vivi 984 1st December 2004 - 03:51 AM
Last post by: Darth Vivi


 



RSS Open Discussion Time is now: 8th January 2009 - 08:55 AM