Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2007
    Thanked 0 Times in 0 Posts

    Question How do I get this graphic to cooperate?

    Hi everyone,

    I am trying to learn CSS and XHTML and I have this problem:

    As you may have guessed this is for a message board which means the page size is always changing as users post, read etc.

    What I want to have happen is for the crosspole to lengthen or shorten to the point shown by the red line. My current CSS for the cross logo is:

    /*cross background*/
    #crosspole {background: #ccc url(http://img.runboard.com/img/layouts/...mplebanner.jpg) right top repeat-y; width:50px; height:1000px; z-index:950; position:absolute; top: 0; left: 125px;}

    #crossbar {background: #ccc url(http://img.runboard.com/img/layouts/smackdown5_14/
    samplebanner.jpg) right top no-repeat; height: 50px; width: 300px; z-index:950; position: absolute; top: 115px; left: 0; }

    /*cross mask*/
    .crossm {width:100%;height:100%; backgroundarkBlue;filter:alpha(opacity=95); -moz-opacity:.95;opacity:.95; z-index: 900;}

    My current HTML to implement the logo is:

    <div id="crosspole">
    <div class="crossm"></div></div>
    <div id="crossbar"><div class="crossm"></div></div>
    <div id="logo">New Cross Banner</div>

    The url for the site itself is:


    Can anyone here help me?


  2. #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,874 Times in 1,858 Posts
    Hello pelinor,
    I don't even know where to start... 84 errors.

    This might help your cross though:
    /*cross background*/
    #crosspole {
    background: #ccc url(http://img.runboard.com/img/layouts/smackdown5_14/samplebanner.jpg) right top repeat-y; 
    height:90%; /*play with that setting a bit and see if it will work for you*/
    z-index:950; position:absolute; top: 0; left: 125px;}
    If that doesn't work then you will need to put the cross in a container div along with the content, so the content can push the cross and container as one.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


Posting Permissions

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