Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
I declare an absolute component inside a relative component. When I try to set the width as width: 870px it works.
But when I try to set width in per cent as width: 80% or using calc as width: calc(100% - 20px); the width does not change. Please guide me on how to use per cent for absolute components.
Here is my styled component code:
export const StyledFooter = styled.div`
width: 100%;
position: relative;
`;
export const EnrollContainer = styled.section`
position: absolute;
width: calc(100% - 20px);
max-width: 870px;
padding: 80px 120px;
top: 0%;
left: 50%;
transform: translate(-50%, -50%);
`;
Here is the JSX part:
return(
<StyledFooter>
<EnrollContainer>Hello</EnrollContainer>
</StyledFooter>
)
You have to set width of the parent (relative one), else it could not do a percentage on a unkown width parent
#relative{
position:relative;
width:150px;
border:2px solid black;
}
#absolute{
position:absolute;
width:50%;
border:2px solid red;
}
<div id="relative">
<div id="absolute"></div>
</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
i want to code a box like this
and completely using css and other web language ,
not the thing like svg ,
is it possible ?
it is simple when it's cuppy
but the problem is when convex
may some one help me?
The .rect::after has border-radius: 50% and a very long white shadow that will be visible only inside the .rect since the .rect element has overflow:hidden.
For the rect's shadow I'm using filter:drop-shadow(1px 1px 3px #000)
.rect {
position: relative;
height: 100px;
width: 300px;
margin:2em auto;
overflow:hidden;
filter:drop-shadow(1px 1px 3px #000)
}
.rect::after {
content: '';
border-radius: 50%;
background:transparent;
box-shadow: 0 0 0 60vw white;
display: block;
width: 100%;
height: 50px;
position: absolute;
left: 0px;
bottom:-25px;
}
<div class="rect"></div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am trying to absolutely position sideways text inside a div that there are multiple occurences of.
Each child has position: absolute; ,
and each parent has position: relative;
.parent{
width: 24%;
display: inline-block;
float: left;
border-left: 1px solid #FFA500;
position: relative;
}
.child{
display: inline-block;
line-height: 1.5;
height: 5%;
position: absolute;
top: 0px;
right: 0px;
transform: translate(0px, 100%) rotate(90deg);
overflow: hidden;
float: right;
}
Of of the children go to the same exact place on the page, which seems to be the first childs parent.
The structure is
Parent
child
close
close
for all 4 divs.
Can anyone please help?
In your css, if your parent has no content other than the absolute position child div, then the parent has a 0 height declaration - so you have to set the height of the parent div in pixels in order to give it a place in the DOM.
Your height: 5% on the .child may be what is throwing it off (it was for me). That, or there could be other css that is overriding something for you. Fiddle here: https://jsfiddle.net/tagb3yja/
.parent{
width: 24%;
display: inline-block;
float: left;
border-left: 1px solid #FFA500;
position: relative;
background: yellow;
}
.child{
position: absolute;
display: inline-block;
line-height: 1.5;
top: 0px;
right: 0px;
transform: translate(0px, 100%) rotate(90deg);
overflow: hidden;
float: right;
background: silver;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Any idea how to create that shape in CSS an how to keep it always centered while resizing ??
The point is to use transforms and set the transform-origin on the "fixed" point, here top right so :
transform-origin:100% 0;
Then you can rotate or skew your element :
DEMO
HTML :
<div></div>
CSS :
body{
background:gold;
}
div{
position:absolute;
width:100%; height:100%;
right:50%; top:0;
background:teal;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
Not a perfect Solution and needs some modification but should do the trick:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
margin-left:-1000px;
width: 4000px;
height: 2000px;
background-color: yellow;
}
.arrow {
width: 0;
height: 0;
border-top: 2000px solid red;
border-right: 2000px solid transparent;
}
You can see it here: http://codepen.io/anon/pen/vsaLc
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i got a div that looks like this:
+---------+
| |
+---------+
and I want to transform it like this:
+---------+
/ \
+-------------+
How can i do that ?
If you wish to use CSS transforms, see here
HTML
<div class='trapezoid'></div>
CSS
.trapezoid {
display: inline-block;
overflow: hidden;
margin: 0 3em;
/**outline: solid 1px;/**/
width: 10em;
height: 10em;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.trapezoid:before {
display: block;
background: red;
content: '';
}
.trapezoid:before {
width: 20em; height: 3em;
transform: rotate(-45deg) translate(-4.142em, -2.6em);
-webkit-transform: rotate(-45deg) translate(-4.142em, -2.6em);
}
For a simpler implementation, see this fiddle
HTML
<div></div>
CSS
div {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
margin-top:30px;
width: 100px;
}
If by "how to transform" you mean how to rotate on the x axis applying a perspective to achieve deepness, then you can do it by using CSS3 transform's perspective and rotate3d:
Running example
HTML
<div class="box">
Hover me
</div>
CSS
.box{
width: 300px;
height: 100px;
background: silver;
font-size: 4em;
margin: 100px;
}
.box:hover{
transform : perspective(400px) rotate3d(1, 0, 0, 50deg);
}
You may wanna read this other answer too.
Divs are square elements, so you can't transform the actual bounding box of the div to be trapezoidal. However, you can play with borders and box shadows to achieve visual effects like that. See CSS3 matrix3d rectangle to trapezoid transformation for some potential help.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having a problem with horizontally centering a DIV.
I have provided a full example here.
This is inside a Content Editor WebPart in SharePoint 2010 Standard.
http://fiddle.jshell.net/hdA7d/
<div class="weathercontainer">
<div id="weather" class="items" onClick="window.open( 'http://www.weather.com/weather/today/33196','_blank' ); return false; " >
</div>
</div>
.weathercontainer{
width: 100%;
}
.items {
width: 170px;
margin: 0px auto;
position: relative;
cursor: pointer;
}
Like this
demo
css
.center
{
left: 50%;
position: absolute;
top: 50%;
}
.center div
{
border: 1px solid black;
margin-left: -50%;
margin-top: -50%;
height: 100px;
width: 100px;
}
You can just give the absolutely positioned .items a left and right position of 0 and a margin of auto:
.items {
position:absolute;
margin: 0px auto;
left:0;
right:0;
}
See this updated fiddle.
Check if this works for you.
click here
display: table-cell;
vertical-align: middle;