|
CSS - Layers (z-index) Not Correctly Presented Across Multiple Divs
Similar TutorialsI have a javascript function that maintains a central large video (which i want on top) and the 6 next most recently played videos appear as small videos also on the page, each in its own css div. the function calls a php program that outputs a div containing a video, the code shown below. The problem is that sometimes, the smaller videos are overlapping the large ones, which shouldn't be happening according to the div's z-index the javascript code can be found athttp://www.unc.edu/~arboone/demo.php from layer.php: (getX,getY = random coordinates) extract($HTTP_GET_VARS, EXTR_OVERWRITE, ""); $horiz=getX(); $vert=getY(); if( IsSet($clip) ){ if( strcmp($size,"large") == 0 ){ print "<div style=\"position: relative; z-index: 10000; left: $horiz; top: $vert\">"; print "<embed height=\"210\" width=\"266\" CONTROLLER=\"false\" SRC=\"/mov/"; print $clip; print "\" type=\"video/quicktime\" autoplay=true loop=true controller=false cache=false scale=\"tofit\" volume=\"100%\" BGCOLOR=\"#000000\" BORDER=\"0\"></embed>"; print "</div>"; } if( strcmp($size,"small") == 0 ){ print "<div style=\"position: relative; z-index: 0; left: $horiz; top: $vert\">"; print "<embed height=\"105\" width=\"133\" CONTROLLER=\"false\" SRC=\"/mov/"; print $clip; print "\" type=\"video/quicktime\" autoplay=true loop=true controller=false cache=false scale=\"tofit\" volume=\"0%\" BGCOLOR=\"#000000\" BORDER=\"0\"></embed>"; print "</div>"; } } Hi all, After being away from the forums for some while I picked up the "webdesign-bug" again (it's raining during my summer holidays) but I'm having some troubles catching up with all new techniques/syntaxes at the moment. I did have a look at some tutorial sites and searched the forum for similar problems but somehow it's a bit overwhelming and I didn't find the solution I'm looking for yet. I do hope I didn't overlook something very basic or ask a frequently asked question (sorry then ) The goal I'm trying to make a (css-based) site with a central column with all 'normal' data. Below this central column I'd like to place some additional layers which are (partly) hidden underneath the main layer and which show themselves if you move with your mouse over the visible parts. The idea behind it is to create some 'desktop' where you have all kinds of things laying on eachother (like additional pieces of paper, some photographs, some money, ...). As an extra feature there would be another layer which makes sure there's a shadow from the 'main column' on the items below it. (Hope this is clear?) What I did so far To achieve this I thought I'd use different layers with different z-indexes and position them over and underneath eachother. So far I have the following code: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layers</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> function show( obj ) { bla = document.getElementById( obj ); bla.style.zIndex += 10; } function hide( obj ) { bla = document.getElementById( obj ); bla.style.zIndex -= 10; } </script> </head> <body> <!-- CONTAINER --> <div id="container"> <h2 class="title">Quick Links</h2> <!-- SUBCONTENT --> <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');"> Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');"> Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <!-- CONTENT --> <div class="content_shadow"> <div class="content"> <h1 class="title">Site Title</h1> <div class="content_white"> <h2 class="title">Content Title</h2> Maintext1 </div> </div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> css Code: Original - css Code * { margin: 0; padding: 0; } body { background-color: orange; } h1.title { display: none; } h2.title { display: none; } /******************************************************************** * CONTAINER ********************************************************************/ #container { border: solid 1px black; margin: 0 auto; width: 1000px; z-index: 1; /* background-color: lightgray;*/ /* filter: alpha(opacity=50);*/ } /******************************************************************** * SUB CONTENT ********************************************************************/ /* http://msdn2.microsoft.com/en-us/library/ms530301.aspx http://www.w3schools.com/htmldom/prop_style_clear.asp http://www.dynamicsitesolutions.com/css/layout-techniques/ */ #container .subcontent1 { background-color: lime; float: left; position: relative; top: 100px; width: 400px; z-index: 2; /* display: inline;*/ /* height: 200px;*/ /* left: 0px;*/ } #container .subcontent2 { background-color: lime; display: block; float: right; position: relative; top: 200px; width: 400px; z-index: 3; /* display: block;*/ /* height: 200px;*/ } /******************************************************************** * MAIN CONTENT ********************************************************************/ #container .content_shadow { background-color: gray; display: block; margin: 0 auto; opacity: .75; position: relative; top: 0px; width: 850px; z-index: 8; } #container .content { clear: none; margin: 0 auto; width: 800px; z-index: 9; } #container .content_white { background-color: white; display: block; height: 800px; margin: 0 auto; position: relative; top: 0px; width: 100%; z-index: 10; }
* {
The problem(s) Besides the (css)code probably being sloppy (and redundant at points?!?) since I experimented a lot with adding and removing of position-tags, floating-tags, etc etc.. it still fails to do what I'm aiming for. As can be seen on the attached screenshot most of it seems to be working (at least in FF2) (I had my mouse over the 2nd subcontent-layer btw) but the maintext1 won't start at the left of it's layer but instead starts on a x-coordinate where the 1st subcontent-layer finishes Can somebody point me to what I'm doing wrong? Also, if somebody has a relevant tutorial I'd appreciate it as well since I obviously need some extra exercise with this stuff (working on it already btw but you never know if there's another good one) Thanks for any help and if something isn't clear I'll try to explain it further! I have a two-layer design. The first layer is a 700px wide box that is centered on the screen and contains the content, header, and navigation. The second layer is a small 200px wide box that needs to sit as a second layer and overlapp the right side of the first box. I have the bottom layer set. Code: #mainDiv {
margin: 0 auto 0 auto;
width: 700px;
max-width: 700px;
background-color: #4A4F2F;
border: 3px solid #fff;
z-index: 1;
}
But I can't get the second layer positioned correctly for different sceen sizes. What topic should I be looking into? I know it's possible and, other than a brain right now, what am I missing? Hello, I am sure that the solution to my problem is obvious in many ways. I thought maybe a fresh set of eyes would help. I have a two column site, the columns are constructed side by side using the css float parameter. I have a wrapper around all of it to center it, and divs for every element. One of the last divs (containing an h2, but I'd rather use images)will not drop down and line up with other h2. They are both inside divs. I followed several instructions on several websites, listed below, but I cannot get this div to sit right, meaning be under my images (using lightbox 2) and act as a delimiter for the next set of images Web Site: (sample dot funky-penguin dot com) CSS help garnered he (alistapart dot com/stories/practicalcss) My xhtml and css 2.0 all validate, so I don't think that is the problem. I hope I was specific enough. Thank you in advance for all of your assistance. I am having a problem with a couple divs not rendering correctly. I'm building an online tournament bracket system, and I'd like the divs to be flush with each other, but in all browsers it's rendering incorrectly. css Code: Original - css Code <style type="text/css"> div { font-family: Arial, Verdana, "Times New Roman", sans-serif; font-style: normal; color: Black; } .gamecontainer { position: absolute; width: 120px; } .player { font-size: 12px; background-color: lightblue; width: 100%; text-indent: 0.5em; border: solid 1px; margin: 0px; padding: 0px; } .infoblock { border-right: solid 1px; font-size: 10px; width: 100%; text-indent: 0.5em; margin: 0px; padding: 0px; } </style>
html4 Code: Original - html4 Code <div id="W-R1-G1" class="gamecontainer" style="top: 10px; left: 1090px;"> <div id="W-R1-G1-P1" class="player">Player 1</div> <div id="W-R1-G1-I" class="infoblock" style="height: 20px;">W-R1-G1</div> <div id="W-R1-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G2" class="gamecontainer" style="top: 75px; left: 1090px;"> <div id="W-R1-G2-P3" class="player">Player 3</div> <div id="W-R1-G2-I" class="infoblock" style="height: 20px;">W-R1-G2</div> <div id="W-R1-G2-P4" class="player">Player 4</div> </div> <div id="W-R2-G1" class="gamecontainer" style="top: 30px; left: 1210px;"> <div id="W-R2-G1-P1" class="player">Player 1</div> <div id="W-R2-G1-I" class="infoblock" style="height: 45px;">W-R2-G1</div> <div id="W-R2-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G1" class="gamecontainer" style="top: 10px; left: 1090px;"> <div id="W-R1-G1-P1" class="player">Player 1</div> <div id="W-R1-G1-I" class="infoblock" style="height: 20px;">W-R1-G1</div> <div id="W-R1-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G2" class="gamecontainer" style="top: 75px; left: 1090px;"> <div id="W-R1-G2-P3" class="player">Player 3</div> <div id="W-R1-G2-I" class="infoblock" style="height: 20px;">W-R1-G2</div> <div id="W-R1-G2-P4" class="player">Player 4</div> </div> <div id="W-R2-G1" class="gamecontainer" style="top: 30px; left: 1210px;"> <div id="W-R2-G1-P1" class="player">Player 1</div> <div id="W-R2-G1-I" class="infoblock" style="height: 45px;">W-R2-G1</div> <div id="W-R2-G1-P2" class="player">Player 2</div> </div> I want to have one main div that is horizontally centered on the page. Inside of it I want two nested divs, located right next to each other. It seems that the top property of the second nested div is being ignored, as it is being placed directly below the first nested div. Here is a sample that demonstrates what is happening. Am I doing something wrong or is what I'm trying to do fundamentally the wrong way to do it? Code: <html>
<head>
<style type="text/css">
#a
{
width: 800px;
height: 800px;
margin: 0 auto;
text-align: center;
background-color: #ff0000;
}
#b
{
position: relative;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: #0000ff;
}
#c
{
position: relative;
top: 50px;
left: 350px;
width: 300px;
height: 300px;
background-color: #00ff00;
}
</style>
</head>
<body>
<div id=a>
<div id=b>test</div>
<div id=c>test</div>
</div>
</body>
</html>
Ok. I have coded loads of sites in CSS but have never come across this problem before, and have hit a big bloody brick wall on it! Any help would be greatly appreciated. So.... i have an outer div with a 1px border and other divs inside of this outer div, one of which i want to give a negative margin to so that it sits under the border of the outer div.... I thought i could just give the div i want to sit under the outer div a negative z-index, and this does actually work on FF, however IE6 and Safari 1.3.2 dont like it and it just appears above the border. does that make sense? here's the code so you can see what i'm waffling on about.... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#outer {
border:1px dashed green;
width:750px;
position:relative;
z-index:1000;
}
#box1, #box2, #box3 {
width:200px;
height:200px;
position:relative;
}
#box1 {
background:red;
}
#box2 {
background:cyan;
margin-left:-10px;
z-index:-1;
}
#box3 {
background:silver;
}
</style>
</head>
<body>
<div id="outer">
<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
</div>
</body>
</html>
Bear in mind also that this is a simplified version of the page, and there is other stuff below the outer div that flows down as the text size expands.... thanks in advance for any help! graham I have a Menu thats slides down when a link is clicked. In IE6, when the div slides down, it pushes everything below it, once it's hit the top of that child div. I tried setting my z-index to 9999 for the div that comes down and over the content, and setting the child z-index to 1. But for both of those, it still pushes my #SubPage down. To see what I am talking about, if you can visit: Quidel Univ. use login ID: 2097 Once you get logged in, click on "Events". Once there, hit the "Admin Menu" link on the top-right and you'll see what I'm talking about. This is my menu container code: CSS Code: Original - CSS Code #adminContainer { width: 261px; float: left; position: relative; z-index: 9999; }
#adminContainer { width: 261px; float: left; position: relative; z-index: 9999; }
And this is my #SubPage code: CSS Code: Original - CSS Code #SubPage { float: left; width: 553px; padding: 5px; z-index: 1; }
#SubPage { float: left; width: 553px; padding: 5px; z-index: 1; }
Been playing with the positioning and z-index, but can't seem to get it to my liking.... and as I typed this, I just thought to myself , I haven't even attempted to edit my iestyles.css sheet. DOH! Going to do that, but I'll leave this up in case someone knows my stupid mistake! TIA! Ive seen a few topics about centering layers in browsers and it seems really complicated and often to specific to relate to my site. I used to use tables which were of course easy to center, but now at college we have to use layers (im working in design view im not a coder) and the teacher said try putting a layer in a layer and centering that but ive tried this and it doesnt work, i can get a layer in another layer, but not center it within it. This is the site im trying to do, i notice on cssvault.com cssbeauty.com most of the css sites (i know mines not really in css as such) are all centered and I was wondering how everyone does it? I went to the macromedia website and it said you can use an extension which works but for some reason it doesnt let you edit the site once you have centered it. Basically is there a simple way for me to center my site or is it really complicated? I wonder why we are learning in layers when tables center easily and move relative to each other Can someone tell me how z-index calculated on two elements that are both absolute position I'm having a little problem with centering divs: I have a dynamic page that displays items. Each item has it's own div containing an image and a title. I want these divs to be centered but also to drop onto multiple lines if necessary, for example: There is room for 4 items per row within the container div, so one item would be centered, two items would be centered, and so on, but 5 items would have 4 divs on the top row and one div centered underneath: 1 item: [div] 2 items: [div][div] 4 items: [div][div][div][div] 5 items: [div][div][div][div] [div] 10 items: [div][div][div][div] [div][div][div][div] [div][div] and so on. I can get this to work by using float to automatically drop the next 4 onto the next row, but is there a 'center' attribute or technique I could use to keeps these divs centered? I hope this makes sense to you all!! I'm trying to get multiple DIV tags with an set layout, like [Example 1] to show in this [Example 2] but also scroll along when you click on the arrows now my issue is if I use position "position:absolute" the little colour boxes stay where they are? now if I use "position:relative" I have to put the "top:-500px" and the next box as "top:-1300px" etc. but they are the top line of boxes like aaa and ccc in the first link but I cant see this being the correct way of doing this? I'm completely lost any pointers into how to get this to work would be nice? Hello everyone, Ive been trying to reconstruct a web design from a photoshop design and it has bars going down the side of a center container where the content is, the problem im having is when the text and such in the content 'rule' goes over one line, prior to what i thought would happen, only the content 'rule' scales to the amount of text and the container rule does nothing. Is there a way to make the container scale with the content and have the bars scale with the container...? Heres the css and the html Code:
#container
{
margin-left: auto;
margin-right: auto;
top: 0;
width: 875px;
margin-top: -8px;
padding: 0;
overflow: visible;
background: #FFFFFF;
}
#secondbar
{
margin-left: 102px;
margin-right: auto;
width: 40px;
top: 0;
position: absolute;
background: #4D220F;
}
#bar
{
margin-left: 6px;
margin-right: auto;
width: 96px;
top: 0;
position: absolute;
/*[empty]height:;*/
background: #E3C98E;
}
#thirdbar
{
margin-left: 123px;
margin-right: auto;
width: 21px;
top: 0;
position: absolute;
background: #7F8FA6;
}
#content
{
margin-left: 154px;
margin-right: auto;
top: 0;
width: 709px;
position: absolute;
background: #FFFFFF;
}
Code: <head> <title>Test</title> <link rel="stylesheet" type="text/css" href= "styles.css"> </head> <body bgcolor="f4f1ea"> <div id="container"><div id="bar"> </div><div id="secondbar"> </div><div id="thirdbar"> </div> <div id="content"> </div></div> </body> Thanks for any help, sorry if its a bit confusing Xidus Hi. I am a relative CSS newbie working on a new layout. My intended format is:
A sidebar (a div with no visible border) containing a set of smaller divs.
A main div for the content on the right.
About 35 px of space between the sidebar div and the main div.
Yet, for some reason I am unable to force the sidebar and main div to come together in the center with space between them. Using float: only seems to make them both hug the side of the page. My HTML code is: Code: <div class="sidebar">
<div class="cv">
<font size="3"><b><center>
Current Version Info
</center></b></font>
</div>
<div class="ver">
<center>
Version:
<br/>
<b>0.0.0</b>
</center>
</div>
<div class="rel">
<center>
Released:
<br/>
<b>00/00/00</b>
</center>
</div>
<div class="nav">
</div>
</div>
<div class="main">
<center>
Lorum ipsum
</center>
</div>
The relevant CSS code is: Code: div.sidebar {
width: 202px;
float: left;
border: 0px solid #00CC99;
}
div.cv {
width: 200px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.ver {
width: 99px;
border: 1px solid #00CC99;
float: left;
background-color: rgb(33,33,33)
}
div.rel {
width: 99px;
border: 1px solid #00CC99;
float: right;
background-color: rgb(33,33,33)
}
div.nav {
margin-top: 30px;
width: 200px;
height: 100px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.main {
width: 500px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33);
float: right;
}
In particular, div.main and div.sidebar are the ones giving me trouble. What would you recommend? Edit: And for extra bonus points, can you tell me how to make another div go below everything, no matter how long the sidebar or main div is? Right now anything I add seems to hover behind the main div rather than render below it. Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. Hi! I want to have let's say 4 divs of width:25% horizontally side-by-side. Ex: (I'll ry to draw it ) | | | | | | | | | | | | | | | Thank you. Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. I've tried different implementations, but none seem to be working. I have two images crossing over each other using two position: absolute divs. When I click on the one behind using an onClick javascript function, I want that div's z-layer value to change, but none of the sites are helping me. How do I do this? |
|||||||