...

View Full Version : How can I make a letterbox design?



Doctor_Varney
10-28-2008, 01:51 AM
I've been trying to work out the code for making a letterbox design. You know the sort of thing... A small letterbox-shaped area, centred on the page, which fosusses the viewer into a small, but well organised viewscreen. Possibly, with a scrollbar.

Someone posted an example. I thought I'd bookmark it and come back to discover how it was done. Unfortunately, I can't find it anywhere. If the OP can remember where it is and repost the example, I'd be grateful.

I've spent two full evenings trying to position a simple square box in the middle of the screen, but nothing seems logical, or straightforward. This is stage one - just centering a box, but it's a complicated and messy affair and I just can't seem to get to grips with it.

I also want the design to have rounded corners but having looked at some online tutorials, I'm finding them difficult to understand.

Any help or advice would be appreciated.

Thanks.

Lochlan
10-28-2008, 02:38 AM
Just make your div


<div id="box"></div>

Then the CSS for it



#box {
width:800px;
height:300px;
overflow:auto; --this adds a scrollbar if the content goes beyond the dimensions of the box
margin:0 auto; --auto margins left and right pushes it into the centre
}


Hope that gets you started...

Maybe add some top margin to move it down the page a bit.

FWDrew
10-28-2008, 02:40 AM
Hi Doctor Varney,

I am not quite sure what you mean by a letterbox design, could you show me an example, if you can find one?

