I've got an element that is placing itself (and by extension all its children) behind its corresponding section's background. I haven't had this issue with any other elements on the page, or even within the same section. I have a background-color set on it inline just to make sure that's what's going on. It's happening in all browsers. Thanks for any help that can be provided.
<div id="homepage_servicesstrip">
<div id="homepage_web_drops_wrap" style="background-color:red;">
</div>
</div>
#homepage_servicesstrip {
background:url('home/images/gradient-services-background.png');
background-size: auto 100%;
position:absolute;
margin-top:0px;
width:100%;
height:1050px;
z-index:1;
}
#homepage_web_drops_wrap {
position:absolute;
margin-top:60%;
margin-left:10%;
height:500px;
width:80%;
z-index:60;
}
The z-index is calculated on siblings first, then on children. e.g.
HTML
<div class="box">
<div class="one box"></div>
</div>
<div class="box">
<div class="two box"></div>
</div>
<div class="box">
<div class="three box"></div>
</div>
CSS
.box {
z-index:1;
}
.two {
z-index:1000000;
}
.two won't be above .three because .three's parent is above .two's parent.
DEMO
Related
If we inspect the code,you will see that the div.header has height: 0px;
Look at image below:
I want my div to be the size of three elements .c1,.c2 and.c3`
How can I solve this problem?
I hope as well that we managed to explain my problem.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
</div>
</div>
CSS:
.container
{
width:100%;
height:500px;
background:red;
}
.c1
{
width:auto;
height:auto;
background:yellow;
}
.c2
{
width:auto;
height:auto;
background:gray;
}
.c3
{
width:auto;
height:auto;
background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}
.header{width:70%;height:auto;margin:0 auto;background:blue;}
JSFiddle
Add overflow: auto(for example) css property to your .header class to recognize it's children's height.
JSFiddle
Use clearing divs.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
<div class='clearing'></div>
</div>
</div>
CSS:
.clearing {clear:both;}
I'm a noob, trying everyday to learn more about CSS (even though I'm clumsy and "not a natural", my brain steams out like an old computer). I want to find out how to code a set of independent modules which share the same style and are displayed inline in two rows of two columns. I want to recreate a paper stack for each module, using z-index and absolute positioning for it.
I made this image to show what I'm looking for:
I tried display:inline for the top div - but this way, I had to code individual overlapped divs for each module, using position:absolute and coordinates. What would be most desirable is that a single module+overlap could be repeated, using the same class (without having to change each module's overlapped div coordinates).
Does anyone have an idea about how to do this using CSS? Thank you in advance :)
Yes, you could do the following. You'll want to resize to whichever dimensions serve you best. JSfiddle here: http://jsfiddle.net/CNPJ9/2/
<div class="contain">
<div class="box">
<h1>A</h1>
</div>
<div class="behind"></div>
</div>
<div class="contain">
<div class="box">
<h1>B</h1>
</div>
<div class="behind"></div>
</div>
<div class="contain">
<div class="box">
<h1>C</h1>
</div>
<div class="behind"></div>
</div>
<div class="contain">
<div class="box">
<h1>D</h1>
</div>
<div class="behind"></div>
</div>
.contain {
margin:25px 25px;
float:left;
}
.box h1 {
font: 8em normal Futura, sans-serif;
text-align:center;
color:#f1f1f1;
}
.box {
width:400px;
height:300px;
background:#000;
z-index:1;
float:left;
position:absbolute;
}
.behind {
width:350px;
height:325px;
margin-left:25px;
background:#333;
z-index:2;
}
Something like this may help you.
Fiddle
.abc{
width=300px;
height:200px;
margin:50px;
border:solid 2px black;
border-bottom: 5px double blue;
}
Basically, I want two different elements in the leftmost area of a div, and two for the rightmost area of a div.
However if I use float:left and float:right twice, I get the following:
ELEMENT ELEMENT
ELEMENT ELEMENT
rather than
ELEMENT ELEMENT
ELEMENT ELEMENT
This is because, when I float for the second time the css floats for the remaining space left.
How do I fix this bug?
You can use clear:both; with float:left; property.
Try Jsbin demo
.left {
float:left;
width:40%;
height:240px;
border:1px solid red;
}
.right {
float:right;
width:40%;
border:1px solid red;
height:240px;
}
.elem1 {
float:left;
margin-bottom:20px;
}
.elem2 {
float:left;
clear:both;
}
.elem3 {
float:left;
margin-bottom:20px;
}
.elem4 {
float:left;
clear:both;
}
<div class="left">
<div class="elem1">element 1</div>
<div class="elem2">element 2</div>
</div>
<div class="right">
<div class="elem3">element3</div>
<div class="elem4">element4</div>
</div>
What you need is a clear: both in your CSS.
Your floats are working fine, but there is not enough content to push the next elements below the first elements. If you set them to clear, then they will.
Try this one:
Markup:
<div class='clear:both'>
<!-- left container -->
<div style = "float:left;">
<div style = "float:left;">
Element
</div>
<div style = "float:left; clear:left;">
Element
</div>
</div>
<!-- right container -->
<div style = "float:right">
<div style = "float:right;">
Element
</div>
<div style = "float:right; clear:right;">
Element
</div>
</div>
Please use your own external style, this is just to guide you.
Please have a look here on jsfiddle
.wrapper {
height:100px;
border:1px solid red;
margin: 5px;
}
.left {
margin: 10px;
float:left;
width: 45%;
}
.right {
margin: 10px;
float:right;
width: 45%;
}
<div class="wrapper">
<div class="left">element 1</div>
<div class="right">element 2</div>
</div>
<div class="wrapper">
<div class="left">element3</div>
<div class="right">element4</div>
</div>
This works for me.
.right {
float:right;
}
.left {
float:left;
}
<div>
<div class="right">1 element</div>
<div style="clear:both"></div>
<div class="right">1 element</div>
<div class="left">1 element</div>
<div style="clear:both"></div>
<div class="left">1 element</div>
</div>
Here is the fiddle. http://jsfiddle.net/nQvEW/143/
This question is best explained with a screenshot:
http://i42.tinypic.com/2ccvx91.jpg
The wrapper div has a background image of a city.
#wrapper {
background:url('city.jpg');
}
Inside that div is a bunch of other divs of class 'square':
.square {
width:40px;
height:40px;
background-color:#27272f;
opacity:.8;
margin:2px;
}
You can see through the squares to the city because of the opacity. But you can also see through the spaces in between the squares, which I don't want it to do. I want to only be able to see through the divs to the element behind it, with the spaces between them being solid black. How can I do this?
Thanks.
best bet is remove margin.. and give your div border of 2 px..
What about setting the border and using a wrapper div to hide the corners. You have to have a negative margin for the overlap to work though
Here is the adapted jsfiddle from animuson:
<div id="wrapper">
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
</div>
and here is the css
#wrapper {
background:Green;
font-size:0;
}
.square {
width:40px;
height:40px;
background-color:#27272f;
opacity:.8;
border:2px solid black;
border-radius:5px;
display:inline-block;
margin:-2px;
}
.hidingborder
{
border:#27272f solid;
display:inline-block;
}
I'm trying to set up a site that has a "carousel" of divs that are all side-by-side (floated left) each with a full-screen width. Using javascript i plan to move different divs into view by moving the "carousel."
My problem is that for some reason when I set overflow:hidden on the div that contains the carousel all the content is hidden. When I inspect with firebug the divs show up in the correct places but none of the content is visible.
Here is the HTML:
<div id="content_window">
<div id="carousel">
<div id="p_home" class="pane">
Home!
</div>
<div id="p_about" class="pane">
About!
</div>
<div id="p_services" class="pane">
Services!
</div>
<div id="p_contact" class="pane">
Contact!
</div>
</div>
</div>
And the CSS:
#content_window
{
position:relative;
width:100%;
overflow:hidden;
}
#carousel
{
position:absolute;
width:400%;
top:50px;
left:0;
overflow:hidden;
}
.pane
{
float:left;
width:25%;
color:White;
text-align:left;
margin-top:50px;
}
If I take the overflow:hidden off of #content_window then the content in the panes becomes visible but horizontal scrollbars are added and you can scroll across and see all the panes. Does anyone know what I'm doing wrong?
When a div contains nothing except floated or positioned elements, its height becomes 0. That is the problem with div#content_window. Try adding a height to that div:
#content_window
{
height: 120px;
}
There's no need to use absolute positioning at all. Just have the content_window clip the viewport for the carousel. See http://jsbin.com/uhubij/edit#html.
The CSS is much simpler:
#content_window {
width:100%;
overflow:hidden;
}
#carousel {
width:400%;
}
.pane {
float:left;
width:25%;
text-align:left;
margin-top:50px;
}
To switch between the panes, add a margin-left to #carousel. The first pane is at margin-left: 0% (default). The second pane is at margin-left: -100%;. The third pane is at margin-left: -200%;, etc... For example, here is pane 2: http://jsbin.com/uhubij/2/edit#html
The HTML is basically the same (except I added a clearing div for you):
<div id="content_window">
<div id="carousel">
<div id="p_home" class="pane">
Home!
</div>
<div id="p_about" class="pane">
About!
</div>
<div id="p_services" class="pane">
Services!
</div>
<div id="p_contact" class="pane">
Contact!
</div>
<div style="clear: both;"></div>
</div>
</div>