Single Post Vertical Align

link?

https://www.winterealm.com/blog/index2.php?p=141

this is just a temporary draft that is used on my existing wordpress blog.

Well, you have quite a number of errors, which could be contributing to this issue. In one case, you have a closed li tag that isn’t even open – don’t know if that would really affect much, but it’s possible. So you can start by validating your code to see if that helps…

Quote frankly, it doesn’t look like it’s vertically aligned to center (it’s not in the center of your content area for me). It looks like something is pushing down the content…again it may be an unclosed tag or something that’s doing it.

That being said, you have a lot of errors in your CSS too – like “margin 0 0 40px;” – you’re missing the 4th setting. I see that several times.

Also, this section:

.entry ul li:before, #sidebar ul ul li:before {
content: "0BB 020";
}

If you remove that, it brings it up a bit (what’s that for, anyway?) but not all the way.

You might start with that!

Hi Doodle,
Firstly, Thank you for your time and effort for looking into my problem. I did a xhtml check on my original site, which was based on the standard theme and realized a similar number of errors as well! ><

But anyways, i believe the problem IS an alignment issue, if you look at this link to a longer post:

https://www.winterealm.com/blog/index2.php?p=127

I’m not saying it isn’t an alignment issue – there most certainly *is* something out of whack. I’m just saying it’s not a *vertical* alignment issue. You have no setting for it anywhere – not even in the tables. To me, it looks like a margin or padding issue.

I will say this, though – if you just went tableless, you’d probably save yourself a ton of grief. This is, in all honesty, a very simple layout, and you could easily cut back on a *ton* of code and make it all easier on yourself by removing those tables.

A simple base for this layout is like so:

<div id="container">
<div id="header">
header stuff here
</div>
<div id="main">
<div id="sidebar">
sidebar stuff here
</div>
<div id="content">
content posts here
</div>
<hr class="clear" />
</div> <!-- /main -->
</div> <!-- /container -->

See how simple that is? All you have to do is plug your code – sans tables – right into the specified areas. Your CSS (at it’s very basic):

body {
text-align:center;
}
#container {
width:700px;
margin:0 auto;
}
#sidebar {
width:150px;
float:left;
}
#content {
width:550px;
float:right;
}
hr.clear {
visibility:hidden;
display:block;
clear:both;
}

factor in all of your paddings, colors, font sizes all that with the stylesheet. Seriously, it’s that simple – and much MUCH easier to figure out where things that have “gone bad” are.

Yeah you’re right. What I did was to combine all the header, body, posts.php together in 1 index, when I should stick to the original modular logic. I’ll re-organize all that stuff. ??
I think template you gave really puts things into perspective. Will convert my layout and tell you if things are fixed! ??

Noob qn: Can I actually have the same graphical borders placed & aligned without tables? Coz I’ve always only known using tables as the only way to achieve this.

I’ve uploaded the flash files so you can see how the design looks like. ??

Thank you so much Doodlebee. ??

>>Can I actually have the same graphical borders placed & aligned without tables?<<

Yes.

What *I* would do, personally (simply because it’s the easiest solution, IMO – but it’s by far not the *only* solution) is to create an image and set it in the “container” div. So, your container div is 700px wide – create an image that’s 700px wide and as tall as your border. In the image, place one “square” (that what they look like to me!) all the way to the left. Place another one at 150px (roughly) and another all the way to your right. Then save one square all by itself as a separate file. For purposes of example, we’ll call the 700px wide image “border.gif” and the single square “square.gif”.

Then you’d alter the code a bit:

#container {
background-image:url(“images/border.gif”);
background-repeat:repeat-y;
}

(I think it’s “y” anyway, it might be “x” – I always get them confused! LOL)

That’ll give you the graphical border down the sides of the outer container itself (not the header, though – if you want it around the header, too, then place the #header container *inside* the #container div), and also give you the separation between the sidebar and content.

Then in the code, add in a footer:

<hr class=”clear” />
</div> <!– /main –>
<div id=”footer”>
<!– IE needs this comment to be here –>
</div>
</div> <!– /container –>

#footer {
background-image:url(“images/square.gif”);
background-repeat:repeat-x;
height:20px;}

And that will give you your bottom graphical border – “height” being whatever the height of the actual graphic is.

THANK YOU SO MUCH. It’s always the logic that baffles me. Such a simple solution! God bless you!