Working in HTML Editor 2007 trial edition.


Current issue ; -)

I would like the sidebardrop graphic to somehow *grow* with the page as I work on it and add content so that there is always a solid turquoise bar going down the side to the bottom of the text. I would also like to loose the white line between the sidebar and the sidebardrop. I have seen this in other places and wonder if it might have to do with using percentages, which doesn't seem possible with the exact position method used here. One of the things I always liked about my table based pages was being able to set them to 100% and have them fit most anywhere... not sure how this set up will work... I am guessing scroll bars will appear, which i hate...

So, any ideas on the expanding/shrinking bar concept?

www.koreanspine.org

Thanks,
Sara

Sara,

The side-bar you are using is graduated from white at the top to turquoise at the bottom.

If you had a solid color, it would be easy to create a turquoise graphic that is 144px wide, and 10px height, and use a CSS statement like this:

background: #ffffff url("turquoise.gif") repeat-y;

The first statement is #ffffff to set a white background, the second is to get the graphic, and the third repeats the graphic vertically. That would give a turquoise bar as far down as the page goes.

You might try using border:0; to remove any borders to see if that clears the white line.

Let us know how it works.

Hi,

The side bar is actually 2 graphics, because ( as you pointed out) the bar with the directional transparency (sidebar.jpg)on it isn't suitable for use as *filler* at the bottom. The second graphic (sidebardrop.jpg) is a solid rectangle, the same width as sidebar. That is the one that I would like to do the *repeat* trick with.

I am not so very familiar with the css wording yet. If I make that graphic (sidebardrop.jpg) 144 x 10 and paste in that snippet you showed me how would it work with the top sidebar? the one with the transparency?

I get how getting the graphic grabbed and then repeated would do it, but am not sure how to stack it under the sidebar.jpg.

Here are the lines for these 2 images;

<img style="Z-INDEX: 100; LEFT: 0px; POSITION: absolute; TOP: 798px" height="100%" alt="" src="images/sidebardrop.jpg" width="144" border="0">

<img style="Z-INDEX: 100; LEFT: 0px; POSITION: absolute; TOP: 158px" height="731" alt="" src="images/sidebar.jpg" width="144" border="0">

The borders are already set to 0. Is there some other place that would be affecting them?

sara

Sara,

Look at your graduated graphic that starts at white and goes to turquoise. At the bottom and sides there is a pixel or two that are lighter, causing the line that you see. I played with the sidebar and came up with something that may suit you.

Check this sidebar

You may take the three files and use them if you want.
sidebar.html
sidebar.jpg
turquoise.jpg

ok. took me a while but i have progressed at least a little bit! if you take a look you will see the ugly part.

http://www.koreanspine.org/testsidebar.html

I am not sure if this will work, putting css in with the rest of the stuff. is it likely to cause problems?

I really appreciate all the help ; -)

sara

Sara,

Lines 7 & 8 are not allowed to be in the head area. If you are not using them, you can delete them or move them down to the body area and comment them out.

Line 22 you have :
#sidebar {float: left; width: 144px; border: 0;}

That is setting your side bar to 144px wide, but the sidebar graphics are 90px. That may explain the sidebar color that sticks out just below the words Panel Discussion.

It looks like you need the sidebar to be over to the right a little. Try adding padding-left: 50px; to your sidebar styling and then adjust as needed.