On our site redesign, I have a pretty complex background over which I
will be laying a semi-transparent content-div BG.
(see http://www.voyagercomponents.com/download/example.jpg for a crude
example.)
To improve scalability and decrease load times, I want to use small
images and just REPEAT where necessary. In the example image, I also
separately displayed the components used, for further understanding.
My initial thought was to have a <div> with 3 <spans> for each the
left and right sides:
<div class="content">
<div class="bgStyleHelper">
<span id="topLeft">
<span id="midLeft"></span></span>
<span id="btmLeft"></span>
<span id="topRight">
<span id="midRight"></span></span>
<span id="btmRight"></span>
</div>
<p> some content here </p>
</div>
Then just set the BG's, sizes, etc. to make those line up on the left
& right sides of the content div:
topLft topRt
r r
e some content e
p content content p
e content content e
a content content a
t content content t
- goes here -
y y
btmLft btmRt
span#topLeft{
width: 24px;
height: 24px;
margin: -24px 0px;
padding: 0;
display: block;
background-image: url(images/bgBody_tpLt_24x24.png);
background-position: top left;
background-repeat: no-repeat;
}
span#midLeft{
width: 100px;
height: 100px;
margin: -25px 25px;
padding: 0px 0px;
display: block;
background-image: url(images/bgBody24x24.png);
background-position: center left;
background-repeat: repeat-y;
}
span#btmLeft{
width: 24px;
height: 24px;
margin: 50px 0px;
padding: 0px 0px;
display: block;
background-image: url(images/bgBody_btmLt_24x24.png);
background-position: bottom left;
background-repeat: no-repeat;
}
... etc ...
But, I'm not making much progress.
DOES ANYONE HAVE A BETTER WAY OF DOING THIS?
I'm eager to learn, so lay it on me!
Thanks-a-bunch,
Mo
NOTE: I am pretty-much a novice, so feel free to over-explain.
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [EMAIL PROTECTED]
-~----------~----~----~----~------~----~------~--~---
