SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Full page border, ideas?

    For some reason I need to do a full page border on a variable width site. The content should never stretch down further than the viewport.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Bob,

    You may need to explain the dynamics a bit more. Does the border go around the viewport or just around the content? What happens if the content is higher than the viewport, what is going to happen then? e.g. scrollbars!

    I have an old demo here (excuse code) with a full page border.

    http://www.pmob.co.uk/temp/borders-all-around.htm

    I'm not sure that's what you were looking for though

  3. #3
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, at first glance that looks perfect and even stretches if the content is longer than the viewport, which is a consideration I don't actually need to take because it's basically a fixed height image centrally positioned, with a full page border around it stretching at most to the size of the viewport. It's a very simplistic holding page which doesn't actually hold any text so browser level font resizing doesn't need to be taken into consideration either.

    I haven't even checked your methodology yet but it seems to work well.

  4. #4
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is actually perfect, thanks again Paul. I see how you've used 100% height and built it up methodically, adding hooks in where needed. That's sort of how I envisiaged it working but that's a really smart implementation.

    Any idea why IE was misplacing the bottom right span?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well here's the simplified version using just borders and not images.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0}
    html,body{    height:100&#37;;}
    #outer{
        border:25px solid #000;
        margin-top:-50px;
        min-height:100%;
    }
    * html #outer{height:100%}
    .top{border-top:50px solid #000}
    </style>
    </head>
    <body>
    <div id="outer">
        <div class="top"></div>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p style="">test last</p>
    </div>
    </body>
    </html>

    Hope that helps

  6. #6
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    Just been told the idea has been scrapped so I don't even need to do this.

    Some other guy has said thats a bad way of doing it and he would just stack 8 divs and use a background image on each one.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    IE always misplaces bottom and right in absolute positioning when the number of pixels is odd as it rounds it up incorrectly.

    http://www.pmob.co.uk/temp/onepxgap.htm

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Some other guy has said thats a bad way of doing it and he would just stack 8 divs and use a background image on each one
    Sounds like he doesn't know what he's talking about

  9. #9
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give me a good riposte to show him up The idea sounds so ridiculous to me I couldn't even explain why it's a bad approach. Firstly you'd have to hack about with z-indexes and it's also a semantic nightmare but other than that

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Can you give me a good riposte to show him up
    lol - I wish I was that witty I tend never to argue much these days as it never gets me anywhere and just let them get on with it if they can't see the error of their ways.

    If your border is a graphical border then in the end it does boils down to finding hooks to hang the images on and in a square that will usually mean that you need 8 elements to do this unless you can double up somewhere or use existing elements.

    If you don't want the 100&#37; high expanding effect you can probably use html and body for some images to save some wasted html.

    I'd need to see an image of what you want to think of a better way of doing this. Perhaps one big background image centred on the body element would give you the effect you want without using any elements.

  11. #11
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to be fair, that approach does sort of work

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>

    <style>

    html, body{height:100&#37;;}

    body { margin: 0; padding:0; background: url(http://www.pmob.co.uk/temp/images/rbg-100.jpg) repeat-y right top; }

    div { height:100%; }

    div.content p { position:absolute; top:50%; left:50%; }
    div.content { text-align :center; position:relative; }

    </style>


    </head>

    <body>

    <div style="background:transparent url(http://www.pmob.co.uk/temp/images/lbg-100.jpg) repeat-y -5px 0;">
    <div style="background: url(http://www.pmob.co.uk/temp/images/tbg-100.jpg) repeat-x left top;">
    <div style="background: url(http://www.pmob.co.uk/temp/images/bbg-100.jpg) repeat-x left bottom;">
    <div style="background:url(http://www.pmob.co.uk/temp/images/ltc-100.jpg) no-repeat -3px -5px;">
    <div style="background:url(http://www.pmob.co.uk/temp/images/rtc-100.jpg) no-repeat top right;">
    <div style="background:url(http://www.pmob.co.uk/temp/images/blc-100.jpg) no-repeat bottom left;">
    <div style="background:url(http://www.pmob.co.uk/temp/images/brc-100.jpg) no-repeat bottom right; text-align :center; position:relative;">
    <div class="content"><p>testing</p></div>
    </div></div></div></div>
    </div></div></div>

    </body>
    </html>
    Doesn't look very nice though.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes as I said in the basic form you just need 8 elements and that's what you've got

    You could use html and body to reduce that by a couple of elements and perhaps use the content wrapper but in the end it is really just a matter of finding hooks to hang your images on.

    Of course the above method doesn't allow for the content ever to expand out of the viewport but as you say you don't need it to then its not an issue anyway.

    If this is just a basic holding page then I wouldn't lose much sleep over it and just use what's easiest for you to maintain.


Bookmarks

Posting Permissions

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