A buddy of mine desired an easy way of formatting a single Unordered List so it would resemble the neat & tidy rows of a table. I’m sure there’s several ways of doing this & by no means is this anything new; just thought it might come in handy for someone else too.
Super simple, the most important part is to float each List Item left. Using percentages is not necessary, but does make your list expandable. Set anchors to display as block, with a width of 100% for that large clickable area. Hope this helps, Cpawl.
The CSS used:
ul {
display:inline;
list-style-type:none;
}
li {
float:left;
width:25%;
border-bottom:1px solid #333;
}
li a {
display:block;
width:100%;
}
li a:hover {background-color:#FF5C00;}
huphtur #
you got buddies?
cpawl #
I guess I happen to be that buddy since this has for whatever reason been a headache for me personally. I have considered the idea represented in the code but never fully tested it.
My main use for this concerns Wordpress and how is lists the “Categories” and “Archives” in a vertical format. In hopes to avoid the typical blog endlessly extending sidebar (along with my hopes of a usable “sidebarless” design) I am trying to convert all that content into a table like stucture that stretches out in rows and columns hortizonally first.
The problem I had so far (every 3 months when I find time to work on my own projects) is the way Wordpress calls this data to the design via PHP - the infomation never remained completely structured. For the life of me I could not figure out how to keep all the category and archive titles to the left but all the post number(s) and year(s) to the right. What I ended up with is exactly how it list them vertically (view Bill’s list there in the right) - a big deal to me because in a horizontal list that number(s) and year(s) created a disorganized appearance.
I am going to play around with this a bit more and see what I come up with.
huphtur #
Yur concern has NOTHING to do with WordPress, PHP or databasen. The answer is in CSS my friend/buddy.
joe d #
billy- all that es blog text/links is just begging to be seen as spider spam.
joe d #
cpawl- sounds like you need a Definition List instead.. http://www.google.com/search?q=css+definition+list
joe d #
“…WordPress this article still explores a creative method of rendering Definition Lists in flexible multi-column layouts.” –>
http://www.scottmcdaniel.com/?p=33
cpawl #
My concern has everything to do with Wordpress and PHP because of the way they output the code. CSS is the ultimate solution of course, but it needs to be properly adjusted based on the code Wordpress outputs. I could easily use code simular to the one Bill posted to create the list I need without Wordpress involved.
Jody-
That article looks like (haven’t had time to fully read it) EXACTLY what I need.
thanks!
Bill #
Wordpress outputs your category list as an unordered list. No tweaking necessary. Sure, you may need to make some adjustments to the css. For example - you don’t want these styles applied to EVERY UL on your site, so add a parent selector.
Remove that table you added around your category UL output (leaving the <div id=”cat-table”> container) Then change the css to read #cat-table ul {}, etc.
Changing wordpress’ output from an unordered list to a definition list will only open a whole new can of worms. You’ll have to control that can of worms with css anyway.
cpawl #
Okay, maybe I am not making my point clear. I DO understand that CSS is the solution to order and I HAVE use code simular to the list above- where the problem rest is the PHP output from Wordpress. An example taken from your site is this:
site news (8)
Notice how the (8) is listed after the link (due to the PHP output). If I want to keep that feature of the number(s) of post in that particular category, which I DO, then by using CSS code simular to the style suggested here I would get a list with the category title to the left- like I want- but the number output “(8)” following that link- also to the left. What I am hoping for is a more unison appearance. Since all the category titles will obviously have different names and letter amounts, when combined with the numbers following, the horizontal order will still appear (in my opinion) unordered.
The goal is to place all category titles to the left and all the number of posts output to the right. So the categories are in unison and so are the numbers. What is making this difficult is understanding( based on the PHP output code needed by Wordpress to relay this info ) how to add two separate functions to control the style.
If I am using this PHP output option:
?php wp_list_cats(’optioncount=1′);
(not sure if this will post in this comment section)
Using a basic CSS list style like the one mention will not output the number(s) with another style like I need. So really I need to figure out how to break the PHP into two parts and style both.
Understand?
cpawl #
I am hoping for an output simular to this (please view with Firefox):
http://www.radiosilent.com/list-test1.html
-
get it? All titles to the left- all numbers to the right. Ah, freakin order…
huphtur #
cpawl: i highly recommend this book: http://zeldman.com/dwws/
joe d #
non breaking spaces are the shizz.
cpawl #
Huptur- I read that book in 2003 while I was already practicing standards, but thanks anyway.
Guys- I put the spaces in there just for APPEARANCE sake- forget it-
yeah…
I already found my answer elsewhere- it has to do with breaking the PHP code from Wordpress into two parts so you can style both outputs… exactly like I assumed.
Keep surfin gents…
Bill #
Did you end up editing the actual wp_list_cats function in your template-functions-category.php file?
Sucks that they don’t have an option to edit the HTML output around a category list, that you can pass right in the function call (like the other seemingly useless options you can pass along). You can of course edit the actual function, making wordpress updates in the future a pain. Perhaps there’s a plugin for this; which may be more efficient than manually editing the function itself?
Now that you’ve got your HTML being output the way you’d like, what’s the CSS you’re applying to it to achieve your desired layout?
cpawl #
Thanks for all the tips guys!
I DO need to edit the actual “list-cat” function. Not completely terrible since there are different varieties of the function anyway. Considering all the custom tweaks I did to make things happen the way I want them, updating Wordpress in the future is most likely out of the question anyway since my template is basically homemade. No big whoop for me really. It took me two years to get off my ass to start the site so I am sure I will not be updating anytime soon anyway.
I will post the solution once I actually get around to making it happen for real. A quick test so far- looks like I am going to style it simular to the example the Scott Mcdonald highlighted, using to elements to get the results I need-
http://www.scottmcdaniel.com/?p=33
Actual results will be posted soon.
Thanks again.
Bill #
That’s what I’m talking about! get_linksbyname can accept what HTML you’d like to wrap the output in, directly in the function call. That’s the way wp_list_cats should be setup too; unfortunately it’s not.