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;
}
Related
Im trying to overlap an element with a absolute position .tools outside of its uppermost parent element #canvas_area which has an overflow:scroll, however this doesn't seem to work, but it does work if you remove the overflow:scroll attribute.
HTML:
<div id="canvas_area">
<div class="container">
<div class="blocks">
<div class="tools">
x
</div>
</div>
<div class="blocks">
<div class="tools">
x
</div>
</div>
</div>
</div>
CSS:
#canvas_area{
overflow:scroll; // remove this and it works
height:400px;
width:400px;
background-color:black;
margin: 0 auto
}
.container{
position:relative;
}
.blocks{
overflow:hidden;
width:200px;
height:100px;
background-color:white;
margin-bottom:10px;
}
.tools{
position:absolute;
color:green;
left:-40px;
}
I need #canvas_area to have a scroll, is their a way around this?
here is the jsfiddle: https://jsfiddle.net/2exn6oq5/
remove overflow:scroll from #canvas_area and you will see the green x outside the body, which is what I want it to do.
I need to place a rectangular div in the middle of another rectangular div that's inside yet another container div. The image inside the innermost div has to be centered both horizontally and vertically in relation to the outermost div. How do I do that?
<div class="col-sm-4 col-sm-offset-1" style="margin-right:10px;">
<div class="panel panel-default" style="min-height:320px;">
<div class="panel-body" style="padding:0;">
<img src="">
</div>
<div>
</div>
#div1{
border:1px solid;
width:200px;
height:200px;
}
#div2{
border:1px solid;
width:100px;
height:100px;
margin:25%;
}
#div3{
border:1px solid;
width:50px;
height:50px;
margin:25%;
}
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
Make sure all the divs have width and height set and then use:
margin: 25%;
On the inner divs
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;
}
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
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/