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 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Sidebar CSS Issue

    Let me start with some basic background on the problem to eliminate some steps in troubleshooting. I have been trying (mind you from a novice background) to make a decent horizontal nav bar. I was making some CSS edits and minor edits in the header. When the nav bar didn't take, I removed the code from them but must have removed something else as well because now my right sidebar resides after each post, even after checking permalinks. The fact that the sidebar sits after every post, even as singles surely tells me there's a problem with coding.

    I had to make a ton of changes to the original CSS to even have two sidebars and a lot of other things but here is the CSS code:

    Code:
    body { 
    
    	background-color: #000000;
    
    	color: #999;
    
    	font: 62.5%/125% 'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;
    
    	margin: 0;
    
    	padding: 0;
    
    	}
    
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-3550791-1");
    pageTracker._initData();
    pageTracker._trackPageview();
    </script>
    
    /* hr { display: none; } */
    
    
    
    hr {
    
    	background-color: #22201d;
    
    	border: 1px dashed #363430;
    
    	height: 10px;
    
    	margin: 10px 0;
    
    	width: 981px;
    
    	}
    
    
    
    .hr {
    
    	background-color: #22201d;
    
    	border: 1px solid #363430;
    
    	height: 10px;
    
    	margin: 10px 0;
    
    	width: 981px;
    
    	}
    
    	
    
    a:link, a:visited, a:active { color: #d8d7d3; text-decoration: none; }
    
    a:hover { color: #fff; text-decoration: none; }
    
    
    
    ul { list-style: none; }
    
    
    
    input, textarea {
    
    	color: #FFFFFF;
    
    	font-size: 11px; 
    
    	text-decoration: none; 
    
    	background-color: #161410; 
    
    	border: 1px solid #363430;
    
    	padding: 5px;
    
    	}
    
    	
    
    blockquote {
    
    	background: #1b1814;
    
    	padding: 1px 15px 5px;
    
    	border-left: 3px solid #35302a;
    
    	border-bottom: 1px solid #35302a;
    
    }
    
    blockquote {
    
    border-left: 1px solid #hex_color_code;
    
    }
    
    table { width: 100%; border-collapse: collapse; }
    
    	th { border-bottom: 1px solid #35302a; text-align: left; }
    
    
    
    pre {
    
    	padding: 5px 0;
    
    	border-top: 1px dotted #35302a;
    
    	border-bottom: 1px dotted #35302a;
    
    }
    
    
    
    
    /*  -----|  Structure  |----------------------------------------------------  */
    
    	
    
    #page {
    
    	margin: 0px auto 0px;
    
    	padding: 0;
    
    	width: 980px;
    
    	}
    
    	
    
    #header {
    
    	text-align: center;
    
    	}
    
    
    #wrapper, #headerimg { width: 978px; }
    
    /*#wrapper { background: url('images/content_bkg.gif') repeat-y top left;}*/
    
    
    
    .image {
    
    	background: #22201d url('images/image_left.png');
    
    	border: 1px solid #363430;
    
    	height: 149px;
    
    	width: 372px;	
    
    	}
    
    	
    
    	.bkgleft { background: url('images/image_left.jpg'); float: left; }
    
    	.bkgright { background: url('images/image_right.jpg'); float: right; }
    
    
    html>body #searchform table {
    	padding: 5px 0 0 0;
    	margin: 0;
     	}
    
    #footer {
    
    	font-family: Georgia, 'Times New Roman', serif; 
    
    	color: #999;
    
    	}
    
    #content, #sidebar { 
    
    	border-left: 1px solid #363430;
    
    	/*border-right: 1px solid #363430;*/
    
    	padding: 0 10px; 
    
    	}
    
    
    #content { 
    
    border-right: 1px solid #363430;
    
    }
    
    
    #sidebar-left {
    
    border-left: 1px solid #363430;
    
    	/*border-right: 1px solid #363430;*/
    
    	padding: 0 10px; 
    
    	}
            #content { float: left; font-size: 1.1em; width: 517px; }
    
    	#content h2 { margin: 0 0 10px; }
    
    	#content p { line-height: 1.5em; }
    
    	#content img { max-width: 500px; border: 0px;}
    
    	
    
    	#sidebar-left { float: left; border-left: 0; width: 200px; }
    
    	#sidebar-left h3 { color: #bd934f; margin: 15px 0 5px; font-variant: small-caps; }
    
    	#sidebar-left ul { margin: 0 0 10px; padding: 0; border-top: 1px solid #363430; border-bottom: 1px solid #363430; }
    
    	#sidebar-left li { display: block; padding: 4px 10px; background: #22201d; margin: 1px 0;}
    
    	#sidebar-left li img { max-width: 75px; float: left; margin-right: 4px; border: 1px solid #bd934f;}
    
    	#sidebar-left li p { margin: 0px; border: 0px; padding: 0px; clear: both; height: 1px;}
    
    	#sidebar-left li:hover { background: #363430; }
    
    	
    
    	#sidebar { border-left: 0; float: right; width: 200px; }
    
    	#sidebar h3 { color: #bd934f; margin: 15px 0 5px; font-variant: small-caps; }
    
    	#sidebar ul { margin: 0 0 10px; padding: 0; border-top: 1px solid #363430; border-bottom: 1px solid #363430; }
    
    	#sidebar li { display: block; padding: 4px 10px; background: #22201d; margin: 1px 0; }
    
    	#sidebar li:hover { background: #363430; }
    
    		
    
    #searchform { background: #22201d; padding: 10px; text-align: center; }
    
    	#s { width: 160px; }
    
    	
    
    .goleft { float: left; }
    
    .goright { float: right; }
    
    
    
    ul.navigation { 
    
    	border-top: 1px solid #363430; 
    
    	border-bottom: 1px solid #363430; 
    
    	}
    
    	
    
    	ul.navigation li { display: block; padding: 4px 10px; background: #22201d; margin: 1px 0; }
    
    	ul.navigation li:hover { background: #363430; }
    
    
    
    /* Post Structure */
    
    
    
    .post { padding: 10px 0 0; }
    
    	.widecolumn .post { padding: 0; margin: 0; }
    
    	
    
    .top { padding: 15px 10px 0px; background: #1b1814; margin-bottom: 15px; border-bottom: 1px solid #35302a; }
    
    .lastfive { padding-left: 10px; padding-right: 10px; }
    
    	.postmetadata { margin: 3px 0; padding: 0; }
    
    	.postmetadata a { font-weight: bold; }
    
    		#sidebar .postmetadata { line-height: 1.5em; }
    
    	.continue { font-weight: bold; font-size: 1.3em; }
    
    	
    
    	.top .entry { font-size: 1.1em; }
    
    	.entrytext { padding: 0 10px 0; line-height: 2em; font-size: 1.1em; }
    
    	
    
    	.entrytext h2 { border-bottom: 1px solid #bd934f; display: block; }
    
    	.entrytext ul { list-style-type: square; }
    
    	
    
    /* Comments Structure */
    
    
    
    .comments { padding: 10px; margin-top: 15px; background: #1b1814; border-top: 1px solid #35302a; position: relative; }
    
    	#commentform p { float: left; margin: 0 10px 10px 0; }
    
    	
    
    .commentlist { background: #1b1814; list-style: none; margin: 0; padding: 0; }
    
    	.commentlist li { background: #161410; margin-top: 10px; padding: 5px 0 0; }
    
    	.commentlist li p { padding: 5px 10px 0; margin: 0; }
    
    	.commentlist li p.commentmetadata { border-bottom: 1px solid #35302a; background: #181612; padding: 5px 10px; margin-top: 10px; }
    
    	
    
    ul.archive { list-style: none; padding: 0; margin: 0 10px 25px; font-size: 1.3em; }	
    
    ul.archive li { display: inline; }
    
    
    
    
    
    /*  -----|  Typography  |---------------------------------------------------  */
    
    
    
    h1, h2, h3, h4, h5, h6 { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; }
    
    
    
    h1 { color: #fff; font-size: 2em; margin: 0 0 8px; }
    
    h1:before, h1:after { content: " . . "; color: #444; }
    
    h1 span { color: #bd934f; }
    
    
    
    h2 { color: #bd934f; font-size: 1.65em; margin: 0; padding: 1px 0; display: block; border-bottom: 1px solid #35302a; line-height: 1em;}
    
    	.post h2 a { color: #FF9900; font-weight: bold; }
    
    	.post h2.first { font-size: 1.75em; }
    
    	
    
    	.widecolumn h2.title { 
    
    		display: block; 
    
    		padding: 13px 10px;
    
    		background: #1b1814;
    
    		margin: 0 0 15px; 
    
    		border-bottom: 1px solid #35302a; 
    
    		font-size: 1.75em; }
    
    
    
    .description { color: #666; font-weight: bold; }
    
    
    
    .comments h3 { margin: 0 0 10px 0; color: #bd934f; line-height: 1em;}
    
    
    
    .wp-pagenavi .pages { border: 0px; background-color: #000000;}
    
    .postmetadata { border-top: 1px solid #363430; clear: both; width: 100%; text-align: left;}
    
    
    
    
    
    
    
    /*  -----|  Miscellaneous  |------------------------------------------------  */
    
    
    
    .clearfix:after {
    
        content: "."; 
    
        display: block; 
    
        height: 0; 
    
        clear: both; 
    
        visibility: hidden;
    
    }
    I posted the full code just to make sure I couldn't possibly have missed anything else.

    I would appreciate any help, here. I've been banging my head on the wall for a few hours now making adjustments to no avail.

    The site domain is http://lifemisled.com. It is NSFW, so please use your discretion.

    Thank you!

    EDIT:

    If I change this small piece of code

    Code:
     #content { float: left; font-size: 1.1em; width: 517px; }
    to

    Code:
     #content { float: left; font-size: 1.1em; width: 516px; }
    My right sidebar pops back up. I don't believe that's the error I made but it works.
    Last edited by lifemisled; 12-10-2009 at 07:42 PM. Reason: Progress Via Self-Tests

  • #2
    Regular Coder Jazzo's Avatar
    Join Date
    Apr 2008
    Location
    New York City
    Posts
    164
    Thanks
    20
    Thanked 2 Times in 2 Posts
    Floats have absolutely no effect on other floats. You have to define the dimensions of the sections you are floating so that one float doesn't push away the other. For best results, I suggest using percentages. The problem with pixels is that people have different screen sizes. Using absolute measurements limits flexibility. This is really just me being a code snob, but it will probably eliminate all future problems. NB: When using percentages and floats, the two percentages have to add up to LESS than a 100, not 100 exactly.
    ~Julian
    14 y/o web developer, drummer, and Bridge player

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Start with fixing error in your markup, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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