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; }
Related
I am creating a responsive site with a fixed header and navbar and a rotating banner on the homepage. The banner is made using some javascript and css position values. So the header, navbar and rotating banners work fine but because the banners have width:100% and height:auto attributes they obviously expand and contract based on the window size or device. When I try to add content below I don't know what to do in order to keep it snug under the banner when I need to use position:absolute or relative and a top value for the content to appear. I've tired using a % but that doesn't seem to work.
JSFiddle
.header {
height:74px;
width:100%;
}
.navbar {
height:24px;
width:100%;
}
#banners {
position:relative;
}
#banners img {
position:absolute;
z-index:1;
top:98px;
width:100%;
height:auto;
}
#banners img.active {
z-index:3;
}
<div class="header"></div>
<div class="navbar"></div>
<div id="banners">
<img src="images/banner1.jpg" class="active" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />
</div>
<div id="content">
</div>
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;
}
I'm trying to create an efect that's change de background color from left to right.
I have created this: http://jsfiddle.net/kT95d/58/
<style>
#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
<script>
$('#div1').mouseover(function (){
$('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="div1">
<div id="back">
That was amazing!
</div>
</div>
But, i want the text in horizontal and how you can see, this is vertical and after the effect go to horizontal.
I don't know if this is the best way to do this. Can help me?
Thanks!!
Here you go. I believe this is what you want:
http://jsfiddle.net/WVWKE/
Change is here:
<div id="div1">
<div style="position:absolute">That was amazing!</div>
<div id="back">
</div>
</div>
The problem before was that the text was inside your zero width div, so it was breaking onto multiple lines to try to fit. Then when you animated the width back to 200, the text had room to expand again.
Here we move the text out of the animated background div and into the parent div, then we give it a position:absolute to take it out of the flow so it doesn't take up space. You can of course move that inline style to your CSS, and probably should.
<style>
#div1{
margin-top: -200px;
height:200px;
width:200px;
background-color:green;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
</style>
<script>
$('#div1').mouseover(function (){
$('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="text">
That was amazing!
</div>
<div id="div1">
<div id="back">
</div>
</div>
I need to be able to position fixed element always inside the div.
Problem is occuring when I resize the window. Then the fixed div is always floating above all other elements. How to prevent that? I need that div to be fixed but positioned inside the div .
Here is an example:
<div id="main">
<div id="one" style="background-color:yellow;"></div>
<div id="two" style="background-color:black;"></div>
<div id="three" style="background-color:yellow;">
<div id="four"></div>
</div>
</div>
CSS:
#main
{
position:relative;
width:1200px;
top:0;
bottom:0;
left:100px;
}
#one,#two,#three
{
position:relative;
width:100px;
height:1000px;
float:left;
top:0;
bottom:0;
}
#four
{
position:fixed;
top:50px;
background-color:blue;
width:100px;
height:200px;
}
EXAMPLE try moving horizontal scroll left and right and you will see what is happening.
Change position to relative.
Example
#four {
background-color: blue;
height: 200px;
position: relative;
top: 50px;
width: 100px;
}
Check out this answer on a similar question. The problem you're facing is something that can't be solved with CSS alone, unfortunately.
I'm building a page. This page will have a custom navigation bar.
Nav bar dimensions - width:800px height:100px.
Body bgcolor: grey; Nav bar bgcolor: blue.
Since the nav bar will be 800px wide and be blue, I would like the nav bar to stay centered on the page but keep stretching blue to the left and right edges of larger screens.
Any ideas how I can accomplish this?
This will do it, the trick is margin-auto left and right
.outer
{
background-color:Gray;
}
.inner
{
width:800px;
height:100px;
background-color:blue;
margin:0 auto 0 auto;
}
<div id="outer">
<div id="inner">blah</div>
</div>
Not sure if you got the answer you were looking for, but for clarity you can nest and centre your navigation element within a wrapper element that has 100% width and similar styles, as follows.
<div id="navWrap">
<ul id="nav">
<li>...</li>
</ul>
</div>
<style type="text/css">
#navWrap {
width:100%;
background:blue;
}
#nav {
width:800px;
height:100px;
margin:0 auto;
background:blue;
}
body {
background:grey;
}
</style>