Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 31
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    How can I make a letterbox design?

    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.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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.

  • #3
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    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, 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).
    Code:
     .box {
     border-radius: 1.6em;
     }
    Hope that helped some

    Best Regards,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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!

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I just cobbled this up. Is it what you are after. Obviously can be adjusted.

    Unashamed plagiarism.

    Here's the original.

    Frank
    Last edited by effpeetee; 10-28-2008 at 06:41 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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;???
    Last edited by Doctor_Varney; 10-29-2008 at 12:32 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Doctor_Varney View Post
    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*
    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.

  • #10
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Used in England. Therefore English. *cough*

    Thanks for the explanation. But that doesn't explain why text-align:center; doesn't work.
    Last edited by Doctor_Varney; 10-29-2008 at 01:14 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Used in England. Therefore English. *cough*

    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.

    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.

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by Doctor_Varney View Post
    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.

  • #13
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts

    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?
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #14
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by CyanLight View Post
    I'm a Brit too, you know. Doesn't make it any less French.
    Doesn't make it any less English either.

    Quote Originally Posted by CyanLight
    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.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #15
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by rmedek View Post
    text-align:center would do the trick.
    Except it doesn't.

    Quote Originally Posted by rmedek View Post
    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...

    Quote Originally Posted by rmedek View Post
    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.
    Last edited by Doctor_Varney; 10-29-2008 at 01:15 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •