Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help making a Fixed Sidebar

    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...


    Code:
    /* 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.
    Last edited by petitemonstra; 04-22-2011 at 02:13 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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...s/positioning/
    and
    http://ryanfait.com/position-fixed-ie6/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I went back and edited my post. thanks for the tip.
    But do you know how to code the fixed sidebar?

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by petitemonstra View Post
    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. 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 -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •