By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,550 Members | 873 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,550 IT Pros & Developers. It's quick & easy.

Dilemma with background images (putting borders on DIVs)

P: n/a
Well, how can I describe this succinctly? I have a page with DIVs that us
background images to produce a border effect. It works perfectly well, but
I want to make up (for now) 3 different border/background effects. Rather
than duplicate the entire chunk of CSS 3 times, I thought "Gee, I should
only have to specify the 3 backgrounds (all the other placement directives
would be identical). However I must not be correctly specifying the
parent/child relationship as anything I try makes a mess of my page (most
notably, the bottom curved edges are getting displaying with the curve that
SHOULD be at the top.

See below how I specified 'DIV.leftcol', attempting to apply certain
background images to child elements within that DIV. I've gone round and
round with it and am getting nowhere. My page was derived from
http://wd.mrclay.org/custom_bordered_boxes/. I just needed to have 3
variants of the boxes described therein (with only the background images
changing).

Can anyone set me off on the right track? I think I've just got blinders on
at this point. I've tried DIV.leftcol .cb, DIV.leftcol .cb, DIV.leftcol *
..cb kinds of things and not found the right combination.

My test page follows (I have omitted all my failed attempts at putting
directives in the DIVs 'top', 'leftcol, 'rightcol' and just noted what I'd
wanted to have happen in each one):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Prototype Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen, projection"
href="/css/chrome_tests.css" />
<style type="text/css" media="screen, projection">
<!--
body {
background:#39343f;
}
..outer {
width:100%;
}
..top {
width:100%;
margin-bottom: 10px;
}

..leftcol {
margin-right:10px;
width:15%;
float: left;
}

..rightcol {
width:83%;
float:right;
}

/***** Images on boxes *****/
/* top panel */
DIV.top .cB, DIV.top .cBw { background:url(tbox_leftright.png) top right; }
DIV.top .cBt, DIV.top .cBt div, DIV.top .cBb, DIV.top .cBb div {
background:url(tbox_topbottom.png) top right; }

/* leftcol panel */
DIV.leftcol .cB, DIV.leftcol .cBw { background:url(lbox_leftright.png) top
right; }
DIV.leftcol .cBt, DIV.leftcol .cBt div, DIV.leftcol .cBb, DIV.leftcol .cBb
div { background:url(lbox_topbottom.png) top right; }

/* rightcol panel (default) */
DIV.rightcol .cB, DIV.rightcol .cBw { background:url(rbox_leftright.png) top
right; }
DIV.rightcol .cBt, DIV.rightcol .cBt div, DIV.rightcol .cBb, DIV.rightcol
..cBb div { background:url(rbox_topbottom.png) top right; }

..cB {
padding:0 15px 0 0;
position:relative; /* fix IE/win buggy bg display */
}
..cBw {
background-position:top left;
padding-left:10px;
}
..cBt, .cBb {
margin:0 -15px 0 -10px; /* push into rB and rBw padding */
height:19px; /* fix IE/win bug when rB width set */
}
..cBt div, .cBb div { width:20px; height:19px; }
..cBt div { background-position:top left; }
..cBb, .cBb div { height:19px; }
..cBb { background-position:bottom right; }
..cBb div { background-position:bottom left; }
/***** end Images on boxes *****/

p {margin:0; padding:5px;}
-->
</style>

</head>
<body>
<div id="main-outer">

<div class="top"><!-- Should show the 'tbox' graphics -->

<div class="cB">
<div class="cBw"><div class="cBt"><div></div></div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="cBb"><div></div></div></div>
</div>

</div>

</div>

<div class="leftcol"><!-- Should show the 'lbox' graphics -->

<div class="cB">
<div class="cBw"><div class="cBt"><div></div></div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="cBb"><div></div></div></div>
</div>

</div>

</div>

<div class="rightcol"><!-- Should show the 'rbox' graphics -->

<div class="cB">
<div class="cBw"><div class="cBt"><div></div></div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="cBb"><div></div></div></div>
</div>

</div>

</div>

</body>
</html>

--
Thanks in advance....
Aug 19 '06 #1
Share this question for a faster answer!
Share on Google+

This discussion thread is closed

Replies have been disabled for this discussion.