homepage Welcome to WebmasterWorld Guest from 54.163.139.36
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Wordpress Post Count in Sidebar alignment issue
terrybarnes

5+ Year Member



 
Msg#: 3839262 posted 7:32 pm on Jan 31, 2009 (gmt 0)

I've got a problem with the alignment of the post count when I add it to the sidebar in Wordpress.

From what I can see, after hunting around the web, this is a known problem but I just can't seem to figure out how I can resolve the issue.

The alignment of the category titles is perfect but when I add the post count this then gets displayed underneath the category title.

From what I've read so far the problem is due to the block element that you make the sidebar css with but I've no idea how I can get away with not using this - any ideas?

Here's the css for the sidebar:

#sidebar {
width: 238px;
float: right;
line-height: 1.5em;
display:inline;
margin: 8px 8px 8px 0px;
padding: 10px;
font-size:10px;
}
#sidebar h2 {
color: #999;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
border-bottom: 1px solid #ccc;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
#sidebar ul {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
}

#sidebar ul li a {
border-bottom: 1px solid #ccc;
color: #F37134;
display: block;
text-decoration: none !important;
margin: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 25px;
background-image: url(images/navbulle.png);
background-repeat: no-repeat;
background-position: 10px 50%;
}
#sidebar ul li a:hover{
border-bottom-color: #fff;
color: #FFFFFF !important;
background-color: #2aace2;
}

Any help would be very much appreciated as I'd really like to add the post count but as it stands it looks terrible so I've had to remove it.

 

Moby_Dim

10+ Year Member



 
Msg#: 3839262 posted 5:00 pm on Feb 2, 2009 (gmt 0)

Btw there seems to be a bug in #sidebar css (display:inline).

But it is not the problem solution, may be. Which element corresponds to posts counter? what about a snippet of resulting html code? etc.

terrybarnes

5+ Year Member



 
Msg#: 3839262 posted 5:17 pm on Feb 2, 2009 (gmt 0)

Thanks for replying - I'm nor sure what you mean when referring to a bug with the display:inline;

The resulting html from Wordpress is this:

<ul>
<li class="cat-item cat-item-87"><a href="../cat1/">Category1</a> (2)</li>
<li class="cat-item cat-item-41"><a href="../cat2/">Category2</a> (8)</li>
<li class="cat-item cat-item-59"><a href="../cat3/">Category3</a> (1)</li>
</ul>

The bit in the brackets is the post count.

Moby_Dim

10+ Year Member



 
Msg#: 3839262 posted 5:46 pm on Feb 2, 2009 (gmt 0)

ok then... try to play with #sidebar ul li a width and/or floating to left may be. Now your #sidebar ul li a are block elements and they have the whole width of the column... Add border: 1px solid red property for a while -you'd see the problem, may be, and understand what to do I'm sure

terrybarnes

5+ Year Member



 
Msg#: 3839262 posted 7:10 pm on Feb 2, 2009 (gmt 0)

I don't just think it's down to the CSS - I think, from doing a bit of research, it's also down to the Wordpress php files, namely the classes.php file.

I've attempted what you suggested but the count appears outside of the element for some strange reason.

Moby_Dim

10+ Year Member



 
Msg#: 3839262 posted 7:48 pm on Feb 2, 2009 (gmt 0)

There's nothing to do with classes.php, i'm sure. The problem is in html & css visual representation.

If you able to wrap your counter in a <span> element so: <li class="cat-item cat-item-87"><a href="../cat1/">Category1</a> <span>(2)</span></li> , I'd propose 100% working solution:

make this span css like this: display:block; float: right;

and <a> element must have float: left and the width less than #sidebar width to let the span counter fit in one line right after <a>

In other words: make two divs (left (<a>) floats to left and right (<span>) floats to right) inside the third div (li)

[edited by: eelixduppy at 3:10 pm (utc) on Feb. 3, 2009]
[edit reason] disabled smileys [/edit]

Moby_Dim

10+ Year Member



 
Msg#: 3839262 posted 7:52 pm on Feb 2, 2009 (gmt 0)

as far as i remember, you can change html code for this purpose either from sidebar.php in the wp theme or you have to change a bit of code in the function which is responsible for categories lists output. But not in a class.php I'm 100% sure.

terrybarnes

5+ Year Member



 
Msg#: 3839262 posted 8:42 pm on Feb 2, 2009 (gmt 0)

That's the main problem I seem to be having. I'm running the latest version of WP2.7 and my theme supports the dynamic sidebar so there's very little on the sidebar.php page for that theme. I've looked through the WP files and can't see anything obvious.

Perhaps there's Categories Widget to use in place of the standard WP version, which may work correctly.

terrybarnes

5+ Year Member



 
Msg#: 3839262 posted 9:04 pm on Feb 2, 2009 (gmt 0)

Hi, me again! Okay, I've had another look at this and what I'd actually like is for the post count to be inside the link like so:

<li class="cat-item cat-item-87"><a href="../cat1/">Category1 (2)</a></li>

Now, this seems to work perfectly okay but I just can't seem to find this particular bit of code in any of the WP files - I'm presuming that's where it's bringing in the post count and category details from. It's driving me insane as it seems such a simple thing but it must be the php that's doing the work.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved