This question already has answers here:
How to connect HTML Divs with Lines? [duplicate]
(7 answers)
Closed 4 years ago.
I am trying to draw lines between divs similar to this:
I have tried using this, as I am new to css I am scratching my head to make divs around a single div. Can someone please help me out with this.
EDIT: I am trying to achieve this using css only so I can use answer of #James Montagne from this but in that case I will need to have separate classes for all 6 divs and 5 lines. I am not sure if it is the best way to achieve this as it might not be responsive? Please suggest.
You can use a static solution like this:
.boxParent{
position: relative;
width: 500px;
height: 500px;
margin: auto;
text-align: center;
}
.boxCenter{
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
border:1px solid #000000;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #808080;
}
.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
position: absolute;
background: #ffffff;
}
.boxItem[data-boxItem-index]:after{
content: "";
display: block;
position: absolute;
z-index: -1;
height: 1px;
border-top: 1px solid #000000;
}
.boxItem[data-boxItem-index='1']{
top: 40%;
left: 10%;
}
.boxItem[data-boxItem-index='1']:after{
width: 200px;
transform: rotate(5deg);
}
.boxItem[data-boxItem-index='2']{
top: 10%;
left: 60%;
}
.boxItem[data-boxItem-index='2']:after{
width: 200px;
transform: rotate(113deg);
top: 120px;
left: -120px;
}
.boxItem[data-boxItem-index='3']{
top: 80%;
left: 40%;
}
.boxItem[data-boxItem-index='3']:after{
width: 200px;
transform: rotate(96deg);
top: -60px;
left: -70px;
}
<div class="boxParent">
<div class="boxCenter">TEST</div>
<div class="boxItem" data-boxItem-index="1">1</div>
<div class="boxItem" data-boxItem-index="2">2</div>
<div class="boxItem" data-boxItem-index="3">3</div>
</div>
Center element positioned absolute. Satellite elements positioned absolute around center element, Pseudo-elements inside secondary elements act as their lines. You need to play with the rotation/width/positioning for each line.
Making this responsive/dynamic requires a bit more work.
Related
i'm struggling with CSS trying to create special shape.
This is the shape i wanna create
enter image description here
Do you have any solution ?
Thank's
How about this:
div {
position: relative;
height: 300px;
overflow: hidden;
border-radius: 25px;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
transform: skewY(-6deg);
transform-origin: top right;
border-radius: 25px;
<div>
<div class="bg"></div>
</div>
This question already has answers here:
Why magin:auto is not enough to center position absolute or fixed?
(3 answers)
Center a position:fixed element
(23 answers)
Closed 2 years ago.
Here is the CSS:
#indicator {
position: fixed;
top: 40%;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: #fff;
}
Whenever I apply it, the content stays hard left, not centered. I have tried it with block elements (such as P and H1), and inline elements (such as span).
When I check the HTML inspector I can see that the rules are being applied as expected, and none are being overridden.
By default, margin auto wont work with fixed elements. To make the margin auto value work with fixed elements, add left:0 and right:0 to your CSS values.
Attached a code snippet for your reference.
#indicator {
position: fixed;
top: 40%;
left: 0;
right: 0;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: red;
}
<div id="indicator">
</div>
Because margin:auto only works with position:relative.
To make a fixed div to work with margin:auto, add left: 0; right:0; to your div.
#indicator_relative {
position: relative;
margin: 0 auto;
background: #0f0;
width: 10px;
height: 10px;
}
#indicator_fixed {
position: fixed;
margin: 0 auto;
background: #f00;
width: 10px;
height: 10px;
}
#indicator_fixed_centered {
position: fixed;
margin: 0 auto;
background: #00f;
width: 10px;
height: 10px;
left:0;
right:0;
}
<div id='indicator_fixed'></div>
<div id='indicator_relative'></div>
<div id='indicator_fixed_centered'></div>
To center fixed/absolute position elements. Add left: 50%; margin-left: (element width/ 2 * -1)px;
#indicator {
position: fixed;
top: 40%;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: #fff;
left: 50%;
margin-left: -75px; /* (element width / 2 * -1) */
}
plus make sure that the parent element where you want to center this, has position: relative; so it wont just fly around.
top 40%; horizontal center;
#indicator {
position: fixed;
top: 40%;
left: 50%;
transform: translateX(-50%);
}
<div id="indicator">Hello World</div>
or center screen
#indicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="indicator">Hello World</div>
This question already has answers here:
Lower z-indexed parent's child upon higher z-indexed element?
(2 answers)
Closed 4 years ago.
I am trying to render an element between two nested elements. This is probably best explained with an example:
#parent {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
z-index: 0;
background-color: red;
}
#child {
position: fixed;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
z-index: 2;
background-color: blue;
}
#other {
position: fixed;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
z-index: 1;
background-color: green;
}
<div id="parent">
<div id="child"></div>
</div>
<!-- I want to have this element in between the "parent" and "child". -->
<div id="other"></div>
In this case, I want the green ("#other") element to be rendered in between (z-depth wise) the red parent ("#parent") and blue child ("#child") elements. In other words, I want the blue element to be on top.
From my understanding this is not possible using CSS's z-depth (like I attempted) since the elements are nested, but I can't seem to figure out a different way.
I would like to keep the HTML how it is, if possible, and do this entirely in CSS.
Thanks in advance!
just removed the position:fixed from #parent. You can add position: static; for #parent.
Please check this demo: https://codepen.io/anon/pen/dwZRMe
Your question is still not clear, so I'll recommend existing solutions.
First, you can move around elements using js, if you wish to not touch html. Refer this link.
Secondly, this kind of functionality is closely related to wrapping of elements. This is present in jquery as well.
Thirdly, you may want to check out :before and :after psuedo elements.Checkout this link.
Nesting plays a big role for z-index. If #other element sits on top of #parent element, a #child element of #parent can never be higher than #other element. This is an important rule for z-index.
In this case, you can change your HTML code in the following ways to create the shape you want.
#parent {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
z-index: 0;
background-color: red;
}
#child {
position: fixed;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
z-index: 2;
background-color: blue;
}
#other {
position: fixed;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
z-index: 1;
background-color: green;
}
<div id="parent">
<div id="child"></div>
<div id="other"></div>
</div>
#parent {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
z-index: 0;
background-color: red;
}
#child {
position: fixed;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
z-index: 2;
background-color: blue;
}
#other {
position: fixed;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
z-index: 1;
background-color: green;
}
<div id="parent"></div>
<div id="child"></div>
<div id="other"></div>
EDIT: To keep the HTML, no need to use any position style for #parent and remove top|left|z-index values too in it.
#parent {
width: 200px;
height: 200px;
background-color: red;
}
#child {
position: fixed;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
z-index: 2;
background-color: blue;
}
#other {
position: fixed;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
z-index: 1;
background-color: green;
}
<div id="parent">
<div id="child"></div>
</div>
<div id="other"></div>
This question already has answers here:
Line before and after title over image [duplicate]
(2 answers)
Closed 7 years ago.
What's the best way to create the following in just CSS3 and using the fewest containers?
At the moment I'm using 2 nested divs and an hr which seems excessive.
Pseudo-elements!
Using ::before and ::after you can manage this with just one container.
You'll need to adjust your values for your own environment, but the general idea is to position the pseudo-elements absolutely inside the container.
#or {
position: relative;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
}
#or::before,
#or::after {
position: absolute;
width: 130px;
height: 1px;
top: 24px;
background-color: #aaa;
content: '';
}
#or::before {
left: 0;
}
#or::after {
right: 0;
}
<div id="or">OR</div>
Using flexbox instead of absolute positioning is another option, with worse support.
.or {
display:flex;
justify-content:center;
align-items: center;
color:grey;
}
.or:after,
.or:before {
content: "";
display: block;
background: grey;
width: 30%;
height:1px;
margin: 0 10px;
}
<div class="or"> OR </div>
HTML
<div class="separator"></div>
CSS
.separator {
width: 100%;
border-bottom: solid 1px;
position: relative;
margin: 30px 0px;
}
.separator::before {
content: "OR";
position: absolute;
left: 47%;
top: -8px;
background-color: #fff;
padding: 0px 10px;
}
Fiddle: https://jsfiddle.net/k9jmgdyq/1/
The html
<div class="separator"><label>OR</label></div>
And css
.separator{
position: relative;
text-align: center;
}
.separator label{
background-color:#fff;
padding: 0 0.4em;
position: relative;
}
.separator:before{
content: '';
border-style: solid;
border-width: 0 0 1px 0;
position: absolute;
left: 0;
top: 50%;
width: 100%;
border-color:black;
}
Demo
http://jsfiddle.net/0e6j7ruc/
I need to get a speech bubble that looks something like this via CSS:
I do not need to set default height for a box. It must have dynamic height. And if the height is increased, the left arrow must be in the center.
I looked through some examples, but I don't know how to change the height! Here is the code I have:
<style>
.bubble
{
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: gray;
margin-left:50px;
}
.bubble:after
{
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent gray;
display: block;
width: 0;
z-index: 1;
}
</style>
<div class="bubble"></div>
Here is JSBin
Make
top: 40%;
bottom: 50%;
in your .bubble:after in CSS script
You have to check it by changing the .bubble height