Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 319
  • Last Modified:

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;

}
0
johnson_sf
Asked:
johnson_sf
  • 2
1 Solution
 
COBOLdinosaurCommented:
bigdata has a z-index of 150 ... that includes the border.  The element with the image has a z-index of 100 the higher z-Index will always be on top of the lower z-index.


Cd&
0
 
Anuradha GoliSystems Development / Support SpecialistCommented:
Can you just attach the html and css you are working so that I can try to sort out
0
 
johnson_sfAuthor Commented:
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">
<!--Start of sectionzero  -->
  <div class="container">
            <div class="side">&nbsp;&nbsp;</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>
                  &nbsp;</div>
  </div>
      <!--End of section zero  -->
</div>

-------------------------------------
0
 
johnson_sfAuthor Commented:
Here is the image
sample.jpg
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now