dreamwidthlayouts | Code Snippet: CSS to add fixed page navigation to Blanket

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.

Flat | Top-Level Comments Only

Oh, I am glad someone else is sharing code snippets!

Edited 2011-06-26 04:47 (UTC)

Code snippets are so useful! I wish more people would post them. Of course yours was even better because it was also a tutorial. :)

Looks fine in Safari 5.0.4! (And I love the layout.)

Thank you! I will add Safari to the testing lists and tags :D

Hi, I know this is an OLD post and chances are you won't get this, but I got here via googling my issue so might as well: I'm trying to add the website link to the navigation at the bottom of a blanket layout. Do you happen to know how, if it's possibly similar to this?

Code Snippet: CSS to add fixed page navigation to Blanket

no subject

no subject

no subject

no subject

no subject