...

View Full Version : Help making a Fixed Sidebar



petitemonstra
04-21-2011, 09:31 PM
hey, I just editied a coded a layout for my livejournal. Its a layout for the smooth sailing opition. I really want to make my sidebar fixed. I dont want it to move when my entries scroll and I want to make the sidebar position a little more to the left. Here is my coding...



/* Cleaned CSS: */
/*----------------------------------------------------------------------------------------------
S2 SMOOTH SAILING [ http://petitemonstra.livejournal.com ]
-----------------------------------------------------------------------------------------------*/
body {background: #ffffff url(http://i53.tinypic.com/s49nix.gif) fixed; font-family: arial; font-size:8pt; line-height: 13pt; text-transform: none; word-spacing: 4pt; text-transform: lowercase; text-align:justify; color:#333; margin-top: 15px;}

::-moz-selection {background: #eee; color: #333;}

html, body{cursor: url(http://pinkluvhh.tripod.com/arrow2.cur), auto;} a:hover{cursor: url(http://pinkluvhh.tripod.com/arrow2.cur), auto;}

code, kbd, pre, tt {font: 8pt arial; text-transform:lowercase;}
input, button {background:#fff !important; border: 0px dotted #fff; line-height:13pt !important; font:7pt tahoma !important;; font-weight:normal !important;; letter-spacing:1px !important;; text-transform:uppercase !important;;color:#aaa !important; padding:3px !important;}
select, option {background: #fff; border: 0px solid #fff; font: 8pt arial !important; color:#000 !important; text-transform: lowercase !important;}
textarea {background: #eee !important; border: 1px dotted #ccc; color:#555 !important; font-family: arial!important; font-size: 8pt!important;line-height: 13pt; word-spacing: 4pt !important;text-decoration:none;}
object, embed{display: visible !important; float: center !important;}

#lj_controlstrip {text-transform: lowercase;}
#lj_controlstrip a {text-transform: lowercase;}

li {list-style-type: none !important; list-style-image: url();}

a, a:link, a:visited, a:active {color:#FF0066;font: 8pt arial; line-height: ;font-weight:bold; letter-spacing: 1px; text-transform:lowercase; text-decoration:none!important;}
a:hover {color:#000000; text-decoration:none!important;}

b,B,strong {color:#FF0066;font-family: tahoma; font-size: 7pt; font-weight:bold; letter-spacing:1px; text-transform:uppercase;}
i,I,em {color: #DCC5CA !important;font-family: georgia !important; font-size: 11px !important;font-style: italic !important; font-weight:light !important;text-transform: lowercase !important; letter-spacing:1px !important; text-decoration:none;}
s,S,strike {color: #FFD8E0;font-family: courier new; font-size: 7pt; font-weight:bold; letter-spacing:0px; text-transform:uppercase; text-decoration: ;}
big {color: #FFD8E0;font-family: 'times new roman'; font-size: 14pt; font-weight:bold; letter-spacing:-2px; text-transform: uppercase;}
small {color:#000000; font-family: verdana; font-size: 6pt; font-weight:bold; letter-spacing:0px; text-transform: uppercase;}
u,U {color:#DCC5CA;font-family: tahoma; font-size: 7pt; font-weight:normal; text-transform:uppercase;letter-spacing:0px; text-decoration: ; border-bottom: 1px #DCC5CA;}
q {color:#D7657C; font-family:courier new; font-size: 7pt; font-weight: bold; text-transform: uppercase; letter-spacing:0px;text-decoration:none;}

blockquote {
margin: 0 0 6px 0;
padding: 15px;
background-image: url('');
set background_scrolling = "fixed";
background: #FFD8E0;
border: 1px solid #000000;
font-family: arial; font-size:8pt; line-height: 13pt; word-spacing: 2pt; color:#404040;
}

blockquote:hover {
background: #FFD8E0; color:#000000;
border: 1px solid #000000;
}

.bodyblock {width: 950px; margin-left:-115px;}
.pageheaderblock {text-align: center;}

/*----------------------------------------------------------------------------------------------
ENTRIES
-----------------------------------------------------------------------------------------------*/
.entryHeader {background: #fff; padding: 0 5px; line-height: ; height: 20px; font-family: courier new; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid #fff; border-top: 1px solid #fff; border-left: 1px solid #fff; padding-top: 10px;}
.entryHeaderDate {font-family: trebuchet ms; font-size: 7pt; font-weight: normal; color: #FF0066; float: left; padding-right:8px; padding-left: 5px; letter-spacing: 1px;word-spacing: 0pt; display: inline;}
.entryHeaderSubject {display:none;font-size: 7pt; color: #FF0066; word-spacing: 1pt !important; float: right; display: inline;}
.entryHeaderSubject a {display: show; font-family: tahoma !important; font-size: 7pt; letter-spacing: -1pt !important; color: #FF0066 !important; text-transform: uppercase;}
.entryHeaderSubject a:hover, .entryHeader a:hover {color:#000000 !important; text-decoration: none; border: 0;}

.entryHeaderSubject img {margin-right: 5px;}

.entryText {background: #fff; border: 0px solid #ffffff; min-height: 35px; margin: 7px 15px 0px 7px; padding: 5px;}
.entryHolder {background: #fff; border: 0px solid #ffffff; text-align: justify; margin: 3px 0;}
.entryUserinfo-usericon img {margin: 2px 10px 5px 10px; padding: 0px; border: 1px solid #ddd;}
.entryUserinfo {padding: 7px 0 0 7px; float: left; text-align: center;}
.entryText img {max-width: 500px; overflow: hidden;}

.currents, .currents a, .ljtags a {font: 6pt tahoma !important; letter-spacing: 1px; font-weight: normal !important; color: #aaa !important; word-spacing: 0pt; text-transform: uppercase !important; padding-right: 15px; padding-left: 12px;}
.currents a, .ljtags a {font: 6pt tahoma !important; letter-spacing: 1px; font-weight: normal !important; color: #aaa !important; word-spacing: 0pt; text-transform: uppercase !important; padding-right: 0px; padding-left: 0px;}
.entryMetadata ul {margin:0px; padding: 5px;}
.entryMetadata li {list-style: none; padding-left:10px;}
.entryMetadata {font-size: 6pt; text-transform:uppercase!important; font-family: 'tahoma'; text-decoration: none; line-height:7pt; color:#aaa !important; letter-spacing: 1px; word-spacing: 0pt; margin: 5px 0 0 0;}
.entryMetadata-label {color:#FBB997;font-family: tahoma; font-size: 7pt; font-weight:bold; letter-spacing: 1px; text-transform:uppercase; padding-right: 5px;}
.entryMetadata-content img {margin-left: 5px;}
.currents a:hover, .ljtags a:hover, entryMetadata a {color:#FBB997 !important;}

.entryLinkbar, .entryLinkbar a {color:#FFBFC8; font-family: trebuchet ms !important; font-size: 7pt !important; font-weight: normal; text-transform: uppercase; word-spacing: 2pt; letter-spacing:1px; text-decoration:none; margin: 5px 0; padding-top: 5px; padding-bottom: 5px;}
.entryLinkbar a:hover { color:#000000; }
.entryLinkbar li {padding: 0 2px; margin: 0 auto; display: inline;}
.entryLinkbar ul {margin: 0; padding: 0; text-align: right;}

#lj_controlstrip img {display:none !important;}

div.ContextualPopup div.Inner{display:none;}

/*----------------------------------------------------------------------------------------------
SIDEBAR
-----------------------------------------------------------------------------------------------*/
.nav a {border-bottom: 0px solid #ffffff; text-decoration:none;}
.nav a:hover {text-decoration:none;}

.sidebar {margin-right: 3px; width: 255px;}
.sidebox {background: #ffffff !important; border: 0px solid #ffffff; margin: 3px 0;}
.sideboxTitle {background: #fff; padding: 0 5px; padding-top:8px; padding-bottom: 0px;height: 15px; line-height: 15px; text-align: right; border-bottom: 0px solid #ffffff; border-top: 0px solid #ffffff; border-left: 0px solid #ffffff;
color:#745749;
font-size: 25pt;
font-family: 'arial';
font-weight: ;
letter-spacing: -3px;
text-transform: lowercase;
line-height: 19pt;
text-decoration:none;}
.sideboxContent {background-color:#ffffff !important; color:#333; text-align: justify; padding: 10px;}
.profile-userpic {padding: 5px;}
.sidebox #profile, .sidebox #search, .sidebox #latestmonth {text-align: center;}
.sidebox #tags_sidebox, .sidebox #systemlinks, .sidebox #summary, .sidebox #freetext {text-align: justify;}
.latestmonth-active, .latestmonth-inactive {background: #FF0066; margin: 1px; height: 9pt; padding: 1px;}
.latestmonth-active:hover, .sidebox #latestmonth table a:hover {color: #FFCB99 !important;}
.sidebox #latestmonth table {width: 93%; margin: auto; color:#000; font-family: courier new; font-size: 7pt; font-weight: bold; height:9pt; text-transform: uppercase; word-spacing: 0px; letter-spacing:1px; text-decoration:none;}
.sidebox #latestmonth table a {color:#000000; font-family: courier new; font-size: 7pt; font-weight: bold; height:9pt; text-transform: uppercase; word-spacing: 0px; letter-spacing:1px; text-decoration:none;}
#tags_sidebox {font-size: 0; color: #333;}
#tags_sidebox a {display: block; font-size: 8.5pt;}

/*----------------------------------------------------------------------------------------------
CALENDAR PAGE
-----------------------------------------------------------------------------------------------*/
.entryHeader a, .month { width: 90%; margin: auto; text-align: center; color:#94DB4F; font-family: times new roman; font-size: 22pt; font-weight: bold; line-height: 14px; text-transform: lowercase; word-spacing: 0px; letter-spacing:-2px; text-decoration: none; padding-left: 5px;}
.daytitles {color: #ed1c1c; font: 7pt tahoma; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;}
.day, .day-blank, .day-count, .day-date {background-color:#ffffff; font-family: courier new; font-size: 7pt; color:#000; letter-spacing: 0px; line-height: 9pt; text-transform: uppercase; word-spacing: 1pt; text-decoration: none; text-align: center; padding-top: 2px;}
.daysubjects {color:#FF0066; font-family: courier new; font-size: 7pt; font-weight: bold; line-height: 13pt; text-transform: uppercase; word-spacing: 0px; letter-spacing:0px; text-decoration:none; padding-left: 40px;}
.tagstable {width: 95%; color:#333; font-family: courier new; font-size: 7pt; font-weight:bold; letter-spacing: 1px; text-transform: uppercase; text-decoration:none;}
li {list-style-type: square;}
ul {padding: 0; margin: 0 20px; text-align: left; color: #808080; font: 7pt courier new; font-weight: bold; text-transform: uppercase; line-height: 10pt;}
ul a {font-size: 7pt !important;}

/*----------------------------------------------------------------------------------------------
FOOTER
-----------------------------------------------------------------------------------------------*/
#footer-menu {margin: 3px 0; background: #ffffff; padding: 2px 5px; border: 0px solid #ffffff;}
#footer-menu a {color:#FF0066; font-family: tahoma; font-size: 6pt; font-weight: normal; line-height: 14px; text-transform: uppercase; word-spacing: 1pt; letter-spacing:1px; text-decoration:none; text-align:right;}
#footer-menu li {display: inline; padding: 0 10px;}
#footer-menu ul {margin: 0 auto; padding: 0; text-align: right;}
.header-title, .header-icon, .header-subtitle, .pagefooterblock, .header-menu, .profile-label, .bodyheaderblock, #postform img {display: none;}

/*----------------------------------------------------------------------------------------------
COMMENTS PAGE [ paid/plus accounts ]
-----------------------------------------------------------------------------------------------*/
.replyform {background: #fff; border: 1px solid #fff; font-family: arial!important; font-size: 8pt!important; line-height: 13pt !important; word-spacing: 4pt !important; color:#333 !important; text-decoration: none; margin: 3px 0; text-align: justify;}
.commentHeader {background: #fff; padding: 10px; font-family: tahoma;
font-size: 6pt;
word-spacing: 2pt;
line-height: 10pt;
font-weight: normal;
letter-spacing: 1px;
color:#aaa;
text-transform: uppercase;
margin-left: 8px;
height:12px;}
.commentHeaderScreened {background: #fff; padding: 10px; margin-left: 8px; font-family: tahoma; font-size: 6pt; color:#aaa; font-weight: normal; text-transform: uppercase; word-spacing: 2pt; line-height:10pt; letter-spacing: 1px; height:12px; border-bottom: 0px solid #ffffff; border-top: 0px solid #ffffff; border-left: 0px solid #ffffff;}
.commentHolder {background: #fff; border: 0px solid #ffffff; text-align: justify; margin: 3px 0; text-align: justify;}
.commentLinkbar ul {text-align: right; font: 7pt tahoma !important; font-weight: bold; letter-spacing: 1px !important; padding: 0 0 8px 0;}
.commentLinkbar, .commentLinkbar a { font: 7pt trebuchet ms !important; font-weight: normal !important; letter-spacing: 1px !important; word-spacing: 2pt; text-transform: uppercase !important; }
.commentLinkbar li {padding: 0 2px; display: inline;}
.commentUserinfo {font: 7pt courier new; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-align: center; padding: 0 5px 5px 5px; margin-left: 15px; float: left;}
.commentUserinfo-usericon img {padding: 0px; border: 1px solid #ddd;}
.commentHeaderSubject { font-family: tahoma;
font-size: 6pt;
color:#aaa;
line-height: 10pt;
word-spacing: 2pt;
letter-spacing: 1px;
font-weight: normal;
text-transform: uppercase; height:12px;}
.commentText {padding: 0 5px 5px 5px; margin-right: 15px;}
#commenttext {width: 98%;}

/*---------------------------------------------------------------------------------------------
TINY ICONS [ http://famfamfam.com ]
-----------------------------------------------------------------------------------------------*/
* html div.subcontent {/* fixes an IE reply page bug */height: 1%;clear: none;}
* html div.box#commentform {/* fixes an IE reply page bug */position: absolute;border-width: 1px;border-style: solid;border-color: #fff;background-color: #fff;}
.ljuser img {display:none; width: 0;height: 0;background-repeat: no-repeat;background-color: transparent;background-image: url(http://i40.tinypic.com/168exrr.jpg);padding: 16px 10px 0px 0px !important;}
.ljuser a:hover b {color: #94DB4F !important;background: transparent;}
.ljuser a b {color:#aaa !important; font:6pt tahoma !important; letter-spacing: 1px !important; font-weight: normal !important; text-transform: uppercase!important;}
img[src*="icon_protected.gif"]{display:none; width: 0; height: 0; padding: 12px 14px 0 0 !important; background: url();}
img[src*="icon_private.gif"]{display:none; width: 0; height: 0; padding: 12px 14px 0 0 !important; background: url();}
img[src*="icon_groups.gif"]{display:none; width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url();}

img[src*="userinfo.gif"] {display:none;width: 0; height: 0; padding: 14px 10px 0 0 !important; background-repeat: no-repeat;
background-image: url(http://i40.tinypic.com/168exrr.jpg) !important;}
img[src*="community.gif"] {display:none; width:0; height: 0; padding: 14px 9px 0 0 !important; background-repeat: no-repeat;
background-image: url(http://i40.tinypic.com/168exrr.jpg) !important;}

.entryLinkbar a[href*="subscriptions"], .entryLinkbar a[href*="flag"], .entryLinkbar a[href*="tellafriend"], .entryLinkbar a[href*="memadd"], .entryLinkbar a[href*="edittags"], .entryLinkbar a[href*="editjournal"] {display: none;}
.entryLinkbar a[st_page="home"]{display:none;}
.commentLinkbar a[href*="subscriptions"], .commentLinkbar a[href*="freeze"] {display:none;}

/*----------------------------------------------------------------------------------------------
ADD HEADER IMAGE [ edit the width, height and header url ]
-----------------------------------------------------------------------------------------------*/
.pageblock {background: url() top center no-repeat; padding-top: 0px; width: 700px; margin: auto;}


Any help on how to do this would be great.

Excavator
04-21-2011, 11:25 PM
Hello petitemonstra,
When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

Some positioning examples here - http://www.barelyfitz.com/screencast/html-training/css/positioning/
and
http://ryanfait.com/position-fixed-ie6/

petitemonstra
04-22-2011, 03:13 AM
Ok, I went back and edited my post. thanks for the tip. ;)
But do you know how to code the fixed sidebar?

petitemonstra
04-22-2011, 10:20 PM
please someone help me! Ive tried everything and asked ever where I know where to go. even if its no doable just let me know.

Excavator
04-23-2011, 12:12 AM
please someone help me! Ive tried everything and asked ever where I know where to go. even if its no doable just let me know.

Of course it's "doable" but your site has some other issues that make it difficult enough that a total re-write is probably in order.
Did you look at the link I suggested in my first post? The explain how position: fixed; can work.

Issues you will need to resolve first:

Your code totally ignores the box model - See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

The huge negative margins you use to position elements are not needed if you build your site so the document flows naturally. Negative margins work, sometimes ... and sometimes not so reliably.

Tables. See the link in my signature line about tables. I understand that #lj_controlstrip probably comes with your hosting or blogger package but the only other table your layout requires is the calendar in #latestmonth

See this example of a fixed left column layout -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: url(http://i53.tinypic.com/s49nix.gif);
}
#leftColumn {
height: 400px;
width: 150px;
padding: 25px;
position: fixed;
top: 50px;
left: 25px;
background: #0f0;
}
#pageblock {
width: 450px;
margin: 50px 0 0 225px;
padding: 25px;
background: #999;
}
p#bottom {margin: 1200px 0 0;}
</style>
</head>
<body>
<div id="leftColumn">
<p>this left column does not move</p>
<!--end leftColumn--></div>
<div id="pageblock">
<p>top of page</p>
<p>scroll to bottom</p>
<p id="bottom">bottom of page</p>
<!--end pageblock--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum