Is this even possible via Twitter Bootstrap
http://www.usatoday.com/opinion/
When you scroll down, only the menu portion should remain affixed in the top ? If anyone has handy jsfiddle version, it would be really nice.
You can get it working by taking the navbar and using the affix plugin. I have a (very rough) working example here: http://bootply.com/87472. The important bits are in the CSS:
header { //this is whatever is sitting above the navbar.
height:50px; //this can be set to anything, just make it match
//the data-offset-top in the HTML (see below)
}
.affix {
width:100%; //makes sure the "affixed" navbar stretches the full width
top:0; //makes it stick to the top when it gets there.
}
.affix + p { //this is whatever is sitting below the navbar
margin-top:70px; //set to the total height of your navbar
}
The bit in the HTML you need:
<div class="navbar navbar-default" data-spy="affix" data-offset-top="50">
As mentioned above, data-offset-top should match the total height of whatever element is sitting above your navbar.
As for the fancy effects, I would suggest you check out css transitions to make that magic happen.
Related
I ran rails generate scaffold pins description:string. The header covers pins as below. I don't know how to fix this. I tried some with css but didn't work. Does anyone know solutions for this?
You could try applying margin-top to the content of the page. The margin should be the same height as the header or greater.
I assume you are using a bootstrap navbar - you need to add padding to avoid the overlap - from navbar docs
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
The page in question is this: http://amytdatta.com/ironic-bironic (password: tyma) - it's a pre-release page for a new album I worked on, sorry!
I'd like to have the video and the text nav below scale and center to the browser window without the need for a scrollbar. I've tried all kinds of approaches using min height / max height but just can't seem to get the intended result. I'm guessing that I don't know which elements to target and how to target them.
Any advice for a good solid approach would be really appreciated. Also, since i'm using Virb I can only do overrides to the CSS, so I can't delete lines.
Thanks very much.
Without actually seeing your website since it's password protected I would suggest something along the lines of the folllowing:
You set a wrapper around your elements, in your case the nav and the video. And then set the CSS for the video and nav to have an auto margin. Which should center it both horizontally and verically. You might want to add a wrapper for the 2 components to keep them nicely stacked together and then put an auto margin on that wrapper, but the below should already work.
Html:
<div id="container">
<div id="nav"><!-- nav here --></div>
<div id="video"><!--video here--></div>
</div>
CSS:
#container {
width:100%;
height:100%;
}
#video{
margin:auto;
}
#nav {
margin:auto;
}
I have a sidebar-nav as shown in the typical Twitter Bootstrap example.
Some of my sidebar menu items are long. Depending on the size of the window, the text wraps to the next line as shown in this jsfiddle as you change the width of the window. For presentation's sake, I'd like to set a minimum width for the sidebar-nav. I know there are media tags in Bootstrap's CSS, but I'm not sure that that's what I need to be doing. Basically, I want the content section to still be responsive, but have the sidebar menu to have a minimum width (or actually a locked width might be even better).
Is there a way to fix the width of the sidebarnav but make sure it still plays nicely with the content section of the page?
Get the nav out of the fluid-container, set its position to absolute and add a margin-left to the container. It's not Twitter Bootstrap's native positioning method, but it should work.
Markup:
<div class="navbar navbar-fixed-top">...</div>
<div class="the-sidebar">...</div>
<div class="container-fluid the-container>...</div>
CSS:
.the-sidebar {
position: absolute;
width: 220px;
}
.the-container {
margin-left: 240px;
}
This is the script on jsfiddle (i've used latest version of Twitter Bootstrap)
TIP:
If you want an always-visible sidebar, just change positioning to fixed
I've seen versions of this simple problem raised a dozen times here and elsewhere on the web, but I haven't seen a solution that works for me yet so I'm asking it again.
I want a webpage with a variable height full width header (height based on contents). Below that I want a content area that fills the rest of the browser viewport. If the content is larger than the remaining space in the viewport then I want the content area to scroll.
I don't need this to work on IE6. I don't care whether the solution uses CSS, tables or a mixture of the two, just no frames and no Javascript.
For a bonus point fix a variable height footer to the bottom of the page.
This cannot be done with CSS/ tables alone unless you know how big your two containers will be ahead of time.
If you are willing to use a little bit of javascript this will works perfectly.
<style>
body, html
{
padding:0;
margin:0;
height:100%;
width:100%;
}
section, header
{
width:100%;
display:block;
}
section
{
background:red;
}
</style>
<script>
window.onload = window.onresize = function ()
{
document.getElementById("section").style.height = document.body.offsetHeight - document.getElementById("head").offsetHeight + "px";
}
</script>
<header id="head">
header
<br />
two
</header>
<section id="section">
scroll the rest
</section>
I'm trying to get a dynamically sized sidebar to float in the upper right portion of my web pages (but below the header and nav) and have the main content on the page flow around it (sort of in an "L" shape except with the bottom part of the "L" really thick). The width and height of the sidebar will vary from page to page so I can't use any hard values.
My css looks like:
#main {
width: 850px;
height: auto;
}
#sidebar {
width: auto;
float: right;
}
(plus some padding, margin, and background color code I think is inconsequential)
My html looks like:
<div id="wrapper">
<div id="header"> /* header stuff */ </div>
<div id="nav"> /* nav stuff */ </div>
<div id="sidebar">
/* my sidebar content, really just an h3 and a ul */
</div>
<div id="main">
/* lots of content here */
</div>
</div>
I don't completely understand why I have to have the sidebar div first, but it this code works fine in FF, Chrome, Safari (Windows), and IE8. But on IE7 (and IE6, which I don't care about), the main content gets pushed down below the bottom of the sidebar, as if there was a "clear: left" on the sidebar div (but there isn't).
I have a feeling this is one of those evil IE7 non-compliance bugs, especially because IE8 behaves exactly like the other browsers. But I have no idea how to fix it.
Any ideas? TIA.
First, make sure you are using a doctype that will put IE7 into strict mode (see http://hsivonen.iki.fi/doctype/ for an explaination). if that doesn't do it, it may be that you need some play in your margin widths.
The reason why you have to have the sidebar div first, is since div is a displayed as a block element anything after it, will be below it (unless you float the main div).
By floating the sidebar div and putting it first, the browser knows it can display the main div to the right of the sidebar. You could get a similar effect by adding float left to the main div and removing the float from the sidebar div and moving it after the main div.
From what you describe, it sounds like your sidebar is behaving as if it was a block element. Maybe try some different display options like inline-block. I'd also try experimenting with the width min-width attributes. Hard to say though.
Bingo! Fixed! The guys who mentioned playing around with widths and margins get the gold stars tonight. It turned out that all I had to do was remove the fixed width on the main div, then add some padding on the right to create a gutter for text and images. Tested and confirmed in FF3, Chrome, Safari (Win), and most importantly, IE6 & IE7 (even though I still hate IE).
I guess the IE rendering engine was saying, "I see that you want your main div to be 850px wide, but with that sidebar you stuck up there, I don't have room so I'll have to shove it underneath the sidebar". Of course, every other browser's rendering engine said, "Dude, I totally get what you're trying to do! No problem, I'll lay out everything exactly as you'd like it."