As for centering the box, I prefer the dead centre method (http://www.wpdfd.com/editorial/thebox/deadcentre4.html), be sure to check it out :)

As for rounded corners, do you have access to photoshop or GIMP? There are a million ways to do it, but I think the simplest and most logical is just with some basic images and css positioning. If you google css rounded corners you will find all kinds of tricks and extra markup to do it without images if you dont want to go that route.

One option is to use css3 and have firefox/camino users enjoy rounded corners, and just have it be a square box in IE (or throw in a conditional comment and your gold).

.box {
border-radius: 1.6em;
}

Hope that helped some :thumbsup:

Best Regards,

Drew

Doctor_Varney
10-28-2008, 02:53 AM
Many thanks, Lochlan and FWDrew. That's something to get started with.

I'm more of an imaging expert (artist?) than coder so I was hoping to get a handle on making rounded corners using images. I've done it before with tables (come back tabular-layout, all is forgiven!) but the CSS box model looks more like Superstring Theory (which, ironicaly, I find easier to understand!).

Remembering the frustrations of IE6 and it's ability to just...well... ruin everything, I'm concerned about how to make sure things like CSS positioning and margin: 0 auto; will actually stay robustly consistent, across the different browsers.

Many thanks again. Have bookmarked this thread, so I can keep checking in for suggestions.

Regards,

Doctor V

Lochlan
10-28-2008, 05:50 AM
If you have a fixed size for your "letterbox", you could just create the image shape (rounded corners and all) in Photoshop or what have you. Then use this image as a background for the container DIV!

Doctor_Varney
10-28-2008, 05:09 PM
Good idea! I instantly see the trade off: - Getting all browsers to display a slightly larger image vs. building a complicated system of divs & images, to surround a background CSS fill.

effpeetee
10-28-2008, 06:23 PM
I just cobbled this (http://exitfegs.co.uk/Letterbox.html)up. Is it what you are after. Obviously can be adjusted.

Unashamed plagiarism.

Here's the original. (http://www.wpdfd.com/editorial/thebox/deadcentre4.html)

Frank

Doctor_Varney
10-29-2008, 12:28 AM
I love the dead centre method. I'm even pleased that whoever wrote that knows how to spell 'centre' in English. Small detail.

However, it confuses me more. I can't work out how or why this method works. AFAIK, an absolutely positioned element should not roll with the percentages and move around like that. My fear is that someone, somewhere, has a browser that can break it.

Also, when I've enlarged the central box, I can't work out how to centre the text inside it. I've tried auto margins; I've tried adding another 'horizon' inside - but I can't get it to centre along the left-right axis.

I like the principle of the dead centre method so much, I've sat up nearly all night, examining and tweaking it, to try and get a proper understanding of it. But what baffles me is: - why the negative margins??? Shouldn't it centre on the y axis, automatically, by virtue of the text being inside the 1px horizon? Why won't text-align:center; work?

When I first got into CSS it looked as though I'd be able to master it. Now things are just getting more complicated by the minute. Where is the command which says "center-this-box-on-the-screen:now;" or "make-my-webpage-work:NOW;???

Apostropartheid
10-29-2008, 12:33 AM
I love the dead centre method. I'm even pleased that whoever wrote that knows how to spell 'centre' in English. Small detail.
French. *cough* :rolleyes:
As for the negative margins, as the top left corner is positioned 50% dead center, we need to pull it back by half its width to make its midpoint be...dead center. Okay, that term is annoying me now.

Doctor_Varney
10-29-2008, 12:55 AM
Used in England. Therefore English. (http://crofsblogs.typepad.com/english/2005/04/center_or_centr.html)*cough* :rolleyes:

Thanks for the explanation. But that doesn't explain why text-align:center; doesn't work.

Apostropartheid
10-29-2008, 01:32 AM
Used in England. Therefore English. (http://crofsblogs.typepad.com/english/2005/04/center_or_centr.html)*cough* :rolleyes:

Thanks for the explanation. But that doesn't explain why text-align:center; doesn't work.
I'm a Brit too, you know. Doesn't make it any less French. :D

Text-align (should REALLY be called inline-align or something of the sort) only works for inline-level elements, think abbr or span, but not block-level, think blockquote or div. Without block level elements, we lose a lot of advantages, like proper heights and widths, although in theory you could do it all inline.

rmedek
10-29-2008, 06:55 AM
AFAIK, an absolutely positioned element should not roll with the percentages and move around like that.

An absolutely positioned element is positioned relative to its container. So, you position 50% from the left, it'll always be 50% from the left side of the container. That "dead centre" page has the browser window as the container. Therefore, you move the browser window, the box moves with it.


Also, when I've enlarged the central box, I can't work out how to centre the text inside it.

text-align:center would do the trick.


But what baffles me is: - why the negative margins??? Shouldn't it centre on the y axis, automatically, by virtue of the text being inside the 1px horizon? Why won't text-align:center; work?

text-align aligns text. At the moment there's no CSS rule that says "take this box and position it in the center." The negative and auto margins are workarounds that have become common practice over the years.


Where is the command which says "center-this-box-on-the-screen:now;" or "make-my-webpage-work:NOW;???

Those commands are negated by the browser's built-in commands of always-get-what-you-want: no, all-of-your-whining: stop, and suck-it-up-get-with-the-program-and-act-like-a-man: please.

FWDrew
10-29-2008, 07:51 AM
:D

Those commands are negated by the browser's built-in commands of always-get-what-you-want: no, all-of-your-whining: stop, and suck-it-up-get-with-the-program-and-act-like-a-man: please.
Do these work in IE6 or is there a hack for it? :D

Doctor_Varney
10-29-2008, 12:25 PM
I'm a Brit too, you know. Doesn't make it any less French. :D

Doesn't make it any less English either.


Text-align (should REALLY be called inline-align or something of the sort) only works for inline-level elements, think abbr or span, but not block-level, think blockquote or div. Without block level elements, we lose a lot of advantages, like proper heights and widths, although in theory you could do it all inline.

Problem is, I don't understand the terms 'block level' and 'inline', despite having read about them. I use them in rules, when advised to, but the concepts are meaningless to me.

Doctor_Varney
10-29-2008, 12:38 PM
text-align:center would do the trick.

Except it doesn't.


Those commands are negated by the browser's built-in commands of always-get-what-you-want: no, all-of-your-whining: stop, and suck-it-up-get-with-the-program-and-act-like-a-man: please.

Oh shut up. Don't tell me you haven't at some point beat your head on the desk over a CSS problem...:(


An absolutely positioned element is positioned relative to its container. So, you position 50% from the left, it'll always be 50% from the left side of the container. That "dead centre" page has the browser window as the container. Therefore, you move the browser window, the box moves with it.

Thank you. :thumbsup:

effpeetee
10-29-2008, 01:06 PM
Except it doesn't.


It does for me Doctor.

here it does. (http://exitfegs.co.uk/Letterbox.html)

Frank

Doctor_Varney
10-29-2008, 01:18 PM
Thanks, effpeetee. Yes, it does work, now that I've removed the left position.

abduraooft
10-29-2008, 01:42 PM
Could you post a link to your page(or the complete html+CSS)?

Doctor_Varney
10-29-2008, 01:47 PM
What is doing my head in at the moment, is that when I have used absolute positioning, in the past, the position of the element has not stayed relative to it's container, but to the page. Now what I'm seeing working here, is contrary to everything I thought I understood about abs.positioning. That is frustrating. It feels like CSS is changing all the time, just to make things difficult for me. Of course, it's not - but that's how it feels, sometimes.

effpeetee
10-29-2008, 02:06 PM
If it's any consolation, I generally use a "Suck it and see" technique.

I liken css as trying to push a wet eel headfirst, using its tail. I have five expensive books on CSS, but while they show me working examples, none of them has explained WHY, in a way that is satisfactory to me.

I know I am not in my prime, but I am not an imbecile either. (At least that is my opinion.)

Small wonder that my Avatar is cross-eyed!

I live in hopes.

Frank

Doctor_Varney
10-29-2008, 02:44 PM
Interestingly enough, without the added complication of the "horizon", this works:

HTML

<div id="container">
<h1 class="centretxt">
This text is dead centre
</h1>
</div>
CSS

#container {position:absolute; top:50%; left:50%; margin-left:-200px; margin:-175px; height:350px; width:400px; background-color:#600;}

h1 {font-size:1em;}

.centretxt {width:100%; text-align:centre; border:1px solid #000; position:absolute; top:50%;}

Which, with all due respect to the highly commendable thought processes behind "Dead Centre" bloke's expertise, suggests to me CSS easily can get needlessly complicated.

effpeetee
10-29-2008, 02:58 PM
There's usually more than one way to kill a cat!

Incidentally, I couldn't get centred text to work!


#container {
position:absolute;
top:50&#37;;
left:50%;
margin-left:-200px; These two should be reversed. The -175px will over-ride the -200px
margin:-175px;
height:350px;
width:400px;
background-color:#600;
}


I modified it a little here (http://exitfegs.co.uk/Letterboxb.html).

Frank

Doctor_Varney
10-29-2008, 03:00 PM
I liken css as trying to push a wet eel headfirst, using its tail. I have five expensive books on CSS, but while they show me working examples, none of them has explained WHY, in a way that is satisfactory to me.

Yes, and it's very much the same for me. But the point is, it shouldn't be. CSS evidently demands lateral thinking from us. That's all well and good, but when you get an artistic idea, you can easily use up all that creative energy trying to just make the CSS work. I want to design web-pages, not play with live eels. That cramps my style and uses up my energy. Once I've got some small element to work, it leeches out my initial playful enthusiasm for the design. I didn't have this kind of trouble with tables. People who appreciated my work loved it for it's content, while those who's first priority was whether it fitted W3C standards, rubbished it purely on the strength of the code. That can be disheartening.

BoldUlysses
10-29-2008, 03:08 PM
Interestingly enough, without the added complication of the "horizon", this works


CSS easily can get needlessly complicated.

Much (most) of the time it's as a result of needless complication by the coder. The "horizon" was added in the example for illustrative purposes; as you discovered, it's not necessary, and really more obfuscatory than anything.

I use the dead center (American "bloke" here) method for my design site (link below in signature). As you may have discovered, the only real downside to it is the negative margins make some of the content inaccessible by scrollbars if the window size drops below the container size. Increase the container size to, say, 800 x 600, shrink the browser window size and you'll see what I mean.

I get around this problem with my website by simply making the container smaller than I would reasonably expect someone's browser window size to be. There are scripts to "force justify" the container, however, if your container size must be larger and you feel browser window size may be an issue.

Doctor_Varney
10-29-2008, 03:19 PM
Thanks for sharing that, Matt. That's pretty much the design type I was after - and I like it! What concerns me a little is that when a problem looks insurmountable, someone always comes in with scripting suggestions. The trouble with that is, that if CSS were as elegant and versatile as it claims to be, scripting wouldn't have to figure in something as fundamental as basic layout - at all. Ever. The test of whether something is intuitive or not, surely would be in the new student's success in grasping the basics. It occurs to me, that those still struggling with the basics appear to outweigh the pioneers enjoying themselves. I could be wrong, it's just my initial perception. We push on...

abduraooft
10-29-2008, 03:32 PM
#container {position:absolute; top:50&#37;; left:50%; margin-left:-200px; margin:-175px; height:350px; width:400px; background-color:#600;}

margin:-175px; is the shorthand

margin-top:-175px;
margin-right:-175px;
margin-bottom:-175px;
margin-left:-175px; Thus your margin-left:-200px; has no effect there!

BoldUlysses
10-29-2008, 03:44 PM
The trouble with that is, that if CSS were as elegant and versatile as it claims to be, scripting wouldn't have to figure in something as fundamental as basic layout - at all. Ever.

Not necessarily. You have to weigh the intention of the folks who created CSS in the first place. It came about as people were trying separate content from presentation and is designed to be symbiotic with HTML. In other words: no HTML, no CSS. Therefore (especially in the CSS1 definition), the things that CSS was designed to accomplish presentation-wise are closely tied with the purpose of HTML, which is a document markup language, emphasis on the document. Most physical documents don't make a big deal out of vertical alignment, instead being more concerned with horizontal placement, document flow and all the rest. That heritage in HTML explains why CSS doesn't have much in the way of vertical control--it was designed to embellish HTML documents, and we're stretching and pulling and hacking it, making it do things its creators may not have foreseen. So if I'm venturing, design-wise, far away from the natural flow of a plain HTML document, it doesn't surprise me if a script becomes necessary. I try to avoid it, but I do need one it's clear why.

Doctor_Varney
10-29-2008, 05:13 PM
Actually, what you've just said makes a lot of sense. Thanks, Matt.

So, in your opinions, are we looking at something here which could be resolution independant?

I ask, with the fact in mind, the only absolute positioning, in our 'Dead Centre' method, is marked up as a percentage.

Hmmm.... Maybe not. :Shuffles back to Notepad++:

I'll try using some percentage width/heights and see what happens.

effpeetee
10-29-2008, 05:24 PM
This is an interesting site (http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css).

And here also (http://nopeople.com/CSS/background_image_resize/)

one more for luck (http://green-beast.com/blog/?p=199).

This quote excerpt is also interesting -


In Summary
As you can see, all of these layout methods have their pro and cons (can you think of others?). As far as which one is better I don’t know. It is just a site’s presentational layer as I noted previously, so with a little care and consideration, I think all of these methods are solid and usable when creating accessible, usable sites. That said, I do suggest not falling into the web purist trap of doing things because they’re more “pure,” sometimes at the expense of usability or accessibility. I’m not trying to criticize those self-proclaimed purists, they make us think and are a source of insight, but if you follow that route, do so cautiously. Have a purpose and a plan. “Just because” is not a reason — or so I tell my kids.


Frank

Doctor_Varney
10-29-2008, 07:08 PM
That is some food for thought, Frank. Excellent! Many thanks. Something to read on the train, whilst travelling to York tomorrow.

Hopefully I'll be in a better frame of mind when I get back, too!

TTFN

effpeetee
10-31-2008, 04:13 PM
Have a look here (http://www.sitepoint.com/article/the-problem-with-css-is/) Doctor.

This (http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big-thing/) is something again!!

More food for thought?

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum