Log in

No account? Create an account

Previous Entry | Next Entry

Fixed Position: Footer and Sidebar

  • Sep. 24th, 2008 at 1:23 PM
Paid account. Firefox 3. Using this template from thefulcrum.

I have the header and navigation in a fixed position, and I'd like to do the same with the footer. I'd also like the beta (left) sidebar to be in a fixed position. I'm not sure how to go about either of these.

/* Template: (#53) A Well Respected Man */
/* Date: September 8, 2008 */
/* S2 Style: Mixit */
/* Available at http://community.livejournal.com/thefulcrum/ */
/* Made by Liz a.k.a. grrliz.livejournal.com */

* {margin: 0px; padding: 0px; }

html {font-size: 100%; /* IE hack */ }

body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "trebuchet ms", candara, helvetica, verdana, arial, tahoma, sans-serif;
font-size: 62.5%;
text-align: center;

a, a:link, a:visited, a:active {font-weight: normal; text-decoration: none; outline: none;}

blockquote {margin: 0.8em 0; padding: 0.8em;}

input, textarea, select {}

h1, h2, h3 {margin: 5px 0px;}

font {font-family: inherit !important; color: inherit !important;}

/* ----------------------------------------- */
/* ---------- PAGE STRUCTURE --------------- */
/* ----------------------------------------- */
/* -- don't touch the stuff below -- */
#page, #header, #content, #footer {position: relative; top: 0;}
#alpha, #beta, #gamma {display: inline; float: left; position: relative; top: 0;}
#footer {margin: -1px 0 0 0; /* HACK - removes space between content and footer */}
#footer-inner {position: fixed;}
#page-inner, #header-inner, #content-inner, #alpha-inner, #beta-inner, #gamma-inner,
#header-inner, #alpha-inner, #beta-inner, #gamma-inner {overflow: hidden; /* hide content that is larger than the element dimensions */}
#alpha-inner[id] { overflow: visible; } /* FF MAC & PC will clip pager-top when accessing page anchor */
/* -- don't touch the stuff above -- */

#container {position: relative; width: 100%; font-size: 1em; text-align: left;}
#container-inner {min-height: 100%; text-align: left;}

#page {margin: 0px auto; padding: 0px;}

#header {position: fixed; z-index: 1; width: 100%; height: 150px;}

#content {position: relative; width: 960px; margin: 0px auto; text-align: left;}

/* main content */ #alpha {position: scroll; z-index: 0; padding-top: 150px; left: 200px; width: 560px; }
/* left column */ #beta {top: 150px; left: -560px; width: 180px;}
/* right column */ #gamma {top: 150px;float: right; width: 180px;}

#footer {clear: both; padding: 20px;}

/* ---------------------------- */
/* ---------- HEADER ---------- */
/* ---------------------------- */

#header-content {overflow: hidden; text-transform: lowercase; text-align: center;}

#header-text {position: relative; width: 100%; height: 121px; text-transform: lowercase;}

#header-text ul.nav {position: absolute; bottom: 0px; left: 50%; margin-left: -280px; width: 558px; padding: 10px 0; font-size: 10px; text-align: center; list-style-type: none;}
#header-text ul.nav li {display: inline;}
#header-text ul.nav li a {padding: 10px;}

#header-name {position: absolute; top: 0px; left: 50%; margin-left: -50%; width: 100%; padding-top: 50px; font-size: 12px; text-transform: lowercase; letter-spacing: 1px;}
#header-name a {display: block; width: 540px; padding: 10px; margin: 0px auto;}

#header-description {display: none;}

/* ----------------------------- */
/* ---------- ENTRIES ---------- */
/* ----------------------------- */

/* previous and next links */
.stream-header {display: none;}
.stream-footer {clear: both; display: block; padding: 0 0 1em 0; text-align: left; text-transform: lowercase;}

/* entry container */
.asset {clear: both; padding-bottom: 1em;}

