Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member
    Join Date
    Nov 2009
    Posts
    9
    Member #
    20492
    Hi guys

    I'm desperate! I've been searching and trying to figure this out all week - it's doing my head in!

    I'm trying to basically put a border around my site. So it sort of looks like a black piece on a grey bg. I'm doing this with corner images and side tiling backgrounds.

    I can't work out how to make the vertical DIVs stretch..

    I'm using absolute positioning.. I tried relative but that still didn't let me achieve the right hand side tile

    Also this is my first layout using DIVs so if I am doing it all wrong, please let me know!

    You can see what i've done at: http://skipjackproductions.com/site/

    I would GREATLY appreciate any help! Thanks guys!!

  2.  

  3. #2
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    Ahhh this sounds familiar, if I underrtand correctly?

    Put your your left cenrte and right divs in a wrapping div...

    Then put your backgound image in the wrapping div with y-tiling of bg-image...

    You may need a top and bottom div too...

    This issue is referred to as faux Columns...

    -Hagen
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk

  4. #3
    Junior Member
    Join Date
    Nov 2009
    Posts
    9
    Member #
    20492
    hi
    thanks for your reply!

    however i'm not sure that this will work in my case because i also want to tile horizontally..?

  5. #4
    Junior Member
    Join Date
    Dec 2009
    Posts
    1
    Member #
    20524
    If all else fails you can us javascript to stretch your divs..
    HTML Code:
    <script> 
    var colleft = document.getElementById('col_left').offsetHeight;
    var colright = document.getElementById('col_right').offsetHeight;
    if(colleft > colright){
    document.getElementById('col_right').style.height = colleft + 'px';
    }
    </script>
    Tony is the lead developer at CharlottePlus web design in Charlotte, NC. Rate me on the web designer directory.

  6. #5
    Senior Member Hitch - CP's Avatar
    Join Date
    Jun 2009
    Location
    London
    Posts
    120
    Member #
    19164
    All looks fixed, is everything as it should be? Nothing seems out of place but I haven't looked at the coding yet ...will do if you still have a problem though.

    Ok just had a look at the code anyway and you have A LOT of Divs, not sure these are all necessary, have you done a lot of work with tables before rather than Divs?
    Ali Hitch

    Portfolio & Tutorial Site
    www.alihitch.com

  7. #6
    Junior Member
    Join Date
    Nov 2009
    Posts
    9
    Member #
    20492
    hi hitch..

    exactly! this is the first time i am using divs for layout.. i'm a little lost as to the conventions of how to achieve similar things..

    if you scroll down the page you will see that it's only bordering the current screenful

    i want it to do the whole page..

    and work in ie6+, firefox, safari

  8. #7
    Junior Member
    Join Date
    Nov 2009
    Posts
    9
    Member #
    20492
    thanks tony..

    i did try using offset height but it still didn't work for me!

  9. #8
    Senior Member Hitch - CP's Avatar
    Join Date
    Jun 2009
    Location
    London
    Posts
    120
    Member #
    19164
    So you don't want there to be a grey border at the bottom, only on the sides and up the top? If I am understanding the problem correctly ...
    Ali Hitch

    Portfolio & Tutorial Site
    www.alihitch.com

  10. #9
    Junior Member
    Join Date
    Nov 2009
    Posts
    9
    Member #
    20492
    hi, yeah.

    if you see my site the border goes at the bottom of the screen because i am using absolute..

    but of course if there is content scrolling then it goes under my border.

    i think i'm resigned to not being able to accomodate for ie6..

    also, as you say, there are lot of DIVs in my code.. any tips on making these less? i'm just so used to mapping out my pages with tables its a bit of a shift in thinking as to how to do it without so many!

  11. #10
    Junior Member
    Join Date
    Dec 2009
    Posts
    1
    Member #
    20547
    I tried doing what you're trying to do, and my way works.

    Create one dive for each corner and one div for each side, for eight total divs. Position each absolute and set the width and height to 100% of the page. Set the background images for the corners and sides, then create a wrapper div that will contain all of the page's actual content. Set the wrapper to just under 100% max-height and set overflow to scroll.

    This way uses fewer divs I think and it will keep everything from flowing over top of the bottom of the border. Here's some tidbits from what I did (don't want to post it all since it might take up a lot of space, but it should help you understand what I did)...

    HTML Code:
    <div id="upperLeft" class="border"></div>
    <div id="top" class="border"></div>
    <div id="pageContent">
           <p>Stuff</p>
    </div>
    Code:
    .border
    {
        position: absolute;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
    }
    
    #upperLeft
    {
        background-image: url(upperleft.jpg);
        background-repeat: no-repeat;
        background-position: top left;
    }
    
    #top
    {
        background-image: url(horizontal.jpg);
        background-repeat: repeat-x;
        background-position: top;
    }
    
    #pageContent
    {
        position: absolute;
        margin-top: 15px;
        margin-left: 15px;
        margin-right: 15px;
        
        max-height: 90%;
        overflow: scroll;
    }


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

page border with images

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:37 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com