I have an image that will be centered (left and right) in the window, there is no left border,but there is a right border. I was wondering if it is possible for the top border to go from the very left of the page (past the image) and stop at the right border and for the bottom border to start at the left end of the image and stretch across all the way to the right of the window. The top and bottom borders are made of two different repeating backgrounds and the left border can be too, if needed.
I've been thinking about this for a while but couldn't come up with any solutions...can someone help me?
-
You might want to clarify how flexible you're willing to be. You can approach this multiple ways. Do you want the top and bottom borders to extend to the edge of the viewport (thus needing them to be fluid-width)?
You can handle this using background images with
background-position
and a sliding door technique, or you can use extraneous markup to create a three-column fluid width layout with your image in the center.It is up to you but with the three-column technique, you could insert your extra
divs
(or whatever you would like to use) via JavaScript so you wouldn't have empty containers in your source, and useborder-top
andborder-bottom
instead of background images (thus shedding some load-time off of the page).Edit: And to clarify, you want it to look something like this Ascii drawing:
_______________ |img|_____________________
Edit: For the fluid width layout, consult one of many numerous sources on CSS Layouts, here's a good rundown: http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/
Then on your left and right columns, you would do
border-top
andborder-bottom
respectively (or use background-images if you want fancier borders), give your image borders and have the height of your three containers set so the borders line up together. Hope that helps.eerabbit : Basically, yes. The borders would also be over and under the image itself. What is the three column technique?eerabbit : I think I get it; thanks a bunch!
0 comments:
Post a Comment