Scroll-box with background + top and bottom images outside scroll-box Options

[Lugie]

Hello,

Im pretty much a beginner in webpage building and need some help with one thing.

What I´m trying to do is to creat a scrollbox with a background on it and then some text and links on top of the background. I also want some top and bottom images around the scrollbox that will stay in the same place (not scrollable). There is a webpages that have a model that looks like the one I am trying to ctreate, the only difference to the model is that it doesn´t have a scrollbox as I want. You can find the model here: http://summervillage-wells.com/irmnet/

I have already created a scrollbox with a custom (jScrollPane) scrollbar I made in photoshop, but I just can´t get the background images to work and to be able to type on top of it. Also I can´t get the top and bottom images to stick to the scrollbox, it always leave a space between the scrollbox and the images.

Help would be much appreciated!

This post has been edited by Lugie: Jul 5 2012, 07:00 AM

[pandy]

Doesn't sound complicated. Apply a background image to the scolling DIV with CSS. That's all you need. Can you show what you have so far?

[Lugie]

Doesn't sound complicated. Apply a background image to the scolling DIV with CSS. That's all you need. Can you show what you have so far?

Well at this point it will be hard for me to show it for you but I can give you the HTML code and the CSS code to take a look at. But my biggest problem is to get the top and bottom images attached to the scrollbox so that it looks like one piece.

I attached the code files for you.

[pandy]

There are references to scripts and images we don't have access too. Can't you just upload the lot to a temp folder?

I missed that the whole thing should look as a background image is used. Maybe you need to make the background of the scrolling div fixed. Just thinking aloud. Haven't tried it that I can recall.

[Lugie]

There are references to scripts and images we don't have access too. Can't you just upload the lot to a temp folder?

I missed that the whole thing should look as a background image is used. Maybe you need to make the background of the scrolling div fixed. Just thinking aloud. Haven't tried it that I can recall.

Okay, I got a preview of the webpage uploaded here http://tinyurl.com/czo5u8x take a look and maby you find an idea on how to make it look right. I know that the background image of the scroll-bar should be written differently since it only is there as a picture now and not as a background that you can apply text to. The hole "bottom picture" doesn´t show up and that maby because the background images is placed as a long picture in the scroll-box. You can also see that the scroll-bar is positioned too much to the left. The custom made scroll-bar will not look like that later on.

This post has been edited by Lugie: Jul 10 2012, 08:50 AM

[pandy]

OK. I guess I misunderstood that it should look like a single image. You can't type on top of the striped background because it isn't a background. It's an inline image. Just use the image as a background for that TD.

Also, spaces aren't allowed in URLs. You need to encode them with %20, for example:

CODE

bilder/bakgrund/Stuglista%20lista.png

In the long run it's easier and neater to avoid spaces in file names. Use underscore or whatever if you want to separate words.

[Lugie]

OK. I guess I misunderstood that it should look like a single image. You can't type on top of the striped background because it isn't a background. It's an inline image. Just use the image as a background for that TD.

Also, spaces aren't allowed in URLs. You need to encode them with %20, for example:

CODE

bilder/bakgrund/Stuglista%20lista.png

In the long run it's easier and neater to avoid spaces in file names. Use underscore or whatever if you want to separate words.

Okay thanks, but if I set the striped image as a background in the scroll-box then it wont scroll. You have to see the striped image as a list and in every rectangle box there will be a picture and some text plus a link to another page. How do I make all the elements to work at the same time (scroll, text in boxes)?

[pandy]

That won't work because you can't know how large text your visitors use. It would be better to simply stack a bunch of DIVs that each holds an image and the corresponding text. Then use alternate background colors for the DIVs. Don't need a background image really.

[Lugie]

Thank you so much. I got it fixed, but I have only one problem with it and that is that the scroll bar doesn´t go to the bottom of the scroll-box. How do I fix that? I have tried to change everything I can think of. Take a look http://tinyurl.com/czo5u8x

[pandy]

Don't know. I'm not familiar with the script or with jQuery.

I notice though that the page looks different in every browser I tried. When I change text size things move around and even dissappear, different things in different browsers.

[Lugie]

Don't know. I'm not familiar with the script or with jQuery.

I notice though that the page looks different in every browser I tried. When I change text size things move around and even dissappear, different things in different browsers.

Yes I saw that the scroll-box change place when zooming the browser window. How do I get a fixed size on it?

[Darin McGrew]

How do I get a fixed size on it?

You can't. The user has ultimate control over the font size.

See also:
http://www.w3.org/WAI/GL/css2em.htm
http://www.westciv.com/style_master/house/..._oil/not_paper/