Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Update to my old 3 column layout template

Reply
Thread Tools

Update to my old 3 column layout template

 
 
Toby A Inkster
Guest
Posts: n/a
 
      01-03-2008
About three years ago I put together a minimal pure-CSS layout using as
few hacks as possible that worked well in modern standards-compliant
browsers, but also in Internet Explorer 5+ and Netscape 4.x, while
degrading gracefully in non-CSS browsers.

This can be found here:
http://examples.tobyinkster.co.uk/3col

Today I've updated it a little:

* Got it working in Internet Explorer 7.0 (Only verified
in WINE -- not on Windows. Can anyone verify this on Windows
XP/2003/Vista?)

* Got it working in Internet Explorer 5.2 for Mac (the
last version made).

* Got it working in iCab 3+ for Mac.

* Added a small piece of Javascript to force all the columns
to be same height.

* Added a footer below the columns. When Javascript is
enabled, this will be full-width. Otherwise it will only
be as wide as the middle column.

All this new stuff is here:
http://examples.tobyinkster.co.uk/3col-new

What do people think? A good way of doing 3 columns + header + footer?

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 4 days, 1:46.]

Sharing Music with Apple iTunes
http://tobyinkster.co.uk/blog/2007/1...tunes-sharing/
 
Reply With Quote
 
 
 
 
J.O. Aho
Guest
Posts: n/a
 
      01-03-2008
Toby A Inkster wrote:

> * Added a small piece of Javascript to force all the columns
> to be same height.


In SeaMonkey 1.1.7 the middle column is slightly longer than the two at the
side, the middle one touches the footer and it looks like a two pixel high
line between those. The left and right column has 2-3 pixel space between them
and the footer.



--

//Aho
 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      01-03-2008
Toby A Inkster wrote:

> Today I've updated it a little:
>
> * Got it working in Internet Explorer 7.0 (Only verified
> in WINE -- not on Windows. Can anyone verify this on Windows
> XP/2003/Vista?)


> http://examples.tobyinkster.co.uk/3col-new
>
> What do people think? A good way of doing 3 columns + header + footer?


Freezes my IE7 (Windows XP Home).
That is, first loads as it should, showing the same effect as J.O. Aho
is seeing in SeaMonkey, and which my Firefox shows too.
But then as I want to drag the right side of my browser window to see
the effect on a narrower window, my mouse pointer changes into a
west/east arrow, until the page is redrawn, but after that it's all
frozen, and the only way out is ctrl + alt + del.

--
Els http://locusmeus.com/
 
Reply With Quote
 
J.O. Aho
Guest
Posts: n/a
 
      01-03-2008
Els wrote:
> Toby A Inkster wrote:
>
>> Today I've updated it a little:
>>
>> * Got it working in Internet Explorer 7.0 (Only verified
>> in WINE -- not on Windows. Can anyone verify this on Windows
>> XP/2003/Vista?)

>
>> http://examples.tobyinkster.co.uk/3col-new
>>
>> What do people think? A good way of doing 3 columns + header + footer?

>
> Freezes my IE7 (Windows XP Home).
> That is, first loads as it should, showing the same effect as J.O. Aho
> is seeing in SeaMonkey, and which my Firefox shows too.
> But then as I want to drag the right side of my browser window to see
> the effect on a narrower window, my mouse pointer changes into a
> west/east arrow, until the page is redrawn, but after that it's all
> frozen, and the only way out is ctrl + alt + del.


Reading your post, I decided to narrow down the window and see what happens.
The text in the mid column will continue downwards outside the middle column
and cover the text in the footer. Still with SeaMonkey, not bothered to try it
in Opera nor Konqueror.


--

//Aho
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      01-03-2008
J.O. Aho wrote:

> Els wrote:
>> Toby A Inkster wrote:
>>
>>> Today I've updated it a little:
>>>
>>> * Got it working in Internet Explorer 7.0 (Only verified
>>> in WINE -- not on Windows. Can anyone verify this on Windows
>>> XP/2003/Vista?)

>>
>>> http://examples.tobyinkster.co.uk/3col-new
>>>
>>> What do people think? A good way of doing 3 columns + header + footer?

>>
>> Freezes my IE7 (Windows XP Home).
>> That is, first loads as it should, showing the same effect as J.O. Aho
>> is seeing in SeaMonkey, and which my Firefox shows too.
>> But then as I want to drag the right side of my browser window to see
>> the effect on a narrower window, my mouse pointer changes into a
>> west/east arrow, until the page is redrawn, but after that it's all
>> frozen, and the only way out is ctrl + alt + del.

>
> Reading your post, I decided to narrow down the window and see what happens.
> The text in the mid column will continue downwards outside the middle column
> and cover the text in the footer. Still with SeaMonkey, not bothered to try it
> in Opera nor Konqueror.


That's the same here, but I'm guessing it's because JavaScript is used
to detect the height. A refresh of the page after narrowing the window
will sort it. (Firefox)

--
Els http://locusmeus.com/
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      01-03-2008
Els wrote:
> Toby A Inkster wrote:
>
>> Today I've updated it a little:
>>
>> * Got it working in Internet Explorer 7.0 (Only verified
>> in WINE -- not on Windows. Can anyone verify this on Windows
>> XP/2003/Vista?)

>
>> http://examples.tobyinkster.co.uk/3col-new
>>
>> What do people think? A good way of doing 3 columns + header + footer?

