The Horizontal Way
First published on July 6, 2006
To introduce the topic of this very short post I’ll cite-myself three times:
[…]But I ask myself again: why so few people used or use now horizontal templates?[…] (23 january)
[…]Without losing my mind I taked advantage of the free time for: 1) to begin a new project based on an old idea;[…] (21 march)
[…]Next time we will explore the small world of the horizontal layouts more in the details, […] (31 march)
No, Python and IPv6 aren’t in topic. Either the “Digg effect” applied to love relations, I’m sorry.
With some months of delay, it’s time to ask your opinions about:
The site explain itself, so I don’t lost myself in smalltalks: I collected at this time about thirty horizontal scrolling layout websites - html (with nested tables and CSS) and flash - and I created a blog dedicating for every site linked a couple of personal observations about layout, added scripts and other features interesting for the creation of an ‘ideal’ horizontal website.
Further, I let at your disposal a downloadable template with scripts (an update version of the example with Horizontal Tiny Scrolling) and naturally an RSS feed to keep with care.
Update April, 7 2007: These are the blog posts that kindly speaks about it in this year.
Hi there,
Thanks very much for your website and article. I am new to website design and have been building my own website. I would really like to have horizontal scrolling on it, but can’t seem to get it to work. Maybe it’s because I have the scrolling section in a relative div? The website is at http://www.thegoodfolk.co.uk
I wondered whether you might know what I’m doing wrong. Please excuse any sloppy code - I’m new at this!
Thank you very much.
Fearghal
Eat a third and drink a third and leave the remaining third of your stomach empty. Then, when you get angry, there will be sufficient room for your rage.
7fwq8ev063o9bv6k
I am using this script with much success. However i get a error on line 214 character 2 of your script. For the life of me i have no idea why. Any idea’s?
Hi,
Great script… but I have a question.
I have a Container… within that I have a Header (that I want to stay center browser), Content (images that scroll horizontally), and a Footer (that I want to stay center browser).
I understand how to get things to stay center browser, but what happens when I apply this script and the Content gets really wide (and I assume I have to set the width in the Body) the Header and the Footer centers to the width (way right) and not to the browser window.
Is there a CSS work-around for this?
Thanks! Email me if you like.
David, the CSS work-around for keeping the header and footer centered in the browser window and not in the giant width of the scrolling page is to set them to a fixed position. My code looks something like this:
in the CSS file:
#header { position:fixed; top:0; left:0; }
#footer { position:fixed; top:600px; left:300px;}
in the HTML:
content
Footer text
I’m still having issues with elements that are at fixed positions not resizing…when I view the site on my 23″ monitor it looks great, but when I try on my laptop the footer gets cut off. So, if anyone has a better work-around, please share! Hope this helps!
ooh…just saw that my HTML code didn’t go through. But it’s simple - just a div for header with a header image inside and a div for footer with the footer text inside.
@rebecca - if you ever come back to here:
#footer { position:fixed; bottom:30px; left:300px;}