I've not been able to find anything on this topic, oddly; I figured it'd be a pretty common issue!
What I've got is a parent div with a border-radius to make the div circular. Nested in that div, I've got several child divs that I would like:
Positioned directly on the visible circular borders (as opposed to the invisible square "border" that surrounds the div -- this jsFiddle hopefully will clarify what I'm trying to say here).
In addition, I'd like to be able to precisely position the child divs along different points of this border (so, something like "position childDiv1 at the 90deg position [or the 105deg position, 120deg, 135deg, etc.] of the circular parent div" instead of having to use top and left or assign absolute pixel values or something).
Still an amateur trying to figure out CSS positioning, so I'm not even sure if any of this is possible, haha. Looking forward to any input you guys can provide!
You can use css3 transform and transform-origin to achieve this
<div id="parent">
<div class="child" id="child1"></div>
<div class="child" id="child2"></div>
<div class="child" id="child3"></div>
<div class="child" id="child4"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
border: 1px dotted #000;
border-radius: 150px;
}
.child {
position: absolute;
width: 30px;
height: 30px;
background-color: #666;
left: 135px;
}
#child1{
transform: rotate(90deg);
transform-origin:50% 150px;
}
#child2{
transform: rotate(105deg);
transform-origin:50% 150px;
}
#child3{
transform: rotate(120deg);
transform-origin:50% 150px;
}
#child4{
transform: rotate(135deg);
transform-origin:50% 150px;
}
http://jsfiddle.net/zSdsg/20/
http://jsfiddle.net/zSdsg/15/
(updated to show that top:0 does not protrude the circle.)
Or http://jsfiddle.net/zSdsg/17/, which just looks a lot cooler :}
EDIT: I think I misunderstood your question. I will update or delete my answer depending on...my answer.
http://jsfiddle.net/zSdsg/14/
would something like this be what your looking for?
#parent {
position: relative;
width: 300px;
height: 300px;
border: 1px dotted #000;
border-radius: 150px;
}
#child {
position: absolute;
width: 30px;
height: 30px;
background-color: #666;
}
#child2 {
position: absolute;
top:35px;
left:40px;
width: 30px;
height: 30px;
background-color: red;
border-radius: 150px;
}
<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>
Related
I noticed something strange when trying to move an absolute positioned element with transform property even when using something like translateY(0) it moves the element abit which it should not move it at all
is this a normal behavior ?? and is there any workaround for it ??
I could not find anything on the internet related to this topic so I'm posting this here
NOTE: this issue happend on (Firefox) and it seems to work just fine on (Chrome)
I tried to reproduce the same problem using the code below
<div class="wrapper">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
display: grid;
place-content: center;
}
.wrapper {
position: relative;
width: 200px;
height: 400px;
border: 1px solid red;
}
.box {
position: absolute;
width: 100%;
border: 5px solid white;
/*
if you toggle the next line you'll notice the bottom border line disappear and appear again
*/
transform: translateY(0);
}
.box-1 {
background-color: red;
height: 25%;
}
.box-2 {
background-color: blue;
height: 75%;
top: 25%;
}
you'll notice a line that has a comment above
as described removing the transform line will make the bottom border to reappear again
https://codepen.io/codepen19871/pen/KKQZgwQ
Is there a way to fix this behavior? I want to make sure that the div expands downward and never upward when adding text. Because of this, I need to used fixed width, but if I use fixed width, I can't make the div responsive to the size of the content. Is there a way to fix this?
.child {
background-color: rgba(255,255,255, 1);
min-width: 10%;
max-width: 20%;
top: 90px;
left: 50%;
position:absolute;
z-index: 2;
transform: translate(-50%, -50%);
overflow-wrap: break-word;
}
If I remove translate, it won't center. I also tried using other styling such as:
width: max-content;
But nothing works, there doesn't seem to be a solution that doesn't require javascript. If so, is there a way to make it work in React and make it behave like as though I used max-content?
I just need to center the div without the div expanding above, it's as simple as that.
Move child div under parent div and set Top 50%
.parent{
width: 100%;
height: 200px;
background-color: #8ae6a2;
position: relative;
}
.child {
background-color: rgba(255,255,255, 1);
min-width: 10%;
max-width: 20%;
top: 50%;
left: 50%;
position:absolute;
z-index: 2;
transform: translate(-50%, -50%);
overflow-wrap: break-word;
}
<div class="parent">
<div class="child">
234234234343434234324324343242342342343242343243423
</div>
</div>
You should use flexbox if you want to center your div, I'm not exactly sure what you're attempting to do, but here is my interpretation.
#parent {
width: 100%;
height: 200px;
background-color: green;
display: flex;
justify-content: center;
}
.child {
align-self: start;
max-width: 20%;
background-color: white;
overflow-wrap: break-word;
}
<div id="parent">
<div class="child">
100000000000000000000000000000000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000000000000000000000000000000000
</div>
</div>
I have a problem. How to remove white space after rotate image?
Photo with problem
Code:
.img-box{
position:relative;
width: 100%;
border: 4px solid #333;
}
.img-box img{
transform: rotate(44deg);
width: 70%;
}
<div class="img-box">
<img src="https://publicdomainvectors.org/photos/mystica-LightSaber-Fantasy-2.png" >
</div>
transform: rotate only rotates the image visually, it still takes the same space in the HTML. The easiest way to solve this is to make the image position: absolute; and position it as you need it.
.img-box{
position:relative;
width: 100%;
border: 4px solid #333;
position: relative;
height: 40px;
}
.img-box img{
transform: rotate(44deg) translateY(-50%);
width: 70%;
position: absolute;
top: -40px;
}
<div class="img-box">
<img src="https://publicdomainvectors.org/photos/mystica-LightSaber-Fantasy-2.png" >
</div>
You can do something like this:
.img-box{
position:relative;
width: 100%;
border: 4px solid #333;
height: 100px;
overflow: hidden;
}
.img-box img{
transform: rotate(44deg);
width: 70%;
position: absolute;
top: -225px;
left: 100px;
}
<div class="img-box">
<img src="https://publicdomainvectors.org/photos/mystica-LightSaber-Fantasy-2.png" >
</div>
the hidden overflow will prevent the image from leaking beyond its container.
However the best solution would be to use a graphical editing program such as photoshop or gimp to edit the photo accordingly
I'm having the same issue. It would be really nice if image-orientation wasn't a deprecated CSS property. It'd do exactly what we need. Even though caniuse says otherwise
https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation
I don't know that my question is much different than the question in the possible duplicate. However, the answer in the possible duplicate does not work (even the jsFiddle provided as the answer does not seem to even rotate the text). The answer on this thread actually solved my problem.
I'm trying to get a div to resize when the text inside is rotated 90 degrees. Right now, the div stays the same width even though the text becomes "thinner" by rotating it.
I've got something like this:
html, body {
height: 100%;
margin:0px;
}
.pane {
width: auto;
float:left;
height: 100%;
border: 1px solid black;
}
.vertical {
display: block;
transform-origin: top right 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<div class="pane"><span class="vertical clearfix">This is text</span></div>
<div class="pane"><span>This is another Pane</span></div>
You can see a sample plunk here.
I'm trying to avoid using hardcoded heights or widths if possible.
when you use transform or position:relative; the initial space used by the element remains the same, it is only drawn different at screen.
Here if you want your rotated box to only use the width of one line height, you need to set this width and let content overflow.
translate can be used to replace content in sight
white-space:nowrap to keep text on a single line
and eventually, because of the rotated value used and the width reduced, you may use direction to push overflow in the opposite direction .
html,
body {
height: 100%;
margin: 0px;
}
.pane {
width: auto;
float: left;
height: 100%;
border: 1px solid black;
}
.vertical {
display: inline-block;
text-align: left;
float: right;
padding-right: 1em;
width: 0.25em;
white-space: nowrap;
direction: rtl;
transform-origin: top left;
transform: rotate(-90deg) translate(-100%);
}
<div class="pane">
<span class="vertical">This is text</span>
</div>
<div class="pane">
<span>This is another Pane</span>
</div>
Else you may use min-width , and a negative margin that virtually reduce elements width to none;
I would go for this one more simple and solid
html,
body {
height: 100%;
margin: 0px;
}
.pane {
width: auto;
min-width:1.2em;
float: left;
height: 100%;
border: 1px solid black;
}
.vertical {
display:inline-block;
padding-right:0.25em;
margin-right:-999px;
transform-origin: top left;
transform: rotate(-90deg) translate(-100%);
}
<div class="pane">
<span class="vertical">This is text</span>
</div>
<div class="pane">
<span>This is another Pane</span>
</div>
<div class="pane">
<span class="vertical">This is some more text</span>
</div>
I'm not sure what the proper terminology is for this effect. I want to say its a blend mode or clipping path thing. What I want to do is when the text get scrolled over (or under) another element to have the text change its color. See the example image below..
So the text is light gray by default then when it scrolls underneath (or over, not sure which way it should be stacked) that gray bar the text goes black.
I know I've seen this done before but just can't remember what the property used was called.
I think what you are looking for is mix-blend-mode but Browser Support still pretty bad Fiddle.
body {
height: 1000px;
}
.text {
text-transform: uppercase;
position: absolute;
top: 80%;
font-size: 50px;
font-weight: bold;
text-align: center;
width: 100%;
color: gray;
z-index: 2;
left: 0;
mix-blend-mode: difference;
}
.box {
width: 60%;
position: fixed;
transform: translate(-50%, 0);
z-index: 1;
left: 50%;
top: 0;
height: 100px;
background: #AAAAAA;
}
<div class="box"></div>
<div class="text">Lorem ipsum</div>
Do you mean something like this?:
<div style="position:absolute; top:0; left:0; bottom:0; right:0; overflow:auto;">
<div style="height:1000px; background-color:#ccc">
<br/><br/>EXAMPLE<br/>EXAMPLE<br/>EXAMPLE
</div>
</div>
<div style="position:absolute; top:0; left:0; height:50px; right:16px; background-color:white; opacity:0.5">
</div>
Example: https://jsbin.com/bexafinuti/edit?html,output
That feature can be made with css opacity. Content become grayed when scrolled under absolute positioned div with white background and half opacity