How do I get this graphic to cooperate?

[pelinor]

Hi everyone,

I am trying to learn CSS and XHTML and I have this problem:
http://i81.photobucket.com/albums/j212/pelinor/newcross1.jpg
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/smackdown5_14/samplebanner.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

[Excavator]

Hello pelinor,
I don't even know where to start... 84 errors. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcom5.runboard.com%2Fbnewcross)

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;
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.