So I want to center "innerDiv1" vertically and horizontally in "outerDiv".
"innerDiv1" has to be position absolute, so "innerDiv2" can over lap it.
I have tried line-height, this doesn't work because "outerDiv" can change size. Line-height doesn't react to percentage the way I want it to.
Here's my snippet:
html, body {
margin: 0;
}
.wrapper {
background: lightblue;
width: 300px;
height: 300px;
}
.outerDiv {
background: red;
height: 50%;
width: 50%;
}
.innerDiv1 {
background: seagreen;
position: absolute;
}
.innerDiv2 {
background: rgba(255,255,255,0.5);
height: 100%;
}
<div class="wrapper">
<div class="outerDiv">
<div class="innerDiv1">Hello World!</div>
<div class="innerDiv2"></div>
</div>
</div>
Thanks for your help.
See for yourself. See the comments in the CSS on what you need to include.
html, body {
margin: 0;
}
.wrapper {
background: lightblue;
width: 300px;
height: 300px;
position: relative; /* 1. Add this. */
}
.outerDiv {
background: red;
height: 50%;
width: 50%;
position: absolute;
top: 25%; /* 2. Add this. */
left: 25%; /* 3. Add this. */
}
.innerDiv1 {
background: seagreen;
position: absolute; /* 4. Add this. */
top: 50%; /* 5. Add this. */
left: 50%; /* 6. Add this. */
transform: translate(-50%, -50%); /* 7. Add this. */
text-align: center; /* 8. Add this if you want the text to be centered. */
}
.innerDiv2 {
background: rgba(255, 255, 255, 0.5);
height: 100%;
top: 50%;
left: 50%;
}
<div class="wrapper">
<div class="outerDiv">
<div class="innerDiv1">Hello World!</div>
<div class="innerDiv2"></div>
</div>
</div>
Add this to your css:
.outerDiv {
position: relative;
}
.innerDiv1 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
Related
I need to create this custom shape with only CSS3.
Need to be with CSS, not svg.
I was trying to use the snippets of this link: Wave (or shape?) with border on CSS3 but i don't know how to manipulate shapes properly.
Also can be only the center shape! I'm testing with this pen: https://codepen.io/Blumenkranz/pen/vYEeLjr
#mixin push--auto {
margin: {
left: auto;
right: auto;
}
}
#mixin pseudo($display: block, $pos: absolute, $content: "") {
content: $content;
display: $display;
position: $pos;
}
.section {
width: 100%;
height: 50vh;
background: $blue-dark;
position:relative;
&::after, &::before {
#include pseudo;
#include push--auto;
bottom: -46px;
left: 35%;
width: 250px;
height: 150px;
background: $blue-dark;
border-radius: 100%;
}
}
I don't know why you want to make this using only css, as svg would be much simpler, but here you go. I made an approximation of your shape, which you can easily adjust, using a similar technique to the one you linked.
Here is the code. I'm using display flex on the body and margin auto on the container to position it in the center of the page for display purposes.
body {
display: flex;
height: 100vh;
}
.container {
margin: auto;
position: relative;
}
.shape {
width: 200px;
height: 200px;
background-color: #157995;
transform: rotate(45deg) skew(-10deg,-10deg);
clip-path: polygon(68% 100%, 100% 68%, 100% 100%);
border-radius: 15%;
}
.bar {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 12px;
background-color: #157995;
}
.container::before, .container::after {
content: "";
position: absolute;
width: 50px;
height: 20px;
background-color: white;
z-index: 1;
bottom: 0px;
}
.container::before {
left: 12.4px;
border-top-right-radius: 50%;
transform: skew(55deg);
}
.container::after {
right: 12.4px;
border-top-left-radius: 50%;
transform: skew(-55deg);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="bar"></div>
<div class="shape"></div>
</div>
</body>
</html>
A little bit late to the party here, but this was my effort using:
a transparent container (with a visible top border)
two background-coloured pseudo-elements inside the transparent container
a slim horizontal rectangle; and
a circle
Working Example:
.line {
position: relative;
height: 30px;
border-top: 1px solid rgb(0, 123, 149);
overflow: hidden;
}
.circle {
position: absolute;
top: -80px;
left: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: rgb(0, 123, 149);
border-radius: 50%;
}
.rectangle {
position: absolute;
top: -1px;
left: calc(50% - 64px);
width: 128px;
height: 12px;
background-color: rgb(0, 123, 149);
}
.line::before,
.line::after {
content: '';
position: absolute;
top: -1px;
z-index: 24;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
}
.line::before {
left: calc(50% - 110px);
}
.line::after {
right: calc(50% - 110px);
}
<div class="line">
<div class="rectangle"></div>
<div class="circle"></div>
</div>
I am trying to overlap two elements using only CSS.
So far I have found one way of doing this. I am however wondering if there are other/better ways of accomplishing this.
The only method I have found, when moving two elements closer vertically, is to subtract a bottom-margin from te bottom element. This is to account for the left over space - and then to subtract the same margin from the upper element to move it down. I have not used this method before and I wonder if it is the best way of accomplishing this overlapping effect?
body {
width: 100%;
height: 100%;
background: lightgrey;
}
.bottom, .top{
width: 20%;
padding-bottom: 20%;
}
.top {
background: blue;
margin-bottom: -250px;
}
.bottom {
padding-top:250px;
margin-bottom: -250px;
background: red;
overflow: hidden;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div class="top"></div>
<div class="bottom"></div>
html, body {
margin: 0;
padding: 0;
}
.parent {
position: relative;
width: 20%;
}
.child {
height: 200px;
background-color: blue;
}
.child--foreground {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
border-radius: 30px;
}
<div class="parent">
<div class="child child--background">
Background
</div>
<div class="child child--foreground">
Foreground
</div>
</div>
if you're trying to place an element over another, I think you should use positioning https://css-tricks.com/almanac/properties/p/position/
I think that's more simple
body {
width: 100%;
height: 100%;
background: lightgrey;
}
.bottom, .top{
width: 20%;
padding-bottom: 20%;
}
.top {
background: blue;
}
.bottom {
background: red;
border-radius: 50% 50% 0 0;
padding-top: 250px;
transform: translateY(-50%);
}
<div class="top"></div>
<div class="bottom"></div>
I have a play image which needs centering over another image. I'm using percentages, to try to have it working on all devices, but the percentages are not acting like they should. I have taken screenshots of the mobile site in portrait and landscape, you can find them here http://imgur.com/a/gN53f
The desktop site has an entirely different row which is hidden on small devices, the code below is visible exclusively on the mobile site.
Here's the css:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 30%;
left: 43%;
z-index: 2;
}
working, sort of. The HTML:
<div class="parent">
<img class="image1" src="https://placehold.it/1"/ alt="1">
<img class="image2" src="https://placehold.it/2"/ alt="2">
</div>
I made your .image1 class a block element, centered the image and using transform property brought image2 in the center
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
margin: 0 auto;
display: block;
z-index: 1;
}
.image2 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
<div class="container">
<div class="parent">
<img class="image1" src="http://kingofwallpapers.com/image/image-025.jpg" alt="1" />
<img class="image2" src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" alt="2" />
</div>
</div>
You’ve set .image1 to be relative, but this won’t have an impact on .image2 since it is not a child of .image1. Also it is unclear what sizes the images will have.
If the second image should always scale up and down with the first one, keeping it’s position, it could be done like so:
.parent {
margin: 0 auto;
max-width: 960px; /* i. e. never exceed 960px in width = max-width of .image1 */
position: relative;
}
.image1 {
display: block;
width: 100%;
}
.image2 {
left: 25%;
position: absolute;
top: 25%;
width: 50%;
}
.image2 would have a 25% distance of .image1’s height/width to top, left and right.
Changed size of image to demonstrate properly
Gave width to parent div to absolute position
.parent {
position: relative;
top: 0;
left: 0;
width: 300px;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 32%;
left: 32%;
z-index: 2;
border: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
<img class="image1" src="https://placehold.it/300x300"/ alt="1">
<img class="image2" src="https://placehold.it/100x100"/ alt="2">
</div>
</body>
</html>
I your first image dictate the size of the parent container, then you should position your images like this (for my code, I've use divs with fixed size. You could give your images display: block)
.parent {
position: relative;
border: 2px solid gray;
}
.child-1 {
height:300px;
width: 300px;
background: lightgreen;
margin: 0 auto;
}
.child-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: salmon;
height: 50px;
width: 50px;
}
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
About responsiveness, use 'media query'
set width for image 2, for example, 50%
now set left: 25%
I need to make something like this , how can I make the square on the middle between this two? Here is the CSS and Photo
My Css
#up{
width:100%;
height:30%;
}
#down{
width:100%;
height:70%;
}
#square{
width:40px;
height:40px;
}
Can I setting the square without counting the percentage of the location of the middle line? (because I want to add all something like this into all sessions of the web , and the height of the session will responsive by the text length
You need to use position relative to outer div and position relative to inner div
here is the link how can you do it
fiddle
.one,
.two,
.three {
width: 100%;
height: 50px;
}
.one {
background: yellow;
position: relative;
}
.two {
background: green;
}
.three {
background: red;
}
.square {
position: absolute;
bottom: -10px;
right: 30px;
height: 20px;
width: 20px;
background: white;
}
<div class="one">
<div class="square">
</div>
</div>
<div class="two">
</div>
<div class="three">
</div>
You can have a <div> square as:
<div id="div1"></div>
in CSS:
#div1{
border: 1px red;
height: /*enter the height */
width: /* enter the width */
position: relative;
left: /*enter the distance */
right: /*enter the distance */
top: /*enter the distance */
bottom: /*enter the distance */
z-index: 100 /* make sure other div's have z index lesser than this div's */
}
Put the square INTO the second div, give it a position: absolute and a top: -20px (and left: Xpx- i.e. whatever you need/want).
You can easily do this with position:absolute to your small box div.
Here is the solution that can help you
body,
html {
height: 100%;
margin:0px;
}
#up {
width: 100%;
height: 30%;
background: red;
}
#down {
width: 100%;
height: 70%;
background: blue;
}
#square {
width: 40px;
height: 40px;
background: green;
position: absolute;
top: calc(30% - 20px);
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 1;
}
<div id="up"></div>
<div id="down"></div>
<div id="square"></div>
I would like to know if it's possible to recreate the following image using css.
I am currently using it but in svg format.
Imagine this:
jsfiddle link
#circle {
background: #ccc;
border-radius: 50%;
/* Change these two equally to change circle size. Can be pixels, too. */
width: 25%;
padding-top: 25%;
height: 0;
position: relative;
}
.hand {
background: black;
width: 1px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
}
.hand:nth-child(2) {
transform: rotate(90deg);
}
.hand:nth-child(3) {
transform: rotate(45deg);
}
.hand:nth-child(4) {
transform: rotate(135deg);
}
#circle:after {
content: '';
display: block;
width: 80%;
height: 80%;
border-radius: 50%;
background: white;
position: absolute;
top: 10%;
left: 10%;
}
<div id="circle">
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
</div>
Or if you need the middle to be transparent (this is a little hacky, and you may have to modify it to fit your exact needs): https://jsfiddle.net/wdoe8r3m/1/