I can't figure out, on how to go around this problem for moving content within two pages + outside content.
I have following layout:
header + footer
book
pages with fixed width and height.
I want to scroll pages content from the main scrollbar without any page scroll bar (like gmail compose example)
The main problem is. book will show after header and if user is using smaller screen resolution, it will show scrollbar to scroll down to see book properly.
Then we have two pages, which content are different from each other and each page can be longer then the other one. so we want to scroll through all the data, before we continue scrolling back to footer again.
jsFiddle Example: http://jsfiddle.net/7vqzF/2/
It would be awesome to solve this from css only.
Layout Structure: (solution should have only one main browser scrollbar, to control the pages and outside book content from it.)
If I got your question right you are looking for the CSS attribute fixed. Here is some HTML including CSS that might do exactly what your are after:
<html>
<head>
<style>
body {
margin-top: 150px;
}
.header {
width: 100%;
position: fixed;
top: 0;
background-color: white;
border-bottom: 2px solid lightblue
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
background-color: white;
border-top: 2px solid lightblue
}
.book table td {
vertical-align: top;
}
.page1, .page2 {
border: solid 1px red;
width: 400px;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<ul>
<li>home</li>
<li>contact us</li>
</ul>
</div>
<div class="book">
<table>
<tr>
<td>
<div class="page1">
<h2>Page1</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
...
</div>
</td>
<td>
<div class="page2">
<h2>Page2</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
...
</div>
</td>
</tr>
</table>
</div>
<div class="footer">
My Footer
</div>
</body>
</html>
Here is a screenshot from my browser showing the above HTML:
The Browser-Scrollbar scrolls only the page1/page2 <div> elemtents but not the header and footer elements.
And finally here is the jsFiddle Link for the online-demo.
Put your header part which needs to be in fixed in separate div and apply these styles.
<div class="fix">
<h1> Header</h1>
<menu><ul><li>home</li><li>contact us</li></ul></menu>
</div>
.fix{
position:fixed;
top:0px;
left:0px;
background:#FFF;
width:100%;
border-bottom:1px solid black;
}
for space add another div to bottom of the header
<div class="space"></div>
.space{
width:100%;
height:150px;
}
Here is the jsfiddle.
You can use the following approach with pure CSS and no tables.
See online demo here.
Result:
It means however that you need to change the document structure a little (I am using HTML5 elements but this can easily be changed into normal divs if required) - as you can see the structure is fairly simple:
<header>Header
<nav>Menu</nav>
</header>
<main>
<div class="page">
<h3>Page 1</h3>
scroll from main scrollbar
....
</div>
<div class="page">
<h3>Page 2</h3>
scroll from main scrollbar
....
</div>
</main>
<footer>Footer</footer>
Now it's just a matter of styling this so that you can use main scroll-bar to scroll "both" pages. The essential class in this context is:
.page {
float:left;
margin:70px 10px 50px 10px;
border:1px solid #000;
width:45%;
}
The important part with the page class is that its top and bottom margin is set to match header and footer. This is what makes the two pages visible even if the header and footer are fixed.
The rest of the CSS is just for example:
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
header {
position:fixed;
top:0;
width:100%;
height:70px;
font:32px sans-serif;
color:#fff;
background:#555;
}
nav {
position:absolute;
bottom:0;
font:12px sans-serif;
}
footer {
position:fixed;
width:100%;
bottom:0;
height:50px;
background:#555;
}
Related
I am having an issue with the position-fix; top 100px;. when I use position-fix; top 100px; and run the program, the result will be "google scroller doesn't show up on the screen". when I don't use when I use position-fix; top 100px; then google scroller shows up on the screen.
Here is the HTML code.
<body>
<section class="container">
<div style="position:fixed; top:180px" class="First">
<ul id="ListName" class="">
<li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
</ul>
</div>
<div style="position:fixed; top:180px;" class="Second">
<h1 align="center"> sport</h1>
<p>
<ul>
<li> soccer and,</li>
<li> football </li>
</ul>
</p>
</div>
</section>
<div id="" class="" style="clear:both;"></div>
</body>
Here is the CSS code.
<style>
.container {
width: 99%;
height: auto;
margin: auto;
padding: 10px;
font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
}
.First {
height: auto;
width: 20%;
background: white;
border:1px solid #666;
float: left;
}
.Second {
margin-left: 21%;
height: auto;
width:640px;
border:1px solid #666;
background: white;
}
</style>
Your requirement is bit confusing, it's not clear that whether you want to make the second div inside the section element scrollable then you can do it by adding a height or max-height property to the Second class.
Same holds true for any container scroll bar appear only when the content inside a div or any container exceeds the height specified.
If you want to make second div scrollable, you need to do following.
.Second {
height:100px !important;
overflow-y: scroll !important;
margin-left: 21%;
height: auto;
width: 640px;
border: 1px solid #666;
background: white;
}
If you want to make body element scrollable then you can set a height property or when your content increases the automatically body will be scrollable.
checkout the fiddle here.
I have added a width property to the second div in order to make it fit in the fiddle window.You may remove it. Also pasted some sample text inside body to demonstrate that body is scrollable when it has enough text or if you want a set a fix height you can do that as well.
NOTE: you need to set the property value with !important so that it overrides and forces browser to apply that css.
height:100px !important;
Hope it helps!!
So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers
Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>
I'm working on a mobile site page, I got two divs in a parent roughly set up like so:
<div id="parent">
<div id="left" style="float:left;"> </div>
<div id="right" style="float:right;"> </div>
</div>
They both have a min-width and margin set.
They display next to each other fine. But I want to set it up so that if the width is too small (say on an iphone), they span two lines and take up the whole width of the page by itself.
At the moment, I can't get the width to dynamic jump to 100% of the page when they span two lines. All it does is the left div sticks to the left and the right div to the right.
I've read somewhere about using inline block, and toying with the overflow and position but I can't get it to work.
Any tips or suggestions?
Thanks.
edit:
Here's the css I'm using at the moment
<div style="width:96%;">
<div style="float:left; min-width:220px; margin:10px auto 5px auto;">
content
</div>
<div style="float:right; min-width:230px; margin:0px auto 5px auto;">
content
</div>
</div>
Try this
CSS
#parent {
border : 2px solid #000;
overflow:hidden;
}
.parent div {
min-height: 200px;
padding: 10px;
}
#left {
background-color: gray;
float:left;
margin-right:20px;
width:140px;
}
#right {
background-color: white;
overflow:hidden;
margin:10px;
min-height:170px;
}
#media screen and (max-width: 400px) {
#left {
float: none;
margin-right:0;
width:auto;
border:0;
}
}
HTML
<div id="parent">
<div id="left">left</div>
<div id="right">right</div>
</div>
DEMO
You have to set media queries for the style tags. Take the CSS out of the inline and set them in the stylesheet instead.
#media only screen and (min-width: 481px) {
#left {float:left;}
#right {float:right;}
}
The DIVs then only float to the left and right if the screen is wider than 480px:
<div id="parent">
<div id="left" > </div>
<div id="right"> </div>
</div>
sorry if the context already exists in other SO thread. I didnt found anyone, so I am posting it.
I have two elements(tabs) in the container(body) both are overflowing. when I try to scroll one tab, the hidden tab content also scrolling. I think, this is because both elements bound to the window.
<div class="header">
<ul>
<li data-tabid="tab1" class="tab">Tab1</li>
<li data-tabid="tab2" class="tab">Tab2</li>
</ul>
</div>
<div class="tabContainer">
<div class="tab1 tabpanel">
<!-- overflowing content -->
</div>
<div class="tab2 tabpanel">
<!-- overflowing content -->
</div>
</div>
CSS
body{
height:100%;
overflow-x:auto;
}
.header{
position:fixed;
top:0px;
height:50px;
}
.tabpanel{
position:absolute;
top:50px;
}
Demo
How to prevent scrolling on hidden element?
Here is a working demo, the solution is come up with setting both ends fixed and scrolling content. This should give effect like bound to the container.
.tabpanel{
position:absolute;
top:0px;
bottom:0px;
display:none;
min-height:100%;
height:auto;
width:100%;
overflow:auto;
}
.tabpanel .inner{
width:100%;
height:150%;
margin-top:60px;
}
http://jsfiddle.net/kongaraju/P6XWH/2/
Bascially you didnt set the height of your tabs, and neither did you apply an overflow to it. Doing that would solve the issue.
If you prefer to have the tabs 100% height, you would need a div within a div. In the outer div set your 100% height, in the inner div set a top padding of the height of the tab-selection.
Like this:
<div class="tab">
<div class="inner">
* tab content *
</div>
</div>
With css
.tab { height:100%; }
.inner { margin-top:20px; overflow:auto; }
I am using a jQuery plugin called Sticky Floating Box to have a div that floats but is contained within the other div. It appears to work however it doesn't stay within the containing div. I have looked over the scripts demo page but cannot figure out what I am doing wrong.
Here is the JS Initialize Code:
$(function() {
jQuery('.addthis').stickyfloat('update',{ duration:0});
});
Here is a jsFiddle showing the issue.
HTML and CSS Below:
<div class="header"> HEADER </div>
<div class="container">
<div class="addthis">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_button_email"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=undefined"></script>
<!-- AddThis Button END -->
</div>
<p>ICONS SHOULD STAY <BR> WITHIN THIS GRAY BOX<p>
</div>
<div class="footer"> SHOULD NOT GO BELOW THIS LINE</div>
.header{
width:400px;
background: #F00;
height:100px;
margin:0 auto;
}
.container{
position:relative;
height:400px;
width:400px;
margin:0 auto;
background: #999;
}
.footer{
height:700px;
width:400px;
background: #F0F;
margin:0 auto;
}
.addthis{
position:absolute;
top:0;
left:-50px;
}
I had to do three things to get the jsFiddle to work properly:
stickyfloat function needs to be called after the page is ready (and remove the 'update' part).
jQuery(document).ready(function() {
jQuery('.addthis').stickyfloat({ duration:0});
});
Add the following css rule:
.addthis_floating_style
{
position:inherit !important;
}
Give the .addthis div an explicit height and width:
.addthis
{
position:absolute;
top:0;
left:-50px;
width :36px;
height:222px;
}