I have, again, met a complication. And again, this is probably one a novice could bypass, but I can't.
Basically, what I'm trying to do:
Get the green div under the red div
Have the bottommost divs go up with it
Have a border of 4px be between every div
An example based off of this fiddle would be nice.
There object properties with which you can define the position from an object.
For example: "absolute" and "relative" https://www.w3schools.com/css/css_positioning.asp
.red {
height: 200px;
width: 150px;
background-color: red;
border: solid white 4px;
position: relative;
}
.green {
height: 60px;
width: 150px;
background-color: green;
border: solid white 4px;
margin-top: 102px;
}
.verypurple {
height: 60px;
width: 200px;
background-color: darkviolet;
border: solid white 4px;
}
.yellow{
height: 60px;
width: 150px;
background-color: yellow;
border: solid white 4px;
position: absolute;
margin-left: 154px;
}
.purple{
height: 130px;
width: 150px;
background-color: purple;
border: solid white 4px;
position: absolute;
margin-left: 154px;
margin-top: 40px;
}
.blue{
height: 130px;
width: 150px;
background-color: blue;
border: solid white 4px;
position: absolute;
margin-left: 154px;
margin-top: 174px;
}
.darkbrownish{
height: 60px;
width: 70px;
background-color: gray;
border: solid white 4px;
position: absolute;
margin-left: 204px;
margin-top: 378px;
}
<html>
<head></head>
<body>
<div class="yellow">
yellow
</div>
<div class="purple">
purple
</div>
<div class="blue">
blue
</div>
<div class="darkbrownish">
dark<br>
brownish
</div>
<div class="red">
red
</div>
<div class="green">
green
</div>
<div class="verypurple">
very purple
</div>
</body>
</html>
You could use Masonry for your layout.
.masonry { /* Masonry container */
column-count: 2;
column-gap: 4px;
}
.item { /* Masonry bricks or child elements */
display: inline-block;
margin: 0 0 4px;
width: 100%;
}
See here for more details.
in the div of green just add margin-top as :
margin-top:-84px
as i have experimented it on your fiddle and it's working
Related
Please look at the image to understand what I am talking about. I have three box elements that look like what is displayed in the picture. What I want is for the green box to only be displayed overlapping the yellow and not displayed over overlapping the red. The green box needs to reside overlapping both but only visible over the yellow area. Ive tried using z-index, position and opacity in every different manner I could think of, but yet to come up with a solution.
link to image
<div id="one" ></div>
<div id="two" >
</div><div id="three" ></div>
#one{
border: solid 1px black;
width: 300px;
height: 300px;
background-color: red;
position: absolute;
}
#two{
margin-left: 50px;
border: solid 1px black;
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
}
#three{
border: solid 1px black;
width: 100px;
height: 100px;
background-color: green;
position: relative;
}
It's impossible to have elements overlap one layer and then go underneath another layer like you are asking. I know there is some art term for this.
Anyways here is the closest solution is to just fake it and have the green box inside the yellow box:
.outer {
width: 300px;
height: 300px;
position: relative;
outline: 1px solid black;
}
.green {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: -50px;
outline: 1px solid black;
background-color: green;
z-index: 3;
}
.yellow {
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
margin: auto;
outline: 1px solid black;
background-color: yellow;
z-index: 2;
overflow: hidden;
}
.red {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
outline: 1px solid black;
background-color: red;
z-index: 1;
}
<div class="outer">
<div class="yellow">
<div class="green"></div>
</div>
<div class="red"></div>
</div>
I have this code:
<div style="position:absolute;left:0px;top:0px;width:17px;height:395px;background-color:white;border:1px solid black;">
<div style="position:inherit;;width:inherit;height:inherit;overflow:scroll;"></div>
<button style="position:absolute;left:0px;top:139px;width:17px;height:73px;background-color:white;border:1px solid black;"></button>
</div>
If you look at the generated HTML, you will see that there is a white square that is not filled by the scrollbar on the bottom. How does this happen? When I inspect the element, the overflow:scroll div does not have 395px, but 378px. When I correct it to 395px the scrollbar will fill the parent div visually, but there will be an overflow.
What is happening here?
This is simply the space for the horizontal scrollbar. You can make it visible by increasing your elements width:
.bar {
position: absolute;
left: 0px;
top: 0px;
width: 80px;
height: 395px;
background-color: white;
border: 1px solid black;
}
.inner {
position: inherit;
width: inherit;
height: inherit;
overflow: scroll;
}
button {
position: absolute;
left: 0px;
top: 139px;
width: 17px;
height: 73px;
background-color: white;
border: 1px solid black;
}
<div class="bar">
<div class="inner"></div>
<button></button>
</div>
You can avoid that space by using overflow-y instead of the more general overflow:
.bar {
position: absolute;
left: 0px;
top: 0px;
width: 17px;
height: 395px;
background-color: white;
border: 1px solid black;
}
.inner {
position: inherit;
width: inherit;
height: inherit;
overflow-y: scroll;
}
button {
position: absolute;
left: 0px;
top: 139px;
width: 17px;
height: 73px;
background-color: white;
border: 1px solid black;
}
<div class="bar">
<div class="inner"></div>
<button></button>
</div>
In general it's a good idea to seperate styles from markup. It's easier to avoid problems if not using inline styles.
What i need to do is on image below:
I do not want use SVG at all. I think it is two divs with border-radius 50%. But how I merge them like on image? Can you solve this or give an advice?
This is a simpliest way to do it, may be you can improve it for your needs
#main {
width: 80px;
border-radius: 50%;
height: 80px;
border: 3px solid blue;
}
#background {
background: grey;
border-radius: 50%;
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
#small {
background: grey;
width: 30px;
border-radius: 50%;
height: 30px;
border: 3px solid blue;
margin-top: -30px;
margin-left: 50px;
}
<div id="main">
<div id="background"></div>
</div>
<div id="small"></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!
How could I center the blue box inside the red one ?
I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks !
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
If you're able to change the <span> tag to a <div>
<div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
Then this piece of CSS should work.
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.
You could add left:50px to #abs if that's all you want...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
If you are going to define dimensions like that (200px x 300px and 300px x 400px), here's how it can be centered:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
You can check at my solution here at http://jsfiddle.net/NN68Z/96/
I did the following to the css
#rel {
position: relative;
top: 10px;
left: 20px;
right: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#abs {
display: block;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}
This should work
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}