.asset-header {}
.asset-header ul.asset-meta-list {border: 0px;}
.asset-header img {max-height: 11px;}
.lj-view-entry .asset-header {padding: 0; }

/* entry subject */
h2.page-header2 {font-size: 1.2em; font-weight: bold; text-align: left; text-transform: lowercase; letter-spacing: 1px;}
h2.page-header2 a, .lj-view-tags h2 {text-decoration: none;}

.lj-view-entry h2.page-header2 {padding: 5px 10px;}

/* entry body, meta, tags */
.asset-content {}

/* entry text */
.asset-body {clear: both; font-size: 1.1em; line-height: 1.5em; overflow-x: hidden;}
.asset-body a {text-decoration: underline; font-weight: bold;}
.asset-body ol, .asset-body ul {margin: 10px 40px;}
.asset-body dt {padding: 5px 0px; font-weight: bold; text-transform: lowercase;}

.asset-body dd {margin-left: 30px; padding: 10px;}

/* userpic */
.user-icon {float: right; padding: 0px 0px 10px 10px; text-align: center;}
.user-icon img {padding: 7px;}

.ljuser {display: inline !important;}
.ljuser a img {padding: 0px; border: 0px; background: transparent;}

/* mood, music, location */
.lj-currents ul {padding-top: 1em; list-style-type: none; text-transform: lowercase;}
.lj-currents ul li {display: inline; padding-right: 2em;}
.lj-currents span.entryMetadata-label {padding-right: 0.5em; font-weight: bold;}

/* --- tags --- */
.asset-tags {padding-top: 1em; text-transform: lowercase; padding-top: 3px;}
.asset-tags-header {display: block; float: left; width: 3em; /* matches .asset-tags-content width */ height: 100% !important; padding: 0px 5px 5px 0px; font-size: 1em !important;}
.asset-tags ul {list-style-type: none;}
.asset-tags-list {margin: 0 0 0 3em; list-style-type: none;}
.asset-tags-list li {display: inline; padding-right: 5px;}
.asset-tags-list a {white-space: normal !important;}
.asset-tags-list a:hover {text-decoration: underline}

/* comments bar */
ul.asset-meta-list {width: 558px; margin: 1em 0 2em 0; padding: 5px 0; font-size: 10px; text-align: center; text-transform: lowercase; list-style-type: none;}
ul.asset-meta-list li {display: inline; }
ul.asset-meta-list li a {padding: 5px 5px;}

.prevnext, .prev, .next {padding: 5px 0px;}

/* date and time */
div.asset-header ul {margin: 0px; padding: 0px; border: 0px; background: none; font-size: 11px; text-align: right; text-transform: lowercase; list-style-type: none;}
div.asset-header ul.asset-meta-list {padding: 5px 0px;}

/* ----------------------------- */
/* ---------- SIDEBAR ---------- */
/* ----------------------------- */

.widget {margin-bottom: 2em;}
.widget-inner {padding: 0px 10px;}

.widget-header {margin: 0px; padding: 0 0 0.5em 0; font-size: 1.2em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px;}

.widget ul {margin: 0px; padding: 0px; list-style-type: none;}

/* profile */
.about-me-widget .widget-header a {text-decoration: none;}
.about-me-widget .widget-content .user-pic img {margin-top: 10px;}
.about-me-widget dd {padding: 3px 0px;}
.about-me-widget dd.profile-username {text-transform: lowercase;}
.about-me-widget dd.profile-name a {font-weight: bold; text-decoration: underline;}

/* calendar */
.calendar-widget {}
.calendar-widget table {width: 100%; margin-left: -5px; font-size: 11px; text-align: center; }
.calendar-widget th,
.calendar-widget td {margin: 0px; padding: 0px;}
.calendar-widget p {margin: 0px; padding: 0px;}
.calendar-widget td a {display: block;}
.calendar-widget tr:first-child td {border: 0px;}
.calendar-widget tr:first-child a,
.calendar-widget tr:first-child a:hover {background: none; font-weight: bold;}

