Code Snippet: CSS to add fixed page navigation to Blanket

[sistabro]

Title: CSS for fixed page navigation in Blanket
Credit to: sistabro
Base style: Blanket
Type: Code Snippet
Best resolution: Fluid Width
Tested in: IE9, Chrome, Firefox5 on a PC. Safari 5.0.4 courtesy of denise
Features: Fixed Previous, Next and Top of Page links

I posted a layout today, Wavy Gravy, and one of the features in it was adding the Previous, Next and Top of Page links to the fixed navigation section at the bottom of every Blanket based layout. It seems like it would be something very useful for anyone messing around with Blanket; I honestly can't think of a reason why you wouldn't want to add these links to the navigation section. So below you can find the CSS that sets all of that up.

/*--- Adding the Previous, Next and Top of Page links to the fixed bottom navigatio section in the Dreamwidth Blanket based Layouts ---*/ /*--- Easy color find and replace: Background: #f0e9cf Link Text: #ab3838 Top Border: #5b4f3b ---*/ /*--- Miscelaneous Items ---*/ .topnav { display:none!important; } .navigation { padding: 10px; text-align: center; color:#ab3838; margin-bottom: 20px; } div.navigation ul { display: inline; padding: 0; margin: 0 0 0 0; align: center; } li.page-separator {display: none;} /*--- div.module-navlinks, which are the Recent, Reading, etc. Nav links ---*/ div.module-navlinks { position: fixed; bottom: 0; z-index: 2; padding-bottom: 0.5em; width: 100%; margin: 0 auto; color: #d8b078; background-color: #f0e9cf; text-align:center; padding-top: 1.4em; } div.module-navlinks ul.module-list { display: inline; padding: 0; margin: 0 0 0 0; text-transform: uppercase; } div.module-navlinks ul.module-list li { display: inline; margin: 0 0 0 0; list-style: none; padding-right; 13px; padding-left: 13px; font-size: 0.665em; } /*--- Format the Prev, Next, Top of page links. The formula for aligning the Previous and Next links to the end of the entry content is as follows: ((100%-yourContentWidth%)/2)+0.25% In the code below, my content width is at 90%, so the padding is 5.25% ---*/ li.page-back, li.page-forward, .page-top { list-style: none; padding: 0.1em; margin: 0 0 0 0; background: #f0e9cf; bottom: 2.5em; text-transform:uppercase; font-size: 0.665em; border-top: 1px solid #5b4f3b; } .page-top { position: fixed; right:46.5%; z-index: 5; } li.page-back { position: fixed; left: 0em; text-align: left; padding-left: 5.25%; z-index: 5; } li.page-forward { position: fixed; right: 0em; text-align: right; padding-right: 5.25%; z-index: 5; }

Now, I will be the first to admit that I am a complete n00b at CSS, so the code is probably messy, but it does work. The only thing is that it's really sensetive to font size changes. If you change the font sizes, you will also have to adjust the padding and positioning of pretty much everything to make things line up. But once they are aligned, it responds quite well to in browser zooming; it only breaks if your main navigation links get so big they go to another line, which is really, really big.

Feel free to use and modify. I hope folks find it useful.