I am looking for programming help on how to do a sidebar menu like the one shown at this URL:
Nettuts Website Link
I would like my sidebar to function just like the sidebar on the website, with my own look and feel applied to it. I would like the sidebar to scroll with the page fixed at its own location just as it functions on Nettuts website. How would I program this?
It is a div with the css statement position: fixed; in the css class declaration.
Give any div in your html this CSS styling and you should see it working.
position: fixed;
height: 132px;
left: 0;
top: 185px;
width: 24px;
that side bar is nothing more than a div with a fixed position.
<style>
.sidebar {
width: 45px;
height: 90px;
position: fixed;
left: 0px;
top: 300px;
border: 1px solid black;
}
</style>
<div class='sidebar'>I'm a sidebar</div>
http://jsfiddle.net/p8dFM/
At that point you add elements to the sidebar with whatever functionality you want.
Create a style class like..
.class{
overflow:auto;
height:100%;
width:354px;
top:185px;
}
Related
I'm wondering if someone could help me e to create a fixed/sticky header... Not quite sure how to make this happen with CSS or HTML (sorry, I'm a neophyte).
My site is http://www.oliviafialkow.com/ and I would like my logo to stay fixed as visitors scroll down the page, like this example: http://lockebride.tumblr.com/
Any help would be wonderful--thanks!
My header HTML is as follows:
<div class="logo">
{{^customize.images.logo.url}}
<!--No Logo-->
<h1>{{site.title}}</h1>
{{/customize.images.logo.url}}
{{#customize.images.logo.url}}
<!--Logo Uploaded-->
<h1><img src="{{customize.images.logo.url}}" alt="{{site.title}}"></h1>
{{/customize.images.logo.url}}
</div>
My header CSS is:
/***** site_name color *****/
.logo h1 a {
color: {{{customize.colors.site_name}}};
}
/***** subtitle color *****/
.logo h2 {
color: {{{customize.colors.subtitle}}};
position: fixed
}
Thank you!
I regularly use this solution:
position: fixed;
width: [your-width-here]
margin: auto;
This will auto-center it; no weird calculations or ~48%'s in your CSS.
However, if you want to exactly mirror what is seen on the page you mentioned:
.parent-div {
float: right;
right: 50%;
position: fixed;
z-index: 19999;
}
.child-div {
position: relative;
float: right;
right: -50%;
}
Alongside position: fixed, you also need to provide a top: 0 and left: calc(50% - [width of your logo]
Add this into your .logo div:
position: fixed;
top: 0;
left: calc(50% - 80px);
z-index: 10;
The logo will then be taken out of the flow of the document, and so you should add a spacer of some sort to fill in the space originally occupied by the logo image.
Edit your css like this
#site-header {
padding-top: 110px;
margin-bottom: 50px;
}
#site-header .logo h1 img {
width: 100%;
}
.logo {
font-size: 100%;
position: fixed;
left: 45%;
top: -21px;
width: 10%;
z-index: 1000;
}
Important, you must use a png logo.
Try with
.logo {
left: 50%;
position: fixed;
top: -20px;
}
For the logo really to be centered, you need a 2nd div inside with margin-left: 50%
In your case you can just add the margin to the #site-header .logo h1 class in line 91 of your CSS:
#site-header .logo h1 {
margin-left: -50%;
font-size: 1.8em;
line-height: 1.2;
text-align: center;
}
Usually you'd go with
<div class="logo" style="left: 50%; position: fixed;">
<div style="margin-left: -50%;">
// Your logo goes here
</div>
</div>
Position fixed is the easiest solution here, I've made a jsFiddle for you to... well... fiddle :) and see how to achieve what you want: jsFiddle. Please note that you need a transparent png logo to make this look as it should (your current is a jpeg with white background).
.logo-placeholder {
height: 180px; /* height of your logo */
}
.logo {
position:fixed;
top:0;
right:0;
left:0;
height:180px;
text-align:center;
z-index: 100;
}
.logo-placeholder just keeps the space that would normally be taken by your logo that is now "floating" above the rest of the content of the page. So you need to add it to your HTML:
<div class="logo-placeholder"></div>
<div class="logo">
<!-- your not modified html -->
</div>
This should work for both variants: image (if you have it uploaded) or text (if you don't).
However, I can see your webpage is responsive and just changing your logo to position:fixed would probably ruin user xperience and the visuals on mobile. iOS devices (which are most important for now in terms of mobile browsing) doesn't like fixed positioning and have some weird behaviour in terms of scrolling: they only update the position of an element once you end scrolling, and not while you do it (like normal desktop browser). That would result in your logo jumping all over the place while scrolling.
Also, using such big logo on small mobile screen would occupy most of the viewport which is not good either (not to mention problems with navigation caused by your logo overlapping buttons etc.).
So, if I were you I would add this CSS to make your change not affect mobile at all:
#media only screen and (max-width: 600px) {
.logo {
position: static; /* that is just default positioning */
}
.logo-placeholder {
display:none; /* we don't need tht anymore since logo is back on its place :) */
}
}
And here's the fiddle for the version with media-query: jsFiddle - you can scale the viewport to see it working.
I'm using bootstrap's navbar-fixed-bottom to have a sticky navbar at the bottom. This works great. The problem I have is when I use Backbone.Marionette to dynamically add content the navbar no longer sticks to the bottom - rather it just stays in the same spot, hiding some content and eventually the content just goes below it as I add more.
Is there a way to force the navbar to stay stuck to the bottom regardless of how much content is added?
Or simply...
.navbar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* the rest of the styling */
}
A lot neater and easier I find. And doesn't matter how tall your navbar is. You can add heights and colours and whatever styling you want after it.
This is an old trick without Bootstrap. Supposed you know the height of the navbar. You can try this: http://jsfiddle.net/e85xw/
.navbar{
height: 2em;
width: 100%;
background: blue;
color: white;
position: fixed;
top: 100%;
margin-top: -2em;
}
If you don't know the height of the navbar, you can use JS for a little help
http://jsfiddle.net/2T282/
<style>
.navbar{
height: 2em;//in case this number is dynamic
width: 100%;
background: blue;
color: white;
position: fixed;
top: 100%;
}
</style>
<script>
$(document).ready(function(){
$('.navbar').css('margin-top',$('.navbar').height() * -1);
});
</script>
I have the following layout:
On the left side I have a menu and big gray part on the right side is the body content. The problem is on the left menu I have a bunch of buttons. I want this menu to be fixed position and body scrollable. I Have the following css:
#menu {
position: fixed;
}
#content {
position: inherit;
margin-left:300px;
}
The problem is that on the red part of my menu all button unavailable, I can't click on it. looks like body overrides the menu.
Any ideas what the problem might be?
Thanks
Including the html would give a better sense of the stacking order and likely yield a better answer. Given what you've provided, this should fix:
#menu {
position: fixed;
z-index: 1;
}
In order to fix it to the top and not scroll, you don't use position: fixed;. You need to use position: absolute;. If you don't want it at the very top, then you use position: relative; and place it inside an element.
Then, in order to scroll, you use position: fixed;.
When you use position: fixed, it places the element fixed within the visible page.
However, when you use position: absolute, what this does is put it on an absolute position on the page regardless of scroll. For example, if you added the css top:0; then it would be 0 pixes from the absolute top of page, and if you scroll down it will disappear from view because it is all the way at the top of the actual page, not just the top of the visible page.
I understand it seems a bit counter-intuitive to you. However, you can see it working in the jsbin below.
Working jsbin:
http://jsbin.com/Uwuyuha/1
page.html
<body>
<div id="container">
<div id="menu">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
</div>
<div id="content">
</div>
</div>
</body>
style.css
body {
width: 100%;
height: 100%;
}
#container {
width: 1000px;
height: 1000px;
}
#menu {
width: 250px;
height: 2000px;
position: fixed;
background: #999;
}
#content {
width: 650px;
height: 300px;
position: absolute;
margin-left: 251px;
background: #444;
}
Short sketch of the situation: I'm making a website (obviously :)) and so I've got my header, then my banner and below the banner i've got my menu bar. However, the banner overlaps my header a bit (that's the intention ;)) and now I want to add the menu bar directly below the banner.
Here's my CSS code:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
position: relative;
top: -90px;
background: url(../images/banner.png) no-repeat top center;
height: 210px;
}
.menu {
background: url(../images/menubalk.png) no-repeat top center;
}
The menubar is at the position where i should be if the banner would not have an overlap.
I have just figured something small out, which would probably fix my entire problem. If I were to make my header a box, and then my main content a box (which holds the banner, content and footer) and make all the different things, like the banner children from that box? wouldn't that fix my entire problem while I use the inherit or whatever function?
Thank you in advance!
Kind regards,
David
One way of doing this has been suggested, use relative positioning for the menu element.
For example:
<div class="header_container">
Le Header Container
</div>
<div class="banner">
Le Banner
</div>
<div class="menu">
Le Menu
</div>
and the CSS would look like:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
background-color: yellow;
position: relative;
top: -90px;
height: 210px;
}
.menu {
background-color: red;
position: relative;
top: -90px;
height: 50px;
}
As a start, here is a fiddle: http://jsfiddle.net/audetwebdesign/9gvTG/
Alternative Method
You can achieve a similar effect by using a negative margin:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
margin-bottom: -90px; // only need to adjust this property
}
.banner {
background-color: yellow;
position: relative;
height: 210px;
}
.menu {
background-color: red;
position: relative;
height: 50px;
}
The advantage of this approach is that the positioning of the subsequent elements do not need adjusting if you change the header and need to modify the degree of overlap by the banner element.
It is good to be aware of both approaches.
One solution in your case would be to position your menu absolute at bottom:-120px. It's not the most elegant one but it should work.
You should assign a relative position to your menu as well. With same top value as the banner
.menu {
....
....
position: relative;
top:-90px;
}
The space you see is because the menu, in normal document flow, is positioned just below the place the banner is located. (which is shifted 90px up from its real position)
A fiddle here
Instead of your images I used background color
You can place the menu just at the bottom of your banner or where ever you need.
Then remember that element that follows the menu will see the menu in his real position . In this case 90px below.Many solutions to wrap all this issue so wont affect the rest of the page elements.
I am currently building a website at http://grapevineiow.org/m_inspireblog.html. This website has a header and footer. The page I have linked to above features a blog in an iframe. Clearly the blog is far too long to fit into the page as one continuous piece of content, so scrollbars are required.
However, this is where there is a problem. I want to keep the scrollbars on the blog (so users can scroll through it), but I want the page to fill the window exactly, so the header and footer take up the minimum space needed. The header is fine, but the footer is being a problem.
I have tried:
Setting the height of the body and html to 100% in CSS.
Setting the height of the content to 100% in CSS, but that made the content fill the window.
Styling the footer as height:auto 0 in CSS.
...but none of these have worked.
I would like to be able to solve this problem using just CSS if possible, but I'm open to using HTML if needed. I would like to avoid Javascript.
Thank you in advance.
If you know the heights of the header and footer, you can achieve this by setting both top and bottom on the middle area like this:
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#header{
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: #f09;
}
#content{
position: absolute;
width: 100%;
top: 100px;
bottom: 100px;
background: #f90;
}
#content iframe{
width: 100%;
height: 100%;
}
#footer{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #90f;
}
</style>
<div id="header"></div>
<div id="content">
<iframe src="http://en.wikipedia.org/wiki/Butterfly"></iframe>
</div>
<div id="footer"></div>