asked on

Problem with Div, border and image in border

Good Morning, I'm having a problem with my css.

I am setting up a page, that has a border. I have 3 sections of the page. In each section, I need to display an image in the bordered area. Right now the image seems positioned correctly, but appears to be behind the border.

Can someone point me in the right direction. I'm attaching an image of what I am trying to duplicate.

-----------------------------------------Current CSS

div.bigdata {
width:675px;
border-left-style:solid;
border-left-color:#c2b38f;
border-width:40px;
font:13px arial,sans-serif;
position:relative;
z-index: 150;

}
div.side{
width:675px;
background-image:url('bigData_sidelabel_collaboration.jpg');
background-repeat:no-repeat;
margin-left: -40px;
position:absolute;
z-index: 100;
}

div.bigcontent {
width:671px;
border-left-style:solid;
border-left-color:#00713b;
border-width:4px;
font:13px arial,sans-serif;

background:#ccccff;

}

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Anuradha Goli

Can you just attach the html and css you are working so that I can try to sort out

johnson_sf

ASKER

Sorry for the delay. I thought I'd attached an Image but I don't see it now. I'll try again

---------------------------------------------------------------------------------
<style type="text/css">
div.bigdata {
width:675px;
border-left-style:solid;
border-left-color:#c2b38f;
border-width:40px;
font:13px arial,sans-serif;
position:relative;
z-index: 100;
}
div.container{

margin-right:10px;

}
div.side{
width:675px;
background-image:url('collaboration.jpg');
background-repeat:no-repeat;
margin-left: -40px;
position:absolute;
z-index: 150;
}
div.heading{
background:#999999;
}

div.bigcontent {
width:671px;
border-left-style:solid;
border-left-color:#00713b;
border-width:4px;
font:13px arial,sans-serif;

background:#ccccff;

}

div.text{
margin-left:10px;
margin-right:10px;
}
div.spacer{
width:650px;
background:#ffffcc;
margin-left:12px;
margin-top:12px;
}

div.more{
position:relative;
left:550px;
}

div.bigimage {
width:671px;
margin-left: -4px;

}</style>
<div class="bigdata">

<div class="container">
            <div class="side">  </div>
            <div class="heading"><img src="off_0.jpg" ">
                  <div class="spacer">
                        Blah blah blah
                        <div class="more"><img src="more_0.jpg"></div>
                  </div>
            </div>
            <div class="bigcontent">
                  <div class="bigimage">
                        <p><img src="data_on.jpg"></p>
                  </div>
                  <div class="text">
                        <p><img src="data.jpg"></p>
                        blah blah
                  </div>
                  <br>
                  <img alt="" src="infographic.jpg"><br>
                  <br>
                  <br>
                  <div class="more"><img src="close_0.jpg"></div>
                  <br>
                   </div>
</div>
      
</div>

-------------------------------------

johnson_sf

ASKER

Here is the image
sample.jpg