/* link list and tags */
.typelist-widget {}
.typelist-widget li.item, .categories-widget li.item {margin: 0px; padding: 0px; }
.typelist-widget li.item a, .categories-widget li.item a {display: block; margin: 0px; padding: 3px 0px;}

.categories-widget .widget-footer {padding: 10px 0px 0px 0px; text-align: right;}

/* custom text */
.customtext-widget .widget-content {line-height: 1.8em;}

/* page summary */
.archive-widget ul li {padding: 3px 0px;}

/*syndication */
.syndicate-widget img {margin-top: 5px;}

/* powered by livejournal */
.powered-widget {display: none; padding-top: 3em;}
.powered-widget .widget-content {overflow: hidden; font-size: 12px;}
.powered-widget a {font-weight: bold; text-decoration: underline;}

/* designed by */
/* leave this turned off otherwise it will credit someone else with the design */
.designed-widget {display: none;}

/* ----------------------------------- */
/* ---------- COMMENTS PAGE ---------- */
/* ----------------------------------- */

/* Comments ---------------------------------------*/
#comments {padding: 0px;}

div.comments-inner h2 {margin: 0px; padding: 1.5em 0 0 0; font-size: 1.4em;}

.comment {position: relative; min-height: 130px; margin-bottom: 3em; padding:0px;}

.comments-nav {margin: 0px 0px 20px 0px; text-align:center;}

.comment-meta {padding: 5px 0px;}
.comment-meta .user-icon {position: relative; float: right; display: inline; padding-bottom: 10px;}
.comment-meta .commenter-name {font-size: 1.3em;}

/* --- reply, freeze, screen, etc --- */
.comment-links {margin-top: 0.9em; font-weight: normal; text-align: right; font-size: 1em;}
.comment-subject {font-weight: bold; }
.comment-date {margin-top: 0.9em; margin-bottom: 0.9em;}

/* Fix height in IE */
.comment {height: 1%;}

/* Quick Reply ---------------------------------------*/
.quickreply {margin-top: 1em; width:90%; padding-top: 5px; padding-bottom: 10px;}

#commenttext, #subject {width: 90%;}
#comment-form {width: 500px;}

/* ------------------------------ */
/* ---------- ARCHIVES ---------- */
/* ------------------------------ */

/* Calendar/Archive ---------------------------------------------------------------------- */

ul.year {text-align: center; padding: 0px;}
ul.year li {display: inline; padding: 0px 5px;}

table.yeartable {width: 100%; margin-left: auto; margin-right: auto;}
table.yeartable td.yeardate, table.yeartable td.yearday {padding: 5px;}
table.yeartable td.yearday {text-align: center;}
td.yearmonth {border-style: none; text-transform: lowercase;}
td.yeardate a {font-size: 1.5em; text-decoration: none;}

dd.viewsubjects {margin: 0 0 .75em .75em;}

.lj-view-archive .asset-header, .lj-view-month .asset-header {margin: 0px; border: 0px; padding: 0px;}
.lj-view-archive .asset-body, .lj-view-month .asset-body {margin: 0px; border: 0px; padding: 10px 0px;}

.lj-view-month widget table {margin: 0px !important;}

.lj-view-tags #alpha ul {margin: 10px 0px 10px 20px; font-size: 1.2em;}
.lj-view-tags #alpha ul li {padding: 2px 0px;}

/* -------------------------- */
/* ---------- MISC ---------- */
/* -------------------------- */

/* Sponsored Plus ---------------------------------------*/

#ad-5linkunit {
clear: both;

#ad-leaderboard {
margin-bottom: 10px;

/* Utility Code --------------------------------------------------- */

