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>
Related
I would like to create a dual pane view, where the top banner of the screen is fixed, while the bottom can scroll horizontally. As the user scrolls horizontally, they should still be able to see the same top banner. I've attached some sample code and a corresponding jsfiddle.
The problem is that as the user scrolls past GROUP2 to GROUP3, the top header gets cropped. I would like the header to continue across the top of the screen as the user scrolls.
<div>
<div class="header">
COMPANY NAME
</div>
<div class="scroller">
<div class="group1">
GROUP1
</div>
<div class="group2">
GROUP2
</div>
<div class="group3">
GROUP3
</div>
</div>
</div>
.header {
width:100%;
height:60px;
background:red;
}
.scroller {
overflow-y:hidden;
overflow-x:scroll;
}
.group1 {
top:80px;
left:0px;
width:500px;
position:absolute;
}
.group2 {
top:80px;
left:540px;
width:500px;
position:absolute;
}
.group3 {
top:80px;
left:1080px;
width:500px;
position:absolute;
}
try this updated fiddle
.header {
width:100%;
height:60px;
background:red;
position: fixed;
top:0px;
left:0px;
}
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>
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 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;
}
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; }