[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Problem with Div, border and image in border

Posted on 2012-03-14
4
Medium Priority
?
318 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 1500 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

650 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