Solved

Problem with Div, border and image in border

Posted on 2012-03-14
4
315 Views
Last Modified: 2012-05-14
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
Comment
Question by:johnson_sf
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 37721006
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
 
LVL 12

Expert Comment

by:Anuradha Goli
ID: 37724847
Can you just attach the html and css you are working so that I can try to sort out
0
 

Author Comment

by:johnson_sf
ID: 37737860
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
 

Author Comment

by:johnson_sf
ID: 37737867
Here is the image
sample.jpg
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question