Image borders (i.e. borders around the page using images)

  • Oolong

    (@oolong)


    18 years, 5 months ago

    Hi,

    I’m trying to make a border, or frame, around each page of this blog-to-be, using different images for the vertical and horizontal borders (and more images for the corners). My solution mostly works… only the vertical borders stop dead at a fixed distance from the bottom of the page (I make it 486 pixels) and I have no idea what could be causing that.

    The CSS definition of the left border looks like this – it’s probably a bit more complicated than it needs to be, but don’t worry about that.

    #left {
    margin-left: 70px;
    top:105px;
    padding: 0px;
    background-image: url(images/l.border.gif);
    background-repeat: repeat-y;
    float: left;
    position: absolute;
    opacity: 1;
    height: 100%;
    width: 35px;
    left: 0px;
    float: left;
    }

    What’s confusing me is why it’s stopping part-way – it’s nothing in that bit of CSS, is it? The full stylesheet is here.

    So you know were I’m coming from – I’m pretty new to WordPress, only moderately experienced with CSS. Any help would be greatly appreciated!

    Thanks

    – f.

Viewing 5 replies - 1 through 5 (of 5 total)
  • vkaryl

    (@vkaryl)

    18 years, 5 months ago

    You may have something covering up the bottom there – irritatingly enough, I just upgraded my FF and now Aardvark doesn’t work *sigh* so I can’t see the actual “layout” the way I used to…. but that would be good for you to do if you’re using FF – go get the Aardvark extension, which allows you to see where things actually are in relation to each other….

    This might also have something to do with needing to use a faux-column technique on the left and right.

    omann0

    (@omann0)

    18 years, 5 months ago

    height: 100%; wont work. That is a common css problem that the height of div’s cannot go to the end of the page, only the content that is inside the layer.

    Yry removing the height element entirely, the the height should go to the end of the text inside. If that doesnt work, you will have to include all div’s in a container div with that bg.

    Thread Starter Oolong

    (@oolong)

    18 years, 5 months ago

    Thanks vkaryl… I realised I can use the Web Developer Toolbar to outline block-level elements, which seems to be telling me that the borders really are only as long as they look, as opposed to being covered up by something.

    I also realised the layout is horrifically broken in IE. Oh dear. It seems to be completely ignoring the margin-top property of the top border div, and the side divs (with height set to 100%) are… ooh, maybe 20px high.

    This may be a good time for me to go to bed.

    jbbrwcky

    (@jbbrwcky)

    18 years, 5 months ago

    You can force height to work but it’s a bit of a hack. I suggest you go here and read it from top to bottom (it does work): Mezzoblue.

    Thread Starter Oolong

    (@oolong)

    18 years, 5 months ago

    Thanks folks – especially omann0. I eventually had to resort to putting the main content inside a div with that background (hence it now requires a fixed width for the main content, which is somewhat unfortunate… also the border has to be around the content, rather than the page, which is annoying in general but fine in this particular case).

    It‘s now looking pretty good I think, except that for reasons I cannot fathom there’s a little white gap between the top border and the main content.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image borders (i.e. borders around the page using images)’ is closed to new replies.