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;
}
Related
I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
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.
I am a novice in CSS and I have not yet solved what I am trying to achieve.
I want the items of a horizontal menu to be centered regardless of the monitor resolution. Here is my code:
The HTML semantic:
<body>
<div class="inicio_m"></div>
<div id="menu">
<div id="cab_menu" class="clearfix">
<div class="conteudo_menu clearfix">
Item 1
Item 2
Item 3
Item 4
</div>
</div>
</div>
</body>
This is the CSS format:
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
#cab_menu {
width: 100%;
position: relative;
}
#cab_menu a {
padding: 20px 10px;
float: left;
color: #FFFF40;
}
.clearfix { display: block; }
.conteudo_menu {
width: 100%;
margin: 0 auto;
}
I posted on Fiddle for a more convenient check:
http://jsfiddle.net/nQXd7/
Thanks in advance
Remove the floats and use display:inline-block instead. Then add text-align:center to the wrapping element.
JSFiddle
CSS
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
#cab_menu {
width: 100%;
position: relative;
}
#cab_menu a {
font-size: 12px;
font-weight: bold;
padding: 20px 10px;
display: inline-block;
color: #FFFF40;
}
.clearfix {
display: block;
}
.conteudo_menu {
width: 100%;
margin: 0 auto;
text-align: center;
}
Please remove the unwanted codes in css, try this one in order to make the menus just simply centered.
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
.conteudo_menu {
text-align: center;
}
#cab_menu a {
padding: 20px 10px;
color: #FFFF40;
display: inline-block;
}
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
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/