Posts width/margin problem after moving sidebar

  • Resolved Trailmix

    (@trailmix)


    15 years, 4 months ago

    I’m using the theme Live by herdo.com which started out having the main body on the left and a double column right sidebar. I made it a single sidebar on the left, main body on the right. All my static pages display fine but on my posts page (named Blog), the sidebar moves up and right, the menu drops lower, and the posts want to take the entire page width. See the problem here: https://www.brazilministry.com/blog/. I want the posts to be 700px width on the right side of the page like the static pages. I hope if I fix that, the menu and sidebar will also display correctly.

    Thanks for any help! I’m new to WordPress and css.
    -Kristina

Viewing 15 replies - 1 through 15 (of 15 total)

  • Start by taking the <html> and </html>`1 tags out of the text widget.

    Thread Starter Trailmix

    (@trailmix)

    Ok, done, but that didn’t change the problem……….

    Thread Starter Trailmix

    (@trailmix)

    I’m wondering if this could be caused by a missing or extra div or /div tag? And if so, where would I look for that? Or what else could be the problem?? (oh, and I got rid of the text box – didn’t need it anyway)

    Thanks,
    Kristina

    check if you have included the sidebar before the top-nav in either single.php or index.php (or whatever php file you use for ‘blog’).

    Thread Starter Trailmix

    (@trailmix)

    I don’t see top-nav in either of those files, but I did find the php code for the navigation.php file. Anyway, the sidebar is before that in the index.php but not in single.php. I moved it up and still no change. I also have a file called page.php and I’m not really sure what it’s for, but I found the sidebar and moved it up above the navigation there too, but still have the problem. Any other suggestions?

    if you look, you now have the problem on all pages! sorry, mate. you have to undo it all – moving it up was the wrong direction.
    you need the sidebar below the navigation.
    PS: i probably worded it a bit unclear the first time.

    Thread Starter Trailmix

    (@trailmix)

    Ok, I just saw that LOL. Well at least I’m getting closer to the solution. I fixed it in the single.php and page.php which I messed with, and so I guess I can assume it’s the index.php that is showing my blog page. It looks like the sidebar was originally in the wrong place there, but I tried moving it down and, well, the menu is in the right place now but the sidebar is below everything, and the posts still want to take the entire width of the page.

    Thank you for your help and patience.

    Thread Starter Trailmix

    (@trailmix)

    I think I have the sidebar in the right place now… but something is still not right, aarrrghh.

    see if you can find something in the index.php like (with a lot of <?php>) – ie. the ‘wordpress loop’:

    <li>
<div  class="fr">
<h2><a href="xxxxxxxxxxx" class="title-2" rel="bookmark" title="Permanent Link to yyyyyyyyyy">yyyyyyyyyyyy</a></h2>
<div class="list-title-info">Filed under <a href="xxxxxxxxxxxx" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></div>
</div>
<div class="date fl">
<span>Oct</span>
25	</div>
<div class="text clear">
<p>yyyyyyyyyyyyyyyyyyyyyyyyyyy</p>
</div>
<div class="list-title-info"></div>

</div>

</li>

    at least the last </div> before the is too much.

    Thread Starter Trailmix

    (@trailmix)

    Found it! I took out the last </div> and now the posts all line up in their column the correct width. THANK YOU!

    The sidebar is still too far left. Any ideas?

    You’re obviously good at this and I really appreciate you helping a newbie ??

    it’s a cheat:
    in index.php, just before you call the sidebar, after the </div> that closes the ‘top-nav’ include following code:
    <div style="float:left;width:20px;height:20px;">&nbsp;</div>
    this wedges an invisible cube to the left of the sidebar and forces it 20px to the right. my simulation looked alright in IE7 and firefox.

    kind of trial and error.
    if it does not work, there will be another solution ??
    fingers crossed.

    Thread Starter Trailmix

    (@trailmix)

    Looks like that will work well enough. Thanks again. I still need to figure out why the date jumps to the right of the title when I select a single post, but at least the site is presentable.

    Just curious – how do you do a simulation?

    i can check websites in two ways:
    first, in my browser, i go to ‘view’ ‘source’ and than copy/paste the code into dreamweaver – then i can check validation etc.
    sometimes i have to copy/paste the style.css as well, and some of the picture files.
    second, in firefox i use the developers plugin, that allows to play with the styles and the html in realtime on the screen. it can also highligh page elements, images, and much more.
    obviously, i only get to see the html generated by the php files, that leaves some guesswork.
    from there it is logic, exclusion or confirmation of ideas, etc – very much like SODUKO ??

    with the date display in your blog – just compare the two files – index.php and single.php EXACTLY word for word, and look for the difference in the arrangement of the <div>s and other structural elements. then use the arrangement of the file you leike better, and implement it into the other file. always keep track of opening/closing tags.

    look at the code structure of index.php versus single.php (where the post title and date shows):

    <!--singel.php structure-->
<div class="column-2 fr">

<ul class="list-3">

<div class="fl">
	<h1>xxx blog_title xxx</h1>
	<div class="list-title-info">Filed under <a href="xxxxxxxxxxxx" title="View all posts in yyyyyyy" rel="category tag">yyyyyyyy</a>
	</div>
</div>

<div class="date fl">	<span>Oct</span> 25
</div>

<div class="text clear"> blablablablablabal
</div>

</ul>
<!-- end of single.php structure-->

<!-- index.php structure-->
<div class="column-2 fr">

<ul class="list-3">
<li>
<div class="fr">
	<h2><a href="xxxxxxxxx" class="title-2" rel="bookmark" title="xxx blog_title xxx"> blog_title</a></h2>
	<div class="list-title-info">Filed under <a href="xxxxxxx" title="View all posts in yyyyyy" rel="category tag">yyyyyyy</a>
	</div>
</div>

<div class="date fl">	<span>Oct</span> 25
</div>

<div class="text clear"> blablablablablabal
</div>

<div class="list-title-info"></div>
</li>
<!--end of index.php structure-->

    if you look very close, the only difference in the structure is a ‘<div class=”fr”>’ in the index.php – the way you want to have the design – and a ‘<div class=”fl”>’ in the single.php.
    in the single.php, just change this to <div class=”fr”> – voila! both desings should look the same.

    i love sodukos ??

    Thread Starter Trailmix

    (@trailmix)

    As I was falling asleep last night it occurred to me to check for exactly that — looks like I’m just one step slow. I’m sure I messed it up tinkering with fr and fl when I moved the original sidebar to the left side. I thought I had put them back correctly but I missed this one.

    I’ll have to check out the firefox plugin. Seems quite useful.

    Funny you mentioned sudoku – I like them too ??

    Thanks again for helping me conquer my first WordPress site. My sister (who it’s for) is very pleased with it, and I am too.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Posts width/margin problem after moving sidebar’ is closed to new replies.