I want to vertical center a text inside a responsive div but I really don't find the way to do it without new CSS3 tricks..
Here a fiddle : http://jsfiddle.net/M8rwn/
.iosSlider {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
/* slider */
.iosSlider .Slider {
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .Slider .Slide {
float: left;
width: 100%;
}
.iosSlider .Slider .Slide img{
width: 100%;
height: auto;
}
.slider-prevContainer {
position: absolute;
top: 0;
left: 10px;
width: 50px;
height: 50%;
color: #595e62;
text-align: center;
}
.slider-nextContainer {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
opacity: 1;
color: #595e62;
background: blue;
}
.slider-next {
position:absolute;
height: 50%;
width: 100%;
top: 25%;
text-align: center;
vertical-align: middle;
background: red;
box-sizing: border-box;
font-size: 50px;
}
#single-slider {
float: left;
width: 500px;
height: 500px;
min-width: 0;
margin: 0;
border: none;
background: #000;
}
Okay, I think I have a solution.
Adjusted HTML:
<div class="slider-next">
<div id='slider-next-inner'>
>
</div>
</div>
Added CSS:
#slider-next-inner{
position:relative;
top:50%;
margin-top:-30px;
/* Margin-top is 1/2 the elements height (currently it is 59px) */
}
Link: http://jsfiddle.net/M8rwn/18/
Related
I have a demo here - https://codepen.io/mt-ttmt/pen/mLMGvr
I have a horizontally scrolling content div
I need to have a margin either side of this scrolling content.
I have done this using calc.
When page scrolls the scrolling content sticks to the top of the page using position: fixed;
When this happens I lose the margins.
How can I keep the margins with position: fixed;
html, body{
height: 100%;
}
body {
background: grey;
font-family: sans-serif;
margin: 0;
}
.upper-content{
background: red;
height: 250px;
}
.page-content{
position: relative;
background: white;
height: 2000px;
max-width: 900px;
margin: 0 auto;
}
.content-wrapper{
position: relative;
}
.header-scroll{
border: 1px solid yellow;
left: 50%;
overflow-y: scroll;
position: absolute;
max-width: 900px;
z-index: 20;
transform: translateX(-50%);
width: -webkit-calc(100% - 50px);
}
.content{
display: flex;
float: left;
div{
background: lightgrey;
font-size: 20px;
padding: 40px;
margin-right: 5px;
width: 100%;
&:last-of-type{
margin-right: none;
}
}
}
.fixed{
position: fixed;
top: 0;
//margin: 0 25px 0 25px;
//width: calc(100% - 50px);
}
Change your .fixed class width value.
.fixed{
width: calc(900px - 50px);
}
I have a section where it is to equal columns full width across. if you look a the 2nd column where it says content here if i do 100% on the jscroll-pane it shows horizontal bars, if i give it 98% it works properly but is not full width of the column. not sure why it adds horizontal bars to 100% but not 98%. I am not sure if foundation is causing my issue or not but if i take it out of the column and put in a row the 100% works fine just not in a large-6
html
<section id="component">
<div class="row expanded collapse">
<div class="large-6 column">
<img src="images/image.png">
</div>
<div class="large-6 column">
<div class="jscroll-pane">
Content Here
</div>
</div>
</div>
</section>
css
.jscroll-pane {
display: block;
width: 100% !important;
height: 400px;
max-height: 400px;
overflow: auto;
background-color: #fff;
}
#component {
padding: 0px;
background-color: #fff;
}
jscroll external css file
.jspContainer{
overflow:hidden;
position:relative;
height:100% !important;
width: 100% !important;
}
.jspPane{
position:absolute;
width: 100%!important;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #d8d8d8;
position: relative;
}
.jspDrag
{
background: #000;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Try this, Remove the display block and change overflow: auto to hidden; I believe this should help you.
.jscroll-pane {
width: 100% !important;
height: 400px;
max-height: 400px;
overflow: hidden;
background-color: #fff;
}
I'm trying to make a layout where the banner, the navigation and footer always stay fixed while you can scroll the content. I have seen some kinda similar layouts here but the actual page content is not limited there. What I want now is to center anything, but you better you maybe need something visual - what I got so far:
html
<body>
<div id="container">
<div id="banner"></div>
<div id="main">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
css
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: #222;
}
#container {
margin: 0 auto;
height: 100%;
width: 800px;
margin-top: 20px;
background-color: black;
}
#banner {
width: 100%;
height: 100px;
background-color: red;
}
#main {
height: 100%;
width: 100%;
}
#nav1 {
height: 100%;
width: 150px;
float: left;
background-color: yellow;
}
#nav2 {
height: 100%;
width: 100px;
float: right;
background-color: yellow;
}
#content {
height: 100%;
width: 100%;
background-color: white;
}
#footer {
width: 100%;
height: 30px;
background-color: lime;
}
jsfiddle: http://jsfiddle.net/gLhd6sno/1/
When scrolling I want only the content in the white area to move, also I cant figure out how to disable overflow without breaking that layout. Maybe you have an idea?
Thank you.
Here is one way of doing it that relies on absolute positioning.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: #222;
margin: 0;
}
#container {
width: 800px;
left: 50%;
margin-left: -400px;
background-color: black;
position: absolute;
top: 20px;
bottom: 0;
}
#banner {
width: 100%;
height: 100px;
background-color: red;
position: absolute;
top: 0;
}
#main {
width: 100%;
position: absolute;
top: 100px;
bottom: 30px;
}
#nav1 {
width: 150px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: yellow;
border: 2px dotted blue;
}
#nav2 {
width: 100px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: yellow;
border: 2px dotted blue;
}
#content {
position: absolute;
top: 0;
bottom: 0px;
left: 150px;
right: 100px;
background-color: tan;
border: 2px dotted blue;
overflow: auto;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
height: 30px;
background-color: lime;
}
See demo: http://jsfiddle.net/audetwebdesign/k9nsvt3t/
If you shrink the height, you will see a scroll bar appear around the content area,
which may do the trick. The rest of the page elements are static regardless of the
amount of content in the main area.
My problem is that I wanted to have split page by two divs side by side (50% width). Inside of them I wanted to place another divs and make them aligned vertically and horizontally at the same time.
I think that it is possible to make it without JS, but I'm not able to do that.
Can anybody make my two circles placed in the center (V,H) of their parent DIV, which are 50% of width and 100% of height so that when I will resize my window the circles will always be in center (and side by side as is now)?
Here is my code:
<div id="container">
<div class="left">
<div class="kolo1">
sometext1
</div>
</div>
<div class="right">
<div class="kolo2">
sometext 2
</div>
</div>
</div>
And a JSFiddle for that: http://jsfiddle.net/m5LCx/
Thanks in advance in solving my quest :)
It's actually quite simple, all you need to do is to simulate a table-like behaviour:
HTML markup:
<div id="container">
<div>
<div class="half left">
<div class="circle">hello</div>
</div>
<div class="half right">
<div class="circle">world</div>
</div>
</div>
</div>
CSS styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
}
#container > div {
display: table-row;
}
.half {
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
.half.left {
background: red;
}
.half.right {
background: blue;
}
.circle {
display: inline-block;
padding: 50px;
border-radius: 50%;
}
.half.left .circle {
background: blue;
}
.half.right .circle {
background: red;
}
Final result http://jsfiddle.net/m5LCx/11/:
Working here http://jsfiddle.net/3KmbV/
add position: relative in .left and .right class and than add margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; in .kolo1 and .kolo2 class. and remove top position from .left class
try it
body {
background-color: #006666;
margin: 0 auto;
height: 100%;
width: 100%;
font-size: 62.5%;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
}
.left {
width: 50%;
min-height: 100%;
float: left;
top: 0;
background-color: #660066;
position: relative;
}
.right {
width: 50%;
min-height: 100%;
float: right;
min-height: 100%;
background-color: #003366;
position: relative;
}
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
you can give postion: relative to .left and .right.
and give below CSS for to .kolo1 and .kolo2
margin: -5em 0 0 -5em;
position: absolute;
left: 50%;
top: 50%;
Updated demo
Another fiddle. This one uses absolute positioning with negative margins to ensure the circles are always in the centre. CSS looks like this
.kolo1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em; /* this must be half of the width */
margin-top: -5em; /* this must be half of the height */
}
As #Tushar points out, you need to set the position of the parent element to relative also.
Working Fiddle
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
Try adding padding-top:50% for parent divs (having class left and right)
I am trying to crate a vertically centered dialog with variable height. I'm using a technique with span element with height: 100% and vertical-align:middle within the container.
Now the dialog box has a max-height:80% set on it so that it doesn't take up the entire height of the container if it becomes small. When the container becomes small, the content are becomes smaller as well but I cannot get the content area to become scrollable when this happens..
Here is a simplified version in a fiddle.
HTML:
<div id="main">
<div id="overlay">
<span id="mickey-mouse"></span>
<div id="overlay-inner">
<div id="overlay-title">Title</div>
<div id="overlay-content">
<div id="content">MAKE ME SCROLL!</div>
</div>
</div>
</div>
</div>
CSS:
body, html {
position: relative;
width: 100%;
height: 100%;
position: relative;
background: yellow;
padding: 0;
margin: 0;
}
#main {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: aboslute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
}
#mickey-mouse {
display: inline-block;
height: 100%;
width: 0;
margin-right: -0.25em;
vertical-align: middle;
}
#overlay-inner {
text-align: left;
display: inline-block;
vertical-align: middle;
max-height: 80%;
max-width: 300px;
width: 80%;
background: white;
overflow: hidden;
}
#overlay-title {
padding: 1em;
height: 14px;
background: #eee;
}
#overlay-content {
padding: 1em;
/* HOW TO MAKE THIS SCROLLABLE? */
}
Here goes your fiddle code
fiddle
Here's the modified css
body, html {
position: relative;
width: 100%;
height: 100%;
position: relative;
background: yellow;
padding: 0;
margin: 0;
}
#main {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: aboslute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
}
#mickey-mouse {
display: inline-block;
height: 100%;
width: 0;
margin-right: -0.25em;
vertical-align: middle;
}
#overlay-inner {
text-align: left;
display: inline-block;
vertical-align: middle;
max-height: 90%;
height: 90%;
max-width: 300px;
width: 80%;
background: white;
overflow: hidden;
}
#overlay-title {
padding: 1em;
height: 5%;
background: #eee;
}
#overlay-content {
padding: 1em;
max-height: 80%;
overflow:auto;
}
Please try and let me know
EDIT:
three things have been done .
added overflow visible for content div. added overflow-auto for overlay-content
and set the height and width of overlay-inner, overlay-content in percentages