I´m trying to desing a rabbit in css, but the divs in my main parent div aren't moving if I e.g. type "top: 20%"
The parent div is in position "relative" right now. I tried differend position attributes.
.rabbit{
--rabbit-skin: #965d00;
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 500px;
height: 500px;
background-color: white;
}
.rabbit-bottom{
top: 20%;
left: 20%;
width: 50%;
height: 75%;
background: var(--rabbit-skin);
border-radius: 50% 50% 40% 40%;
}
So I want the rabbit bottom to move. It's my main background for rabbits lower part. But it just flows to the upper right corner.
Use position:absolute if you are to position .rabbit-bottom relative to .rabbit
.rabbit {
--rabbit-skin: #965d00;
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 500px;
height: 500px;
background-color: white;
}
.rabbit-bottom {
top: 20%;
left: 20%;
width: 50%;
height: 75%;
background: var(--rabbit-skin);
border-radius: 50% 50% 40% 40%;
position: absolute;
}
<div class="rabbit">
<div class="rabbit-bottom">
</div>
</div>
Related
I have a parent div and a child div. The child div has the position: absolute property. It is already centered, but I'd like to align it to the middle of the parent div. How do I go about doing that? Here's my jsFiddle
HTML
<div id='parent'>
<div id='child'>
</div>
</div>
CSS
#parent {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 50%;
}
The solution is to use transform: translate(-50%, -50%) on the child div, like so:
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/jwoy7rxr/
This works because the transform positions the item based on a percentage from it's own point of origin.
Since the parent has a height based on px, you can safely use a simple margin top and bottom to centre the element.
#parent {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 0;
right: 0;
margin: 115px auto;
border-radius: 50%;
}
Here's the fiddle: https://jsfiddle.net/Lr3fLser/
You need to give the parent:
#parent {
width: 500px;
height: 500px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
#child {
width: 70px;
height: 70px;
background-color: blue;
border-radius: 50%;
}
You need the display table-cell in order to use the vertical-align.
Then add align="center" to the parent div's:
<div align="center" id="parent">
<div id='child'>
</div>
</div>
I have the updated JSFiddle attached:
https://jsfiddle.net/o7pzvtj3/2/
There is a parent container of relative width (50%) so that it responds to the size of the screen.
Now, I want a button at the bottom right corner of this parent container which stays fixed vertically. It works with position: fixed but then when i view it on different devices, i cannot get it to be positioned horizontally.
This is my html and CSS
<div class="container">
<div class="button"></div>
</div>
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
position: fixed;
bottom: 20px;
right: calc(50% - 190px);
}
Here is the link to codepen http://codepen.io/anon/pen/VmggdO
This looks fine but when you resize the screen horizontally, the button should stay just 30px inside of the yellow container horizontally - How do i achieve that? REMEMBER - THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL!
Using position absolute worked for me
.button {
height: 50px;
width: 50px;
background: red;
position: absolute;
bottom: 20px;
right: 30px;
}
EDIT:
With the new requirements of "THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL", this can be achieved by changing the html to this:
<div class="container">
</div>
<div class="button-container">
<div class="button"></div>
</div>
and the CSS to this:
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
margin-bottom: 20px;
float: right;
margin-right: 30px;
z-index: 100;
}
.button-container{
position: fixed;
bottom: 0px;
width: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
See the updated code pen: http://codepen.io/anon/pen/mOvvgJ
I am trying to create a div that is covers the browser window diagonally. See example here:
This is my CSS:
.shape {
height: 100%;
width: 150%;
transform: rotate(25deg);
}
This is my actual result:
I've tried a bunch of different things using transformOrigin and setting top and left of the div, but nothing seems to work to have this div centered diagonally across the browser.
You need to add these: transform-origin: center;
Also when width is more than 100% you need to move content its centered before rotate. Like Position: absolute; left: -25%;
body {
padding: 0px;
margin: 0px;
}
.frame {
width: 100vw;
height: 100vh;
background: #EFEFEF;
}
.rotated {
position: absolute;
left: -25%;
width: 150%;
height: 100%;
border: 2px solid blue;
transform: rotate(25deg);
transform-origin: center;
}
<div class='frame'>
<div class='rotated'></div>
</div>
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child
I have the following setup
Html:
<div id="resizable">
<div id="fixHeightTop">Whatever</div>
<div id="problematicDiv">Whatever</div>
<div id="semiProblematicDiv">Whatever</div>
<div id="fixHeightBottom">Whatever</div>
</div>
Css:
#resizable {
position: relative;
}
#fixHeightTop {
position: relative;
height: 10px;
}
#fixHeightBottom {
position: absolute;
height: 10px;
}
#problematicDiv {
position: relative;
float: left;
width: 80%;
overflow: auto;
}
#semiProblematicDiv {
position: relative;
float: right;
width: 20%;
overflow: auto;
}
The #resizable div is resizable (jQuery). What I need to do is to give to problematicDiv and semiProblematicDiv a height equal to 100% - fixHeightTop height - fixHeightBottom height so I can extend it on the full height of the resizable element. The problem is that I can't figure out a way to do it. If I use height: 100% it overlaps the bottom element.
Any ideas how to do that?
If I understood you right, you want to have two div with a fixed height and the two other divs show take up the rest of the height. If this is what you want, here is a way to do it.
#resizable {
height: 80px; //this is changed by JQuery, right?
}
#fixHeightTop {
height: 20px;
}
#fixHeightBottom {
height: 20px;
}
#problematicDiv {
position: relative;
float: left;
width: 80%;
overflow: auto;
height: 100%; //this helps the div taking up the space
}
#semiProblematicDiv {
position: relative;
float: right;
width: 20%;
overflow: auto;
height: 100%; //this helps the div taking up the space
}
i have an idea, try to use position:absolute;
#problematicDiv {
position: absolute;
top: 0px;
left: 0px;
width: 80%;
height: 100%; // Now you can apply height 100%
overflow: auto;
}
#semiProblematicDiv {
position: absolute;
top: 0px;
right: 0px;
width: 20%;
height: 100%; // Now you can apply height 100%
overflow: auto;
}
Good luck