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.
Related
I have an absolute-positioned div with two children -- an absolute-positioned div and a static div which will scroll inside the parent. It looks like this:
<div class='frame'>
<div class='absolute-contents'>This should stay put.</div>
<div class='static-contents'>This should scroll under it.</div>
</div>
And here's the CSS:
.frame {
position: absolute;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
overflow-y: scroll;
}
.absolute-contents {
position: absolute;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
z-index: 9999;
opacity: .9;
padding: 40px;
}
.static-contents {
margin: 24px auto;
width: 400px;
height: 3000px;
padding: 40px;
}
I have the absolute child constrained to the edges of the parent, so why does it still scroll, and how can I make it stay put?
Example: https://codepen.io/anon/pen/wqZxXG
I resolved by putting the element I wanted to scroll in an absolute-positioned div with overflow-y: scroll like so:
<div class='frame'>
<div class='fix-me'></div>
<div class='scroll-me'>
<div class='long-content'></div>
</div>
</div>
And styling like this:
.frame {
background-color: blue;
position: absolute;
top: 40px;
right: 40px;
left: 40px;
bottom: 40px;
overflow-y: hidden;
}
.scroll-me {
background-color: orange;
position: absolute;
top: 40px;
right: 40px;
left: 40px;
bottom: 40px;
overflow-y: scroll;
}
.fix-me {
position: absolute;
z-index: 999;
top: 40px;
left: 40px;
right: 40px;
height: 56px;
background-color: purple;
}
.long-content {
width: 480px;
background-color: yellow;
height: 4000px;
margin: 20px auto;
}
Pen here: https://codepen.io/dustinlocke/pen/vJMzpK
You should adjust your child div to use position: fixed if you do not want it to move. position: absolute just tells a div that its initial position should be determined absolutely. See my answer here for more info on position: fixed and a similar scenario to yours.
Set the .frame div to position: relative (or a parent of .frame) for this to work. This will set the position: fixed child to be fixed within the position: relative parent of .frame.
You will need to adjust the positioning amounts (top, bottom, left, right) to account for the different stacking contexts.
Something like this: https://codepen.io/anon/pen/brJxVW
body {
width: 100vw;
}
.frame {
background-color: green;
position: relative;
width: calc(100vw - 80px);
margin: 0 auto;
top: 40px;
bottom: 40px;
overflow-y: scroll;
}
.absolute-contents {
background-color: yellow;
position: fixed;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
z-index: 9999;
opacity: .9;
margin: 40px;
}
.big-contents {
margin: 24px auto;
width: 400px;
height: 3000px;
background-color: white;
padding: 40px;
}
<div class='frame'>
<div class='absolute-contents'>This should stay fixed in the green frame. Why is it scrolling?</div>
<div class='big-contents'>This should scroll under it.</div>
</div>
So how can I set an element's inner position fixed to middle of screen? I was able to set the x-axis of the div by using text-align: center;.
So how could I center the y-axis just like I did the x-axis? And if that can't be done, what new method must I use?
Code:
.fixed{
text-align: center;
width: 100%;
height: 100%;
padding: 0px;
position: fixed;
background-color: #00FF00;
top: 0px;
overflow: hidden;
z-index: 99;
}
.popup{
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72, 72, 72, 0.4);
margin-bottom: 50px;
margin-top: 20px;
}
<div class="fixed">
<div class="popup"></div>
</div>
I updated your fiddle. Just make your popup class position fix and make top,left,bottom,right = 0 then margin:auto. See this updated fiddle.
.popup{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
https://jsfiddle.net/norxpmbr/
For .popup, try replacing this:
margin-bottom: 50px;
margin-top: 20px;
With this:
position: relative;
top: 50%;
transform: translateY(-50%);
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
So this is what I did to your code- removed the margins for popup and centered using transform and position: relative:
.popup{
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72,72,72,0.4);
margin : 0;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
revised fiddle
Snippet below:
.fixed {
text-align: center;
width: 100%;
padding: 0;
position: fixed;
background-color: #00FF00;
height: 100%;
top: 0;
overflow: hidden;
z-index: 99;
}
.popup {
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72, 72, 72, 0.4);
margin: 0;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
<div class="fixed">
<div class="popup">
</div>
</div>
div #introbox is not centering. I have used container as relative and introbox as absolute. I have set top,bottom,left and right as 0. Still box is not centring. I want to centre the introbox in the intropic.
html,body{
padding: 0;
margin:0;
}
.container{
width: 960px;
margin:0 auto;
position: relative;
}
#header{
width: 100%;
height: 120px;
border-bottom: 1px solid black;
}
#nav{
height: 55px;
border-bottom: 4px solid lightblue ;
}
#intro-pic{
height: calc(100vh - 181px);
width: 100%;
background: url("img/introbg.jpg") center fixed;
}
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left:0px;
}
<div id="header">
<div class="container">
Header
</div>
</div>
<div id="nav">
<div class="container">
Nav
</div>
</div>
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Using transform:translate will work for any size div.
html,
body {
padding: 0;
margin: 0;
height:100%;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
height:100vh;
}
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0, 0, 0, 0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* vertical centering */
}
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Find the below code.
Make left position 50% and give margin-left half of the wrapper width value.
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
left:50%;
margin-left: -400px; /* Half of the wrapper width */
}
Try below example if you are trying exact center (from top & left)
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px; /* Half of the wrapper width */
margin-top: -27.5vh; /* Half of the wrapper height*/
}
JSFIDDLE DEMO
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -27.5vh;
}
But again, .container should have height over or equal to #intro-box
There are many ways to center Elements:
using line-height:
you want to center text and you know the size of the box:
.box { background: red; height: 200px; }
.box span { display:block; text-align: center; line-height: 200px; }
<div class="box">
<span>Text</span>
</div>
using transform:
you want to center anything but dont know the size of your box:
.box, .box2 { background: red; height: 200px; }
.box span { top: 50%; text-align: center; position: relative; display: block; transform: translateY(-50%) }
.box2 span { top: 50%; left: 50%; position: relative; display: inline-block; transform: translate(-50%, -50%) }
<div class="box">
<span>Text</span>
</div>
OR WITHOUT TEXT-ALIGN:
<div class="box2">
<span>Text</span>
</div>
using absolute position:
you know the height of the element you want to center
.box, .box2 { background: red; height: 200px; position: relative; width: 100%; }
.box span { position: absolute; background: green; height: 50px; width: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; }
<div class="box">
<span></span>
</div>
There are even more ways to manage this.
I am trying to vertically and horizontally center a div inside another div that has the overflow: hidden I have successfully been able to horizontally center it, but not vertically.
HTML
<div class="outer">
<div class="inner">
<div class="content">
<p>Alot of content</p>
</div>
</div>
</div>
CSS
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
display: inline-block;
position: relative;
bottom: -50%;
right: -50%;
}
.content {
position: relative;
top: -50%;
left: -50%;
width: 500px;
height: 500px;
}
FIDDLE
Why is my top: -50% being ignored, but my left: -50% is working as expected?
DEMO
Actually fiddle is not clear.
I don't know about horizontal center. So I added it. But if you don't want it skip it.
For vertically center, you may try this:
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
display: inline-block;
position: relative;
text-align:center; //horizontal center
}
.content {
position: relative;
display: table-cell; //<-vertical center
text-align: center; //<-vertical center
width: 500px;
height: 500px;
}
You can always center any element using following code without negative margin hack.
The content will automatically align center from top, bottom, left, right
HTML:
<div class="outer">
<div class="content">
</div>
</div>
CSS:
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
position: relative;
}
.content {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
margin: auto;
}
Taken from this article, you can use a class like this as long as you have a declared height:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
If you add that class to your outer div everything should work.
I was trying to avoid using translate3d to solve this for older IE support, but in the end couldn't figure out why my top: -50% didn't work. :(
Here is the CSS I ended up with.
.outer {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.content {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 500px;
}
FIDDLE
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/