>
> Freezes my IE7 (Windows XP Home).
> That is, first loads as it should, showing the same effect as J.O. Aho
> is seeing in SeaMonkey, and which my Firefox shows too.
> But then as I want to drag the right side of my browser window to see
> the effect on a narrower window, my mouse pointer changes into a
> west/east arrow, until the page is redrawn, but after that it's all
> frozen, and the only way out is ctrl + alt + del.
>


No such problem with WinXPPro & IE7. Looks okay. But you are correct to
ask Toby. IE7 has it own set of "features" independent of earlier
versions of IE, MS's statements of "embracing web standards" has just
been marketing BS.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      01-03-2008
J.O. Aho wrote:

> In SeaMonkey 1.1.7 the middle column is slightly longer than the two at
> the side, the middle one touches the footer and it looks like a two
> pixel high line between those. The left and right column has 2-3 pixel
> space between them and the footer.


Yeah -- this is due to having used different amounts of padding on each
column. Technically the heights (in proper CSS box model terms) are
identical. A lot of the presentational stuff (margins, paddings, borders,
etc) was quite scrappy -- it's really just to demonstrate the technique
rather than win any beauty contests.

However, I've just spent 5 minutes cleaning up the paddings, borders and
margins to make them a bit more consistent.

I'd like to offer a prize to anyone who can tell me what's making my JS
fail in Konqueror 3.x but run OK in Safari.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 4 days, 4:49.]

Sharing Music with Apple iTunes
http://tobyinkster.co.uk/blog/2007/1...tunes-sharing/
 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      01-03-2008
Els wrote:

> Freezes my IE7 (Windows XP Home).


Bonus!

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 4 days, 5:02.]

Sharing Music with Apple iTunes
http://tobyinkster.co.uk/blog/2007/1...tunes-sharing/
 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      01-03-2008
On Thu, 3 Jan 2008 14:34:28 +0000, Toby A Inkster
<(E-Mail Removed)> wrote:

>About three years ago I put together a minimal pure-CSS layout using as
>few hacks as possible that worked well in modern standards-compliant
>browsers, but also in Internet Explorer 5+ and Netscape 4.x, while
>degrading gracefully in non-CSS browsers.
>
>This can be found here:
>http://examples.tobyinkster.co.uk/3col
>
>Today I've updated it a little:
>
> * Got it working in Internet Explorer 7.0 (Only verified
> in WINE -- not on Windows. Can anyone verify this on Windows
> XP/2003/Vista?)
>


Using FF 2 on vista premium looks good. If you intended for the center
div to be bordered, it was not shown.




> * Got it working in Internet Explorer 5.2 for Mac (the
> last version made).
>
> * Got it working in iCab 3+ for Mac.
>
> * Added a small piece of Javascript to force all the columns
> to be same height.
>
> * Added a footer below the columns. When Javascript is
> enabled, this will be full-width. Otherwise it will only
> be as wide as the middle column.
>
>All this new stuff is here:
>http://examples.tobyinkster.co.uk/3col-new
>
>What do people think? A good way of doing 3 columns + header + footer?


Looks good with my stuff.
With JS on the footer is wide as intended.

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      01-03-2008
In article <(E-Mail Removed)5n.co.uk>,
Toby A Inkster <(E-Mail Removed)> wrote:

> About three years ago I put together a minimal pure-CSS layout using as
> few hacks as possible that worked well in modern standards-compliant
> browsers, but also in Internet Explorer 5+ and Netscape 4.x, while
> degrading gracefully in non-CSS browsers.
>
> This can be found here:
> http://examples.tobyinkster.co.uk/3col
>
> Today I've updated it a little:
>

....

> * Got it working in iCab 3+ for Mac.
>

.....
>
> All this new stuff is here:
> http://examples.tobyinkster.co.uk/3col-new
>


In iCab 3.03 after the last of the words in the centre column
("...the heights if the browser window is resized."), there is an
enormous amount of space left to scroll down. To give you an idea
visually I might have to make you a movie of it! Or perhaps this
will do: on a 1200px high screen, by the time the last words
mentioned above have disappeared by scrolling down, the scroll
bar (at the roughly average text size for earthling eyes) has
travelled about 1/3 the height. The other 2/3 get nothing but the
empty coloured 3 cols until the footer appears.

On a more cheery note, the little face in iCab beams... I could
have sworn its smile is wider than usual!

> What do people think? A good way of doing 3 columns + header + footer?


One of the things I personally would like to see (but it is
perhaps impossible?) in these designs is for the text in the
centre to get bigger on my command but not the sides so much (the
acceleration of the text size on clicks should not be so uniform
acoss columns). As the day wears on, I want to read big but the
navigation is not so big a concern - it would be nice if it did
not come along for the ride quite so much and as a result
encroach on the width of the centre col. I am, of course, not
complaining about your design. This is quite a general thing to
do with most of these em widthed side cols. Not em widthing them
has other downsides!

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
setting Column width of Template Column in Datagrid.. Charleees ASP .Net 2 06-20-2006 12:52 PM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
DataGrid loses view state if first column is a template column. Ken Varn ASP .Net 1 08-19-2005 02:54 PM
how to know if a datagrid column is a template column? Dexter ASP .Net 1 01-18-2005 01:45 PM
Bound Column or Template Column (w dAdapater?) in DataGrid Ravichandran Mahalingam ASP .Net Datagrid Control 0 01-09-2004 03:30 PM



Advertisments