I need "div2" to overlap/cover its two adjacent block. I can do it with "div1", but I cannot do it with "div3". Someone know how to do it? Please see my code below with what I have a problem. Thanks!
HTML:
<div class="parent">
<div class="child_1">Some div1</div>
<div class="child_2">Some div2</div>
<div class="child_3">Some div3</div>
</div>
CSS:
.parent {
position: relative;
font-size: 34px;
border: 1px solid #000;
background: #eef;
height: 110px;
width: 620px;
margin: 20px
}
.child_1 {
position: static;
text-align:center;
display: inline-block;
margin-top:20px;
margin-left:10px;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
}
.child_2 {
position: relative;
text-align:center;
display: inline-block;
margin-left:-30px;
height: 80px;
width: 200px;
border: 3px solid blue;
background:;
left:-30px;
top:-10px;
}
.child_3 {
position: relative;
display: inline-block;
text-align:center;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
left:-30px;
}
.child_3 needs to have left:-60px; in order to overlap .child_2
you have to add the -30px from .child_2to child_3, so -30px -30px = -60px
ADDITION: To really get child_2 to COVER child_3, assing z-index:1 to child_2:
.parent {
position: relative;
font-size: 34px;
border: 1px solid #000;
background: #eef;
height: 110px;
width: 620px;
margin: 20px;
}
.child_1 {
position: static;
text-align:center;
display: inline-block;
margin-top:20px;
margin-left:10px;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
}
.child_2 {
position: relative;
text-align:center;
display: inline-block;
margin-left:-30px;
height: 80px;
width: 200px;
border: 3px solid blue;
background:;
left:-30px;
top:-10px;
z-index:1;
}
.child_3 {
position: relative;
display: inline-block;
text-align:center;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
left:-60px;
}
<div class="parent">
<div class="child_1">Some div1</div>
<div class="child_2">Some div2</div>
<div class="child_3">Some div3</div>
</div>
You need to increase the negative left value on child3, and you need you use z-index to position child2 on top
In below sample I simplified your code a little.
.parent {
position: relative;
font-size: 34px;
border: 1px solid #000;
background: #eef;
height: 110px;
width: 600px;
margin: 20px;
}
.child {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
margin: 20px;
text-align:center;
vertical-align: middle;
z-index: 1;
border: 3px solid yellow;
}
.child.nr1 {
background:yellow;
margin-right: -60px;
}
.child.nr3 {
background:yellow;
margin-left: -60px;
}
.child.nr2 {
height: 60px;
border: 3px solid blue;
z-index: 2;
}
<div class="parent">
<div class="child nr1">Some div1</div>
<div class="child nr2">Some div2</div>
<div class="child nr3">Some div3</div>
</div>
Related
I need to know how to cut that gray part from the blue box.
The red arrows on the image bellow show which part I would like to cut from the blue box. This is the code I have:
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
From what I understand you would like to cut off the grey part outside the blue area. If so, here's how you do it.
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
overflow: hidden;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
z-index: 1;
}
<div class="father">
<div class="border"></div>
</div>
Can you see this approach:
border-top-left-radius: 8px;
border-top-right-radius: 8px;
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 100%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
Are you looking for this?
.father {
height:400px;
width:400px;
margin:150px auto;
position:relative;
background:green;
}
.border {
position:relative;
bottom:50px;
margin:auto;
border-radius:50%;
width:96%;
height:30%;
background-color:#DDD;
z-index:-9;
}
<div class="father">
<div class="border"></div>
</div>
.father
{
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: #04aada;
border-radius: 50px 50px 0 0;
}
.border
{
position: relative;
bottom: 25px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #fff;
z-index: 1;
box-shadow: 0px -4px 0px #04aada;
}
<div class="father">
<div class="border"></div>
</div>
So, I'm trying to achieve this result:
This is what I got when I tried: https://jsfiddle.net/wvdkmjge/
.container {
width: 100px;
height: 1px;
background-color: black;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: transparent;
border: solid 1px black;
border-radius: 50%;
}
<div class="container">
<div class="circle">
</div>
</div>
Moreover, I want that I'll not see the border line on the circle. Any suggestions?
A small amendment to your code to position the elements and you get the effect you want to achieve.
.container {
width: 100px;
height: 1px;
background-color: black;
position: relative;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
position: absolute;
top: -6px;
left: calc(50% - 5px);
}
.blue {
margin-top: 20px;
background: #3EB2EF;
}
.blue .circle {
background: #3EB2EF;
border-color: #3EB2EF;
}
<div class="container">
<div class="circle">
</div>
</div>
<div class="container blue">
<div class="circle">
</div>
</div>
If you want to position an element depending on its parent, use position:relative for the parent and then add position relative or absolute to the child. to center something in the middle, use margin:0 auto and if it has absolute positioning also add left:0; right:0;
https://jsfiddle.net/azizn/e4ev3awj/1/
.container {
width: 100px;
height: 1px;
background-color: blue;
position:relative;
}
.circle {
display:inline-block;
width: 10px;
height: 10px;
position: absolute;
background:blue;
left:0;
right:0;
margin:0 auto;
border-radius: 100%;
top:-4px;
}
<div class="container">
<div class="circle">
</div>
</div>
a bit late to answer, but this looks like a typical <hr/> that needs some makup.
/* restyle however your needs are hr and its pseudo elements , here only one is used */
hr {
color: turquoise;
border-width: 3px;
margin: 1em;
box-shadow: 0 0 5px gray;
}
hr:before {
content: '';
border-radius: 100%;
position: absolute;
height: 20px;
width: 20px;
background: turquoise;
left: 50%;
margin: -10px;
box-shadow: inherit
}
<hr/>
Try this:
.container {
width: 100px;
height: 1px;
background-color: black;
position: relative;
}
.circle {
position: absolute;
top: -5px;
left: 50%;
margin-left: -5px;
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: transparent;
border: solid 1px black;
border-radius: 50%;
}
<div class="container">
<div class="circle">
</div>
</div>
Fiddle
This uses a lot of different codes then above.
class:before and class:after
Hope this helps you!
I'm putting design into html+css - the question is - how do i draw curved lines on the sides, so that it would be scalable and responsive? What's the best way to do it
you can try this one:
section{
margin: 0 auto;
width: 600px;
text-align: center;
}
h1 {
position: relative;
//margin-top: 20px;
}
h1.one {
margin-top: 0;
}
h1.one:before {
content: "";
display: block;
border: solid 1px black;
width: 100%;
height: 150px;
position: absolute;
top: 50%;
z-index: 1;
border-radius:5px;
}
h1.one span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
}
/* method 2*/
button
{
padding:8px;
background-color: gray
color:white;
border: 2px solid;
border-radius: 15px;
margin-top:2px;
position: relative;
z-index: 5;
}
.circle
{
border:4px solid red;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
.row
{
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
DEMO FIDDLE
Check as per the description this answer get your perfectly needs.
body {
background:#007DAD;
}
section {
text-align: center;
}
h1.one {
position: relative;
margin-top: 0;
}
h1.one:before {
content: "";
display: block;
border: solid 1px #FFF;
width: 100%;
height: 150px;
position: absolute;
top: 50%;
z-index: 1;
border-radius:5px;
}
h1.one span {
background: #007DAD;
padding: 0 20px;
position: relative;
z-index: 5;
}
.row {
height: 100px;
margin: 10px;
}
.circle {
border:4px solid red;
height: 70px;
width: 70px;
border-radius: 40px;
margin:10px auto;
display:inline-block;
}
button {
padding:10px;
background-color: gray;
color:white;
border: 2px solid;
border-radius: 5px;
margin-top:-10px;
position: relative;
z-index: 5;
}
<section>
<h1 class="one">
<span>It Has Naver Been Easier</span>
</h1>
<div class="row">
<div class="circle"><p>1</p></div>
<div class="circle"><p>2</p></div>
<div class="circle"><p>3</p></div>
</div>
<button type="button">Order Now</button>
</section>
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}
I would like to a 4 blocks layout like this:
I've been trying things with float but I really don't master it.
How can I do that ?
Thanks
My HTML code:
<div id="colonne_gauche">1</div>
<div id="colonne_gauche2">2</div>
<div id="colonne_droite">4</div>
<div id="colonne_centre">3</div>
My CSS code:
#colonne_gauche
{
margin-top: 5px;
-float: left;
width: 420px;
height: 145px;
border: 1px solid #818181;
background: red;
}
#colonne_gauche2
{
float: left;
margin-top: 5px;
width: 420px;
height: 145px;
border: 1px solid #818181;
background: orange;
}
#colonne_centre
{
float: right;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
width: 310px;
height: 295px;
border: 1px solid #818181;
background: green;
}
#colonne_droite
{
float: right;
margin-top: 5px;
width: 220px;
height: 295px;
border: 1px solid #818181;
background: blue;
}
I just played a little with the floating and see what that does.
This should help you: DEMO.
HTML:
<div id="header">Header</div>
<div id="stackleft">
<div id="one">1</div>
<div id="two">2</div>
</div>
<div id="stackright">
<div id="three">3</div>
<div id="four">4</div>
</div>
CSS:
#header {
width: 960px;
padding: 50px 0px;
color: black;
border: 1px solid black;
margin: 5px;
text-align: center;
}
#one {
width: 420px;
text-align: center;
padding: 0px;
height: 145px;
color: black;
border: 1px solid black;
margin: 5px;
}
#two {
width: 420px;
text-align: center;
padding: 0px;
height: 145px;
color: black;
border: 1px solid black;
margin: 5px;
}
#three {
width: 310px;
text-align: center;
padding: 0px;
height: 295px;
color: black;
border: 1px solid black;
margin: 5px;
display: inline-block;
}
#four {
width: 220px;
text-align: center;
padding: 0px;
height: 295px;
color: black;
border: 1px solid black;
margin: 5px;
display: inline-block;
}
#stackleft, #stackright {
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/xam558e3/
Using DIV's inside of other DIV's you can easily control how they appear, and where they appear. You should look up the box model, it may shed some light for you on this.
<div style="width:310px">
<div style="width:303px; height: 100px; background-color: #6495ed;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:303px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
</div>