/* clear floats, inspired by positioniseverything.net/easyclearing.html */
.widget .user-pic:after {
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0.1px;

/* float in post bodies around enclosures */
.asset-body {
height: 1%;

/* Win IE < 7 */
* html #header-name a { word-wrap: break-word; }

/* ---------------------
--------------------- */

/* Quick Colour Scheme ---------

Aqua, Orange, Beige

#F6EFD2 -- background
#2E0E24 -- text
#2E0E24 -- journal title bg; sidebar and entry title links
#704262 -- widget headers; body links
#E7DEBB -- borders
#DBDA8F -- blockquote bg

----------------------------- */

body {background: #F6EFD2; color: #2E0E24;}

a, a:link, a:visited, a:active {color: #2E0E24;}
a:hover {color: #2E0E24;}

blockquote {margin: 0.8em 0; padding: 0.8em; border: 1px solid #E7DEBB; background: #DBDA8F;}

#header-text ul.nav {border: 1px solid #E7DEBB; background: #DBDA8F; color: #2E0E24;}
#header-text ul.nav li a {border-right: 1px solid #E7DEBB; background: #DBDA8F; color: #2E0E24;}
#header-text ul.nav li a:hover {background: #E7DEBB; color: #2E0E24;}
#header-name {border-bottom: 1px solid #2E0E24; background: url(http://pics.livejournal.com/themightybee/pic/000yaxsa) top center repeat transparent;}
#header-name a {background: #2E0E24; color: #E7DEBB;}

.stream-footer {color: #E7DEBB;}
.asset-body a:hover {color: #2E0E24;}
.asset a:hover img {border: 1px solid #2E0E24;}
.asset a img {border: 1px solid #704262;}
h2.page-header2 a:hover, .asset-body a, .widget-header a {color: #704262;}
.asset-body dt {border-bottom: 1px solid #E7DEBB; color: #2E0E24;}.asset-body dd {border: 1px solid #E7DEBB; border-top: 0px; background: #DBDA8F;}
.user-icon img {padding: 7px; border: 1px solid #E7DEBB; background: #DBDA8F;}
.ljuser a img {padding: 0px; border: 0px; background: transparent; color: #704262;}
ul.asset-meta-list {border: 1px solid #E7DEBB; background: #DBDA8F; color: #2E0E24;}
ul.asset-meta-list li a {border-right: 1px solid #E7DEBB; background: #DBDA8F; color: #2E0E24;}
ul.asset-meta-list li a:hover {background: #E7DEBB; color: #2E0E24;}
div.asset-header ul.asset-meta-list {border-top: 1px solid #E7DEBB;}

.widget-header {border-bottom: 1px solid #E7DEBB; color: #704262;}
.about-me-widget .widget-content .user-pic img {border: 2px solid #E7DEBB;}
.calendar-widget td {border: 1px solid #E7DEBB;}
.calendar-widget td a, table.yeartable td.yearday, .typelist-widget li.item a:hover, .categories-widget li.item a:hover{background: #DBDA8F;}
.typelist-widget li.item a, .categories-widget li.item a, .archive-widget ul li {border-bottom: 1px solid #E7DEBB;}
.comment {border-top: 1px solid #E7DEBB; border-bottom: 1px solid #E7DEBB;}
table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #E7DEBB;}

#footer {padding: 20px; border-top: 1px solid #2E0E24; background: url(http://pics.livejournal.com/themightybee/pic/000yaxsa) top center repeat transparent;}

/* ---------------------
--------------------- */

.categories-widget .widget-list .item {margin: 0 0 0 10px;}

Any help would be very much appreciated!


( 2 comments — Leave a comment )
Sep. 24th, 2008 06:45 pm (UTC)
It's not too hard, thank you very much W3C Standards. Change the #beta and #footer lines to look like this:
/* left column  */      #beta {position: fixed; top: 150px; left: 80px; width: 180px;}

#footer {position: fixed; z-index: 1; width: 100%; height: 40px; top: auto; bottom: 0}
Sep. 24th, 2008 07:47 pm (UTC)
Thanks so much! I had to edit the left padding in the #beta line, but it looks great.
( 2 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars