Jump to content

Div won't display 'on top' of other div

denno020

By denno020
in CSS Help

 Share

Recommended Posts

denno020 Regular Member

denno020

Posted
Posted

It's late at the moment, so I could be missing something really simple, but I can't, for the life of me, get my sub nav div to be layered on top of my content div. I want it to be over so that when I click on a link, I can change the border of the sub navigation link to white, to make it appear that it's a tab that's opened to that page.

 

I've created a test html file which still has the same problem, but I can atleast share it here and people can run it themselves to see what I'm talking about. I've tried playing with z-index's, but it's possible that I'm using them completely wrong, as I've never really studied them too much.

 

Anyway, the following is the code, and the way I was testing was to see if the red right hand border of the sub navigation links would display above the grey border of the main content.

 

You can copy the code below, or play with it on jsfiddle: http://jsfiddle.net/denno020/WJxD7/

<!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">
.wrapper{
position: relative;
width: 1022px;
margin: 0px auto;
}
#main_content #content{
line-height: 25px;
z-index: -2;
}
.height{
height: 295px;
}
.grid_back{
background-color: white;
border: 1px solid grey;
}
.grid1{
width: 128px;
margin: 3px;
padding: 5px;
float: left;
overflow-y: auto;
}
.grid6{
width: 858px;
margin: 3px;
padding: 5px;
float: left;
overflow-y: auto;
}
#sub_nav{
overflow:visible;
}
#sub_nav ul li{
margin-right: -12px;
padding-right: 10px;
border: 1px solid red;
text-align: right;
background-color: white;
height: 35px;
line-height: 35px;
list-style: none;
z-index: 1;
}
#sub_nav ul li.current{
border-right: 1px solid white;
}
</style>

</head>
<body>

<section id="main_content" class="wrapper">
<div id="sub_nav" class="grid1">
<ul>
	<li><a href="#">Facilities</a></li>
	<li><a href="#">Volunteers</a></li>
	<li><a href="#">Sponsors</a></li>
	<li><a href="#">Events</a></li>
</ul>
</div>
<div id="content" class="grid6 grid_back"><h1>Club</h1>
<p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p></div>
<div class="clear_float"></div>
</section>

</body>
</html>

 

Hopefully my problem makes sense.

 

Any help, as always, is greatly appreciated.

 

Thanks

Denno

Link to comment
https://forums.phpfreaks.com/topic/267598-div-wont-display-on-top-of-other-div/
Share on other sites
White_Lily Regular Member

White_Lily

Posted
Posted

Okay, so i felt i should try and fix this anyway. I think i have found the problem and your right it is simple, but its more knowledge based.

 

I assume you dont know about positions div's and z-index's.

 

In order for z-indexing to work properly, you need to make all div's with a z-index have a position.

 

e.g:

 

.content

{

position:relative;

width:950px;

height:50px;

z-index:-1;

}

 

.nav

{

position:relative;

width:50px;

height:50px;

z-index:1;

}

 

with some extra styling such as margin/padding, once you get the classes so that they overlap, z-indexing and positioning works like so:

 

poistion:relative; "puts the position of the styled class/id in relative to its parent div."

z-index:1/-1; "a positive number (1) means that the div will always be on top of the negative number (-1)."

 

<!DOCTYPE html>
<html>
   <head>
      <title></title>

      <style type="text/css">
         .wrapper
         {
            position: relative;
            width: 1022px;
            margin: 0px auto;
         }
         
         #main_content #content
         {
            position:relative;
            line-height: 25px;
            z-index: -2;
         }
         
         .height
         {
            height: 295px;
         }
         
         .grid_back
         {
            background-color: white;
            border: 1px solid grey;
         }
         
         .grid1
         {
            width: 128px;
            margin: 3px;
            padding: 5px;
            float: left;
            overflow-y: auto;
         }
         
         .grid6
         {
            width: 858px;
            margin: 3px;
            padding: 5px;
            float: left;
            overflow-y: auto;
         }
         
         #sub_nav
         {
            overflow:visible;
         }
         
         #sub_nav ul li
         {
            position:relative;
            margin-right: -12px;
            padding-right: 10px;
            border: 1px solid red;
            text-align: right;
            background-color: white;
            height: 35px;
            line-height: 35px;
            list-style: none;
            z-index: 1;
         }
         
         #sub_nav ul li.current
         {
            border-right: 1px solid white;
         }
      </style>

      </head>
   <body>

   <section id="main_content" class="wrapper">
   <div id="sub_nav" class="grid1">
      <ul>
         <li><a href="#">Facilities</a></li>
         <li><a href="#">Volunteers</a></li>
         <li><a href="#">Sponsors</a></li>
         <li><a href="#">Events</a></li>
      </ul>
   <>
   <div id="content" class="grid6 grid_back"><h1>Club</h1>
   <p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><>
   <div class="clear_float"><>
   </section>

   </body>
</html>

 

the above code is your fixed code, assuming i read correctly this layout is what you wanted.

 

 

i also took the time to clean it to. the indents should now make your code a bit easier to read.

denno020 Regular Member

denno020

Posted
  • Author
Posted

You're a champion mate, that is exactly what I needed :).

I've used z-index's successfully before, however that was when I was using positioning extensively for the layout, so I didn't realize that it was related to the z-index working.

 

Thanks heaps :).

 

Denno

denno020 Regular Member

denno020

Posted
  • Author
Posted

Thanks White_Lily, appreciate the extra info :).

 

I'm pretty familiar with using the different positioning options, I just wasn't aware that it was directly related to z-index.

 

As for the constant posting, that's fine.. If you refreshed the page however, you would see that I marked it as solve about 30 minutes ago :)

 

Thanks again

 

Denno

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.