Solved

Problem with Div, border and image in border

Posted on 2012-03-14
4
313 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
  • 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: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
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.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

679 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