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.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    10
    Thanks
    0
    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:

    http://com5.runboard.com/bnewcross

    Can anyone here help me?

    Pelinor

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello pelinor,
    I don't even know where to start... 84 errors.

    This might help your cross though:
    Code:
    /*cross background*/
    #crosspole {
    background: #ccc url(http://img.runboard.com/img/layouts/smackdown5_14/samplebanner.jpg) right top repeat-y; 
    width:50px; 
    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 the right 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
    •