Page layout - align left or align center?

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

How do you like to align your pages?

To the left
1
6%
To the centre
14
78%
There is another way
3
17%
 
Total votes: 18

User avatar
Toneboy
Forum Contributor
Posts: 102
Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:

Post by Toneboy »

Twigletmac, would you mind posting a few links to sites you've designed, just so I (and anyone else who is interested) can have a look around and see how you deal with the problem (not asking for your php coding, I'd like to have a look at some pages and try and figure out how people get round it).
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post by McGruff »

Make 'em wrap rather than a fixed width aligned left or right. It is possible that a very highly designed site might rely on elements having fixed positions relative to each other and so might not be wrappable, but that's rare.

Accessibility isn't really a matter of debate: it's a matter of law, like it or not. You could still do a fancy design provided that, for example, you offer an alternative stylesheet for visually impaired people.
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

ihateevilbill wrote: Plus...the only development res worth talking about is 1600x1200 ... 800 by 600 ...u'r nuts
The only development res worth talking about is 1600x1200... on dual high-definition 24" flat-screen monitors ;)



(joking)
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

Just to throw my two cents in.

Unless my client specifically states otherwise, I design all my websites to view perfectly at 800x600. Actually, my table widths are usually 750px wide.

Typically, they are left aligned, with the right-most column of my layout table expanding past the 750px mark to wherever the right side of the browser window is. Althought the right-most column contains no data, it does spread the look-and-feel of the site across the user's whole screen.

If the site does not need pixel-perfect precision, then I'll usually just maximize the table to be 100% width.

I find that center-aligned tables only look good if there is a page background created to "encapsulate" the table.
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

McGruff wrote:Accessibility isn't really a matter of debate: it's a matter of law
Well I imagine 'the law' takes website accessibility as seriously as it takes someone sitting at home with their feet up smoking a Joint.


ihateevilbill wrote:use left is you are determined to use css instead of those slow (nested) tables, use center if you cant be bothered learning css
I keeping hearing people say "you should not use Tables in website designs, use CSS instead" which is a bit stooopid for a few reasons.
First of all... and this may come as a shock to some of you ...but you can actually have a CSS based website and use Tables!

Another reason is that using one or two Tables (and I'm not talking 'table within table within table within table' here) for the main structure of the site makes more sense than trying to get everything lined up using CSS, especially if you're creating a liquid-design, need elements or text placed left centered and right on the same line, or if you want your site centered in the browser.

The Table-less design method is flawed in many ways and in most cases causes more pains-in-the-arse than using the odd Table here and there does. Strict XHTML allows the use of the occasional Table so what's the big deal?
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

The reasons for table-less designs are obvious though:

1) wrapping everything in divs who's properties are controlled via a common style sheet allows you to redesign a site modifying only one file.

2) for tabled designs, especially intricate ones, html for the tables themselves can be kilobytes and kilobytes large. css designs lessen that to a degree.

but, on the other hand:

1) using tables, you can ensure that your design looks the way you want it to, on all browsers, without using any special hacks like you have to with css.

2) css sites usually look rather boxy and plain. tables give you the freedom to more easily incorporate fancy, image-heavy designs.


in the end, its up to the designer. or, more accurately, whomever is paying the designer.
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

microthick wrote:1) wrapping everything in divs who's properties are controlled via a common style sheet allows you to redesign a site modifying only one file.
True. But CSS can also control the width,height,left,top,display,position... etc, of Tables as well as Divs.

microthick wrote:2) for tabled designs, especially intricate ones, html for the tables themselves can be kilobytes and kilobytes large. css designs lessen that to a degree.
True. Using XHTML (strict) will however limit the amount of nested Tables you can have in a design. I also feel that using a HUGE amount of nested Tables is no longer good design practice due to what's possible with CSS.

microthick wrote:1) using tables, you can ensure that your design looks the way you want it to, on all browsers, without using any special hacks like you have to with css.
True. This is probably one of my main arguments regarding the use of the occasional Table in website designs.

micothick wrote:2) css sites usually look rather boxy and plain. tables give you the freedom to more easily incorporate fancy, image-heavy designs.
True. I would say though that not designs which use Tables need to be image-heavy. In most cases using Tables is simply for the base-structure of a website design regardless of if the design is minimal or fancy.



Cool. This is probably the first post that I've completely agreed with in a long time.. Give yourself a pat on the back :D
User avatar
Toneboy
Forum Contributor
Posts: 102
Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:

Post by Toneboy »

Alright, one final question. How do get the numeric value of screen.width into a PHP variable? I've tried this:

Code: Select all

$screenWidth = "<script>document.write(screen.width);</script>";
but it parses $screenwidth as:

Code: Select all

&lt;script&gt;document.write(screen.width);&lt;/script&gt;
Not ideal. Sorry, can someone provide the answer?
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

Code: Select all

<?php
$res = "<SCRIPT language="javascript">\n var res = screen.width;\n document.write(res);\n </SCRIPT>
?>
Stolen from:
http://forums.devshed.com/archive/5/2003/9/1/49952
User avatar
Toneboy
Forum Contributor
Posts: 102
Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:

Post by Toneboy »

Excellent, thanks for the help microthick.
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

Toneboy wrote:Excellent, thanks for the help microthick.
np
User avatar
Toneboy
Forum Contributor
Posts: 102
Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:

Post by Toneboy »

Er, slight problem with the output. :(

Have tried again, got stuck:

Code: Select all

<?php
session_start();
if ($pagewidth){
// set $pagewidth as session variable
session_register($pagewidth);
} else {
?>
<script language="JavaScript1.2">
window.location.replace("<? echo $PHP_SELF."?pagewidth=document.write(screen.width)</script>";?>")
<?
}
echo "<table width="$pagewidth"><tr><td>Pagewidth is $pagewidth</td></tr></table>";
?>
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

<script language="JavaScript1.2">

window.location.replace("<? echo $PHP_SELF ?>?pagewidth="+screen.width);

</script>
User avatar
Toneboy
Forum Contributor
Posts: 102
Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:

Post by Toneboy »

Bingo, that is it now microthick. Superb! :)
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

Just wanted to point one thing out...

Code: Select all

<script language="JavaScript1.2"> 

window.location.replace("<? echo $PHP_SELF ?>?pagewidth="+screen.width); 

</script>
.. that would give the you width of the users screen/desktop not the actual browser width.

Another thing is if you're planning to align stuff on your website (maybe attempting to center an 'absolute' div) remember that if someone resizes the browser your alignments are going to get messy.

This is ok with IE because you can easily detect when the browser is resized so can recalculate the postions of objects. With other browsers (NS for example) this becomes a pain in the arse due to the fact they are not too good when it comes to detecting if the browser has been resized.


But, if you're not doing any of that then it's ok :)


EDIT: Just one more thing... not all browsers can use window.location.replace. It might be worth doing a couple of if() calls to check for window.location and window.location.href as well.
Post Reply