I am making a portfolio website and I want to place two divs with little horizontal space between each other and a floating circle image in the center between them as so. The divs are the lighter ones. I was wondering how to style them and the image so that it floats betweet the divs with a little space.
I've tried
img {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 100;
}
div {
z-index: 90;
}
Please help me style these. I have no other ideas
You can use position: absolute and z-index
body {
background: #BD9EA4;
}
div {
width: 100%;
height: 100px;
position: relative;
margin: 10px 0;
background: #E6DADC;
z-index: 1;
}
div:first-child {
z-index: 2;
}
span {
background: white;
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
border-radius: 50%;
left: 50%;
transform: translate(-50%, 50%);
border: 2px solid black;
box-shadow: 0 0 0 8px #E6DADC;
}
<div><span></span></div>
<div></div>
Related
Hi I have a question about my code.
Here is my problem.
I have two items and one frame. Frame has position relative a two items (children) have position absolute. They should be always on the same point inside my frame but when I am resizing the position of children are different in relation with frame. How to make the children always stay on same position for responzive design? Is it possible?
Try to change height of window in example too (not only width)
https://codesandbox.io/s/adoring-jackson-c6fth?file=/index.html:0-900
.frame {
width: 70vh;
height: 90vh;
border: 10px solid red;
margin: 10px auto;
position: relative;
}
.objA {
width: 130%;
position: absolute;
height: 40%;
bottom: -10%;
left: -20;
border: 2px solid green;
background: rgba(10, 101, 10, 0.7);
z-index: 2;
}
.objB {
width: 10%;
position: absolute;
height: 20%;
bottom: 20%;
left: 30%;
background: red;
z-index: 1;
}
<div class="frame"></div>
<div class="objA"></div>
<div class="objB"></div>
I post here my real example image for better imagination what the problem is.
All objects are positioned absolute (Waves, stars, robot etc...) Each wave should in every resized situation be in same position. Good to know is that every wave is separatly.
Make sure the positions and heights/widths are all in percents and most important: place your items inside the main <div class="frame"></div> element. You can start this way:
* {
box-sizing: border-box;
}
body {
background: none #014653;
margin: 0;
}
.frame {
width: 70vw;
height: 90vh;
border: 10px solid #5cb9b8;
background: none #5cb9b8;
margin: 5vh auto;
position: relative;
border-radius: 6px;
}
.frame-stage {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #a2cece;
background: none #014653;
border-radius: 5px;
}
.objA {
width: 10%;
position: absolute;
height: 20%;
bottom: 10%;
left: -20;
border: 2px solid green;
background: rgba(10, 101, 10, 0.7);
z-index: 2;
}
.objB {
width: 10%;
position: absolute;
height: 20%;
bottom: 30%;
left: 30%;
background: red;
z-index: 1;
}
<div class="frame">
<div class="frame-stage">
<div class="objA"></div>
<div class="objB"></div>
</div>
</div>
Updated codesandbox here.
I'm trying to create a "button" with 2 sections (each is 50% of the height of the div) separated by an horizontal bar. Each of the sections has centered text. The size of the button is going to be manipulated using javascript, and I'm trying to avoid also using javascript to position the elements inside the "button".
What I have so far is http://jsfiddle.net/u5u7d31p/2/, but i'm having a problem centering the horizontal bar. If I change the position of the separator to relative, the bar is centered, but then it changes the position of the bottom part of the text. I can also change the margin to a static value (margin: 0 63px;) to center it, but I would like to avoid it if there is an easier solution that doesn't require javascript.
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
Any ideas? Thanks.
All codes are ok. Just put this css below to .img_overlay .separator class.
Full code is below:
.img_overlay .separator {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
right: 0;
}
view my demo on jsfiddle
.img{
float: left;
background-repeat:no-repeat;
background-size:100% 100%;
border-radius: 4px;
width: 200px;
height: 51px;
background: red;
overflow: hidden;
}
.img_overlay{
width: 100%;
height: 100%;
background: #222;
color: #ddd;
position: relative;
opacity: 0.8;
}
.img_overlay>div{
display: block;
width: 100%;
height: 50%;
text-align: center;
position: relative;
}
.img_overlay .middle{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.img_overlay .separator{
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
<div class="img">
<div class="img_overlay">
<div class="img_show_details">
<div class="middle">details</div>
</div>
<div class="img_open">
<div class="separator"></div>
<div class="middle">open</div>
</div>
</div>
</div>
All I did was taking off :
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
}
This following fix works okay in firefox and chrome but mess in IE.
I fixed height in div, top in middle and top in separator
.img_overlay>div {
display: block;
width: 100%;
height: 40%;
text-align: center;
position: relative;
}
.img_overlay .middle {
position: relative;
top: 60%;
transform: translateY(-50%);
}
.img_overlay .separator {
position: relative;
top: 5px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
here's the demo in jsfiddle.
I want to center 4 small, square child divs along each edge of a square parent div. My current solution depends on hacked-together absolute positioning. http://jsfiddle.net/Lrc4h/
HTML:
<div class="tile">
<div class="tile_inner"></div>
<div class="exit_left"></div>
<div class="exit_right"></div>
<div class="exit_up"></div>
<div class="exit_down"></div>
</div>
CSS:
.tile {
float: left;
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
}
.tile_inner {
width: 120px;
height: 120px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid white;
}
.exit_left {
position: absolute;
top: 90px;
width: 20px;
height: 20px;
border: 3px solid pink;
}
.exit_right {
position: absolute;
left: 165px;
top: 90px;
width: 20px;
height: 20px;
border: 3px solid red;
}
.exit_up {
position: absolute;
left:90px;
top:10px;
width: 20px;
height: 20px;
border: 3px solid blue;
}
.exit_down {
position: absolute;
left:90px;
top:165px;
width: 20px;
height: 20px;
border: 3px solid green;
}
How can I get each of the exit directions centred along the edge of each axis?
Here is an updated snippet: http://jsfiddle.net/Lrc4h/3/
First of all you need to know that when you're using position: absolute the element will position with absolute coordinates based on the first parent that is position: absolute or position: relative falling back to the document if there is none.
Secondly it's important, when dealing with borders like in your example, to understand the box model and how nasty things get when borders cross the borders ;-). It's a common practice to use box-sizing: border-box to make things a bit easier and to mix relative and absolute units nicely. I've included a box model initialization how I prefer it on the top of the example I've posted.
Combining all this together you can start use relative units (percentage) in your absolute positioning. The example I've posted is still using absolute positions but relative to the .tile element. You should always make your absolute positions relative to a parent. Using left: 50% centers the start of your element to the center of your parents width. However, as your exit element also has a width this needs to be compensated by half of it's width. That's why there is a margin-left: -15px. You could also use the calc function if browser support is IE9+. This would look like this: left: calc(50% - 15px).
As you can see the example still has absolute positions and this problem is easy to solve with absolute positioning. You still have to "hard code" a few values, but they are all relative to the parent and you can easily change your .tile dimensions without changing the child elements.
Cheers
Gion
.tile_inner {
width: 120px;
height: 120px;
position: relative;
top: 50%;
left: 50%;
margin: -60px 0 0 -60px;
border: 1px solid white;
}
You just need to adjust the margin
Demo
.tile_inner{
margin: -60px 0 0 -60px;
}
Maybe as not as clean as it can get, but you can use the calc function to use percentages in conjunction with pixels (based on the width & height of the child divs. For example (I'm including only the changes to the CSS code:
.tile {
position: relative;
}
.exit_left {
top: calc(50% - 13px);
}
.exit_right {
left: calc(100% - 26px);
top: calc(50% - 13px);
}
.exit_up {
left: calc(50% - 13px);
}
.exit_down {
left: calc(50% - 13px);
top: calc(100% - 26px);
}
In that way, even when you change the parent div's dimensions, the child divs will remail in place.
Demo: http://jsfiddle.net/xPP32/
Here's slightly optimized version that relies on pseudo-elements and relative units of measurement (%). Scaling this one is a breeze. All you need to do is change the height and width on the .tile and the rest is taken care of. Here's the original square: http://jsfiddle.net/MGse6/. And, here's a square scaled up: http://jsfiddle.net/k9dxW/.
HTML:
<div class="tile">
<div></div>
</div>
CSS:
*, :before, :after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
.tile {
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
position: relative;
}
.tile > div {
width: 65%;
height: 65%;
border: 1px solid #fff;
margin: 17.5% auto 0;
}
.tile:before,
.tile:after,
.tile > div:before,
.tile > div:after {
content: "";
position: absolute;
width: 16%;
height: 16%;
border: 3px solid;
}
.tile:before {
top: 0;
left: 50%;
margin-left: -8%;
border-color: blue;
}
.tile:after {
top: 50%;
right: 0;
margin-top: -8%;
border-color: red;
}
.tile > div:before {
bottom: 0;
left: 50%;
margin-left: -8%;
border-color: green;
}
.tile > div:after {
top: 50%;
left: 0;
margin-top: -8%;
border-color: pink;
}
And, here's another solution where elements are arranged using flow: http://jsfiddle.net/xep9M/.
HTML:
<div class="tile">
<!--
It's very important
to have the divs stack
next to each other
-->
<div></div><div></div><div></div><div></div><div></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
.tile {
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
box-sizing: content-box;
}
.tile > div {
width: 16%;
height: 16%;
display: inline-block;
border: 3px solid;
}
.tile > div:first-of-type,
.tile > div:last-of-type {
display: block;
margin: 0 auto;
}
.tile > div:first-of-type {
margin-bottom: 1.5%;
border-color: blue;
}
.tile > div:last-of-type {
margin-top: 1.5%;
border-color: green;
}
.tile > div:nth-of-type(3) {
height: 65%;
width: 65%;
border: 1px solid #fff;
}
.tile > div:nth-of-type(n + 2) {
vertical-align: middle;
}
.tile > div:nth-of-type(2) {
margin-right: 1.5%;
border-color: pink;
}
.tile > div:nth-of-type(4) {
margin-left: 1.5%;
border-color: red;
}
I have a div (fixed) which acts like a pop up:
<body>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
</body>
This css allows the container to be horizontally centered (having a 100% width makes everything behind it unclickable; thus, I set it to 1px):
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 1px;
z-index: 9999;
}
.popup-item {
display: block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
However, I am unable to center .popup-item due to the parent element .popup-container being smaller than its child. How do I center .popup-item while still being able to click it (pointer-events: none entirely disabled it)?
Vote to Close almost has it, but with the 1px width, the element doesn't get centered.
Do this instead:
.popup-container {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
text-align:center;
height:0px;
}
.popup-item {
display: inline-block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
This will make it centered, because the container is 100% wide. However, pointer-events:none; will allow you to click through to anything below it.
A couple of solutions.
First, you can make the child of the container centered using translateX() transform: http://jsfiddle.net/Yjz5R/. The same effect can be accomplished using negative margins, but the width for the container's child has to be set: http://jsfiddle.net/9Qmza/.
CSS:
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Or second, you can make the container "immune" to click events:
Markup:
<input type = "checkbox" id = "clickToggle" />
<label for = "clickToggle">Click me</label>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
Styles: http://jsfiddle.net/CVfHt/.
.popup-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(200, 200, 200, 0.5);
pointer-events: none;
}
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: all;
}
input[type = "checkbox"] {
display: none;
}
input[type = "checkbox"] + label {
cursor: pointer;
}
input[type = "checkbox"]:checked ~ div {
display: none;
}
Lastly, a question/comment. If you do not want the container to be visible, then why use it at all? Just keep the markup of the child and get rid of the container: http://jsfiddle.net/yvc4E/.
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto; /* remove this line - unnecessary*/
margin-right: auto; /* and this line, remove */
width: 1px;
z-index: 9999;
text-align: center; /* add this */
}
.popup-item {
display: inline-block; /* change to inline-block */
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
I have a relatively div positioned on top of a fixed position div and I would like to vertically align this first div. Is there a way to do this? This is my current markup:
<div class="overlay">
<div id="dialogInvoice">
content
</div>
</div>
The CSS:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
width: 390px;
height: 722px;
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: relative;
}
Any suggestions on this? I did try the line-height method but this is apparently only working when using mere text.
If your element does not have a fixed width or height then you can't use the other solutions without using javascript to calculate the values.
Here is an alternative.
#dialogInvoice {
width: 390px;
height: 722px;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
what you need to add to your css of #dialogInvoice is
top: 50%;
and change the margin to
margin: 361px auto;
(361 is 722 / 2)
it will first push your container half way down the page and then push it back up the required value, which is exactly half of its height (361px)
here is a jsfiddle for better understanding.
This CSS may do what you require:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
top: 100px;
bottom:100px;
left:100px;
right:100px;
}