The Hickensian

4.03.08 Page Borders

16 comments

Some people have picked up on the fixed page border thing I’ve got on the Journal. I wanted a yellowed edge without using images, and while there are many ways to achieve the effect, and in the end I decided on position:fixed elements as the answer. It doesn’t work well in Mobile Safari though, and it’s removed for IE6. I see it as an experiment anyway, just a bit of playing around, which is what the Journal is for.

Anyway, my reason for bringing it up is that I want to point you to Justin Kropp who had the same idea simultaneously (but launched first!). His new site is the best damn fluid design I’ve seen in many a year.

Comments | RSS

No.1

∞ Matt Wilcox said 707 days ago:

You’re right, that is a nice liquid layout, and I like the page border idea too.

Out of interest, why didn’t you just use:

body { border : 10px solid yellow; }

No.2

∞ Matt Wilcox said 707 days ago:

I’ll answer my own question now I’ve had a think: because of the scroll. doh!

Nice effect though, very nice. :)

No.3

∞ Doug said 707 days ago:

I really like how that little bit of space separates the site from the browser chrome. Less tension and more goodness!

No.4

∞ Doug said 707 days ago:

Not sure if this is new or old but the way you have handled the sidebar on your journal (when resizing) is awesome. I love how everything perfectly narrows to a singular column.

No.5

∞ Robin said 707 days ago:

Instead of using extra elements why not do something like this?

html {
background-color: #fff6e0;
overflow: hidden;
}
body {
background-color: #fff;
position: absolute;
left: 13px;
top: 13px;
right: 13px;
bottom: 13px;
overflow-y: scroll;
}

Mind you, I’ve only tested that in Firefox. I know that IE6 has problems with absolute elements with t/b/l/r positions, but then it has problems with fixed position elements as well…

No.6

∞ Robin said 707 days ago:

Oh yeah, as Matt pointed out above, the scrollbar is in the normal position in your solution. Oh well :)

No.7

∞ Damon Stephenson said 707 days ago:

I have been doing this kind of effect on my sites for a while now, except only on top and bottom.

I like it :)

No.8

∞ Scott A Greiff said 707 days ago:

Hi,

Very interesting effect, but I’m not a fan. When I see a border like that my mind is telling me that the border represents the entire page. In this case it’s not necessarily the entire page. I think of a page in print. They use borders to frame the entire content, so when the page is folded in half, say, you know there’s more by the fact that the bottom of the visible page is cut and there’s not border. Perhaps I’m set in my ways a bit…

No.9

∞ Matt Munsey said 707 days ago:

I think a lot of us are having a great deal of fun watching how your site is developing, Jon. Loving where this is going!

No.10

∞ Steve said 707 days ago:

Yes, both nice, but they way that your “Elsewhere” buttons scale is sweeter than frosted mini-wheats man.

No.11

∞ resimler said 706 days ago:

i like it :)
Great Help
Thank you

No.12

∞ Yemek Tarifleri said 706 days ago:

have been doing this kind of effect on my sites for a while now, except only on top and bottom.

I like it :)

No.13

∞ Eystein said 706 days ago:

I did something similar a while ago, although wasn’t even sure myself if I liked it then.
Thumbs up for sliding sidebars though! And the footer tree replacement illustration.

No.14

∞ Steve said 705 days ago:

While I like this effect, it does seem to interfere with text searching the page. When I do a search, the “found” term is usually at the bottom of the window, beneath the border. It took a minute to figure out why the search was working but no highlighted word was visible on the screen (yes, I’m slow).

No.15

∞ Tom L said 705 days ago:

I like the Justin Kropp site too, but with one complaint. When page is very narrow, there is no min-width to hold it out – it crushes crazily. I know, min-width has some issues…

It is lovely though!