Hi.
I have a specific need to design a section of a page that has this
background needs:
The top portion of the background should contain a fixed image (like top
border);
The middle portion has a vertically repeated background (so to handle longer
text)
The bottom portion contains another piece of non-repeat image.
The forground is a chunk of text that goes on top of this background design
and the middle background is supposed to repeat if the text stretches. So
the overall effect is like a strechable picture frame.
Is this doable? Any suggestions? Many thanks in advance.
Shawn
Full Version: A visual design question
Previously in alt.www.webmaster, shawn <[Email Removed]> said:
| QUOTE |
| The top portion of the background should contain a fixed image (like top border); The middle portion has a vertically repeated background (so to handle longer text) The bottom portion contains another piece of non-repeat image. |
Untested, OTTOMH:
3 divs - top,middle,bottom, one after the other in the HTML.
div#top {background-image: url(top.png); width: (width of image);
height: (height of image);}
div#middle {background-image: url(middle.png); background-repeat:
repeat-y; width: (width of image);}
div#bottom {background-image: url(bottom.png); width: (width of image);
height: (height of image);}
There will be more to it but that's the basic idea.
--
Mark Parnell
http://www.clarkecomputers.com.au
I know this basic idea. The problem is how to build a foreground layer on
top of it so that it stretchs the background.
Thanks.
"Mark Parnell" <[Email Removed]> wrote in message
news:[Email Removed]...
top of it so that it stretchs the background.
Thanks.
"Mark Parnell" <[Email Removed]> wrote in message
news:[Email Removed]...
| QUOTE |
| Previously in alt.www.webmaster, shawn <[Email Removed]> said: The top portion of the background should contain a fixed image (like top border); The middle portion has a vertically repeated background (so to handle longer text) The bottom portion contains another piece of non-repeat image. Untested, OTTOMH: 3 divs - top,middle,bottom, one after the other in the HTML. div#top {background-image: url(top.png); width: (width of image); height: (height of image);} div#middle {background-image: url(middle.png); background-repeat: repeat-y; width: (width of image);} div#bottom {background-image: url(bottom.png); width: (width of image); height: (height of image);} There will be more to it but that's the basic idea. -- Mark Parnell http://www.clarkecomputers.com.au |
Previously in alt.www.webmaster, shawn <[Email Removed]> said:
| QUOTE |
| I know this basic idea. The problem is how to build a foreground layer on top of it so that it stretchs the background. |
Um, not sure if I understand what the problem is - you just put the text
in the middle div:
<div id="middle">
<p>Your text goes here over the top of the background image...</p>
</div>
The div will stretch as high as necessary to hold all of the content,
and with the CSS from my previous post, the background will repeat
vertically as needed.
Otherwise if I'm misunderstanding what you are trying to do, a URL would
be useful.
BTW: Please don't post upside down.
http://www.allmyfaqs.com/faq.pl?How_to_post
http://en.wikipedia.org/wiki/Top-posting
This will help:
http://home.in.tum.de/~jain/software/oe-quotefix/
--
Mark Parnell
http://www.clarkecomputers.com.au
"Mark Parnell" <[Email Removed]> wrote in message
news:[Email Removed]...
news:[Email Removed]...
| QUOTE |
| Previously in alt.www.webmaster, shawn <[Email Removed]> said: I know this basic idea. The problem is how to build a foreground layer on top of it so that it stretchs the background. Um, not sure if I understand what the problem is - you just put the text in the middle div: <div id="middle" <p>Your text goes here over the top of the background image...</p </div |
Thanks for taking time to reply!
I want to be able to over lap text starting at the first layer, not the
middle layer. Here is the current page:
http://www.ysiusa.com/Who-we-are.html
This is NOT what I wanted. I am trying to fix it. Currently, you can see
that the text starts on a top left orange background area and ends at the
bottom right orange shade. But this is not stretchable. I want to create
something that the text starts at the top left corner where the orange shade
is (like it is now), the page will grow and I don't want to use the
scrolling <div> but rather, to show all the text so that reader can scroll
using browser's normal scrolling bar.
when text ends, I want to show the bottom part properly ended with the
bottom image (the purple horizontal border and the bottom-right orange
shade) with text on it, not just ending at where the image starts.
Everything in between should have just the verticle purple line added to the
right edge.
Shawn
| QUOTE |
The div will stretch as high as necessary to hold all of the content, and with the CSS from my previous post, the background will repeat vertically as needed. Otherwise if I'm misunderstanding what you are trying to do, a URL would be useful. BTW: Please don't post upside down. http://www.allmyfaqs.com/faq.pl?How_to_post http://en.wikipedia.org/wiki/Top-posting Finally I understand what "Top-posting" means! thanks for the pointers. :-) |
| QUOTE |
| This will help: http://home.in.tum.de/~jain/software/oe-quotefix/ -- Mark Parnell http://www.clarkecomputers.com.au |
Previously in alt.www.webmaster, shawn <[Email Removed]> said:
| QUOTE |
| http://www.ysiusa.com/Who-we-are.html This is NOT what I wanted. I am trying to fix it. Currently, you can see that the text starts on a top left orange background area and ends at the bottom right orange shade. But this is not stretchable. I want to create something that the text starts at the top left corner where the orange shade is (like it is now), the page will grow and I don't want to use the scrolling <div> but rather, to show all the text so that reader can scroll using browser's normal scrolling bar. |
Ah. That's much more difficult. I can think of a couple of ways it *may*
be possible. I'll have a play with it.
| QUOTE |
| Finally I understand what "Top-posting" means! thanks for the pointers. :-) |
Previously in alt.www.webmaster, Mark Parnell
<[Email Removed]> said:
<[Email Removed]> said:
| QUOTE |
| I'll have a play with it. |
Here we go:
http://clarkecomputers.com.au/usenet/frame.html
Fairly simplified version, but it does what you want.
--
Mark Parnell
http://www.clarkecomputers.com.au
Previously in alt.www.webmaster, Mark Parnell
<[Email Removed]> said:
<[Email Removed]> said:
| QUOTE |
| http://clarkecomputers.com.au/usenet/frame.html |
Forgot to mention, tested and works in Firefox 1.0.4, Opera 8 and IE 6.
--
Mark Parnell
http://www.clarkecomputers.com.au
"Mark Parnell" <[Email Removed]> wrote in message
news:pcno0486szxg$[Email Removed]...
news:pcno0486szxg$[Email Removed]...
| QUOTE |
| Previously in alt.www.webmaster, Mark Parnell <[Email Removed]> said: I'll have a play with it. Here we go: http://clarkecomputers.com.au/usenet/frame.html Fairly simplified version, but it does what you want. Wow! This is absolutely beautiful. Thanks for the help! this is really |
great!
Thank you Thank you Thank you.
Shawn
| QUOTE |
-- Mark Parnell http://www.clarkecomputers.com.au |
Previously in alt.www.webmaster, shawn <[Email Removed]> said:
| QUOTE |
| Wow! This is absolutely beautiful. Thanks for the help! this is really great! Thank you Thank you Thank you. |
| QUOTE |
| You're very welcome. Glad I could help. :-) Here is what I got: http://www.ysiusa.com/Who-we-are2.html |
Shawn
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.