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 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Sidebar moved, post width increased magically?

    Hi! Ive been working on my website on wordpress for the past few weeks, and have noticed today that my right sidebar seems to have pushed itself across the page and my central column showing my recent posts has magically increased its width?

    Im not sure if this is because of the update for the new wordpress or something that I have accidently tampered with?!! How can I resolve this, is this within the stylesheet? I checked on the W3 validation and I have 2 errors, but they dont seem to be related to unclosed div tags?

  • #2
    New Coder
    Join Date
    Nov 2010
    Posts
    43
    Thanks
    4
    Thanked 2 Times in 2 Posts
    Hi there suizka!

    Just taking a look at your site; out of interest, did you design this template yourself?

    The CSS seems bizarre;

    What I think may be your problem is that the width of your 'content' div is set to 92%, whilst you're using fixed sizes in 'px' for the left and right hand side column.

    First thing to try would be entering the stylesheet, finding the #content section and setting to a fixed with in px (whatever that needs to be).

    Try that and if it doesn't work I'll try to come up with some other ideas; has this only happened since the WP update?

    Let me know!

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello suizka,
    This layout is a little complicated...
    If you remove the margin:0 -240px 0 0; from #sidebar_right, the sidebar comes back in.

    I can't imagine that negative right margin is a mistake though.
    Try it and see if it works for you. #sidebar_right has two entries though, it gets margin from its entry in style.css but removing that doesn't change anything. You will also need to remove the same line from the attacahed styles in the head of the document.
    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

  • #4
    New Coder
    Join Date
    Sep 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi! Thanks for your posts - I didnt create the theme myself, its called the F2 theme and I have only slightly modified it, such as the colors, fonts, header etc.

    Yes its seems after the update it went all a bit wonky?!! I tried changing the post width from the % to 450px, I can see that it has now shortened the post but the column is still stuck all the way over on the right.

    I also tried changing taking out the margin in the style.css and not sure where to find this on the attached styles in the head of the document? Any other suggestions?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This layout looks like one of those old ones when they used to think the content needed to be presented in the markup before the left or right columns... for SEO.

    Why so complicated? So many negative margins...
    Where do you find the F2 theme at? Maybe a link to that will show the difference between a working version and yours.

    I also tried changing taking out the margin in the style.css and not sure where to find this on the attached styles in the head of the document?
    FireBug really helps when looking for this sort of thing.

    #sidebar_left CSS can be found:
    • line #64 in the head of the document
    • line #110 in style.css

    Also find .sidebar
    • line #241 in style.css
    • line #107 in style.css


    That one in the head looks like this (highlighted in red) -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    
    <head profile="http://gmpg.org/xfn/11">
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title> </title>
    
    <link rel="stylesheet" href="http://energiacelestial.com/wp-content/plugins/sitepress-multilingual-cms/res/css/language-selector.css?v=1.8.3" type="text/css" media="all" />
    
    <link rel="stylesheet" href="http://energiacelestial.com/wp-content/themes/f2/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://energiacelestial.com/wp-content/themes/f2/print.css" type="text/css" media="print" />
    
    <link rel="pingback" href="http://energiacelestial.com/xmlrpc.php" />
    
    <link rel="alternate" type="application/rss+xml" title=" &raquo; Feed" href="http://energiacelestial.com/?feed=rss2" />
    <link rel="alternate" type="application/rss+xml" title=" &raquo; Comments Feed" href="http://energiacelestial.com/?feed=comments-rss2" />
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://energiacelestial.com/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://energiacelestial.com/wp-includes/wlwmanifest.xml" /> 
    <link rel='index' title='' href='http://energiacelestial.com' />
    <meta name="generator" content="WordPress 3.0.3" />
    <script type="text/javascript">var icl_lang = 'en';var icl_home = 'http://energiacelestial.com';</script>
    <script type="text/javascript" src="http://energiacelestial.com/wp-content/plugins/sitepress-multilingual-cms/res/js/sitepress.js"></script>
    <meta name="generator" content="WPML ver:1.8.3 stt:1,2;0;0;0" />
    
    <style type="text/css">#lang_sel_list a.lang_sel_sel, #lang_sel_list a.lang_sel_sel:visited{color:#444444;}#lang_sel_list a:hover, #lang_sel_list a.lang_sel_sel:hover{color:#000000;}#lang_sel_list a.lang_sel_sel, #lang_sel_list a.lang_sel_sel:visited{background-color:#ffffff;}#lang_sel_list a.lang_sel_sel:hover{background-color:#eeeeee;}#lang_sel_list ul a.lang_sel_other, #lang_sel_list ul a.lang_sel_other:visited{color:#444444;}#lang_sel_list ul a.lang_sel_other:hover{color:#000000;}#lang_sel_list ul a.lang_sel_other, #lang_sel li ul a:link, #lang_sel_list ul a.lang_sel_other:visited{background-color:#ffffff;}#lang_sel_list ul a.lang_sel_other:hover{background-color:#eeeeee;}#lang_sel_list a, #lang_sel_list a:visited{border-color:#fff;} #lang_sel_list  ul{border-top:1px solid #fff;}</style>
    
    <!-- Fluid Blue customized styles generated by functions.php -->
    <style type="text/css">
    #header {
    	background-image: url('http://energiacelestial.com/wp-content/uploads/2010/11/energia6.jpg');
    	background-repeat: no-repeat;
    	background-color: #ffffff;
    	height: 238px;
    }
    #headerlogo {
    	visibility: hidden;
    }
    #hmenu li.hmenu_rss {
    	display: none;
    }
    #headerlogo h1 a {
    	color: #000000;
    }
    #headerlogo div.description {
    	color: #ffffff;
    }
    #container {
    	padding-right: 240px;
    	padding-left: 240px;
    }
    #wrapper {
    	border-right-width: 240px;
    	margin-right: -240px;
    	border-left-width: 240px;
    	margin-left: -240px;
    }
    #sidebar_right {
    	width: 200px;
    	margin-right: -240px;
    	font-size: 1em;
    }
    #sidebar_left {
    	width: 200px;
    	margin-left: -240px;
    	font-size: 1em;
    }
    .postentry p {
    	font-size: 1em;
    }
    .postentry ul {
    	font-size: 1em;
    }
    .postentry ol {
    	font-size: 1em;
    }
    
    </style>
    
    </head>

    Have a look at some proven 3-column layouts

    And have a look at how simple it can really be.
    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Where do you find the F2 theme at? Maybe a link to that will show the difference between a working version and yours.
    Ah yes, a wordpress theme. http://wordpress.org/extend/themes/f2
    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


  •  

    Tags for this Thread

    Posting Permissions

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