User Tags per Row

[x_Coffee_x]

No idea what you just said. All I have for my ranks are;

That .class25 stuff you told me to put in Additional CSS.
and the HTML code I provided. Here's more pics.. No float tag or clear tags.

<-- Rank Manager (if I listed all it would be too big)

<-- Toon Rank (when on edit mode)

Basically, like I said, the HTML code is
<div class="class25"><img src="myimagelink"></div>

I don't know what you said about another big div.. a walkthrough would be nice ><

[Lynne]

If you need someone to actually code this for you, then you should probably post in the Paid Requests forum. All I can really do is give you pointers and tell you how I would go about it. I'm not going to actually do the work for you.

clear and float are tags that would be in your CSS. If you use firebug, you can see what CSS is being applied to your images. I am suggesting that perhaps there is some being applied and you need to get rid of it, but that is something you would have to look into since images don't tell us what CSS is being used.

[x_Coffee_x]

All I need is pointers, but I just don't get how to do it.
I set class33 to be 100% width. I went into the Postbit template and added <div class="class33">$post[rank]</div>
Then I kept the ranks HTML at <div class="class25"><img src="myimagelink"></div>
class25 = 25%.

On firebug, I can't find where it says where they're floating or not.. I went into firebug, and selected a rank with it on a post. What am I doing wrong?

[Lynne]

In your postbit is where your ranks are spit out. It is there that you need to set the .rank tag that spans 100% (or however many pixels) to contain your row. Then, in the ranks themselves, you would have the div/span like you are using. A different div class based on how may tags per row. I think you may have to set those to be display:inline-block also (since the rank class is set to be display:block by default).

Make sure you don't make them stackable since that puts a <br> tags between them.

[x_Coffee_x]

Where can I find display:block so I can change it to display:inline-block?
The ranks aren't set to stack.
Also, I have set the .class25 and .class 33 to {width:110px;} and {width:440px;} (One rank is 110px long but x4 is 440px) and even changed it back to 25% and 100% but nothing changed. I think I am doing something wrong. :/

[Lynne]

You need to change the display in the .class that you are using for the ranks. For example:

.class50 {width:50%; display: inline-block;}
.class33 {width:33%; display: inline-block;}
.class25 {width:25%; display: inline-block;}

[x_Coffee_x]

Thanks. I did this (as also stated in PM) which I replied to, but I will also reply here.
This seems to be working, but it recognizes the 4 ranks.. but it isn't making a new line for these other 2. Look here.


It isn't dropping the other 2 to another line.

[Lynne]

You need to set the width of the outer div/span for the rank to be only large enough to contain the ranks you are putting into it. If you set it to 100% and then put things in it that are set to 25%, then you will only get four in a row before it flows to the next line.

[x_Coffee_x]

Hi.. How to set outer DIV?
I don't know how to go about making a div, and just learned what these classes were when you told me rofl.

[Lynne]

In the postbit is this:

                        <span class="rank">{vb:raw post.rank}</span>

That is where the ranks get spit out. So, you need to set that class to a width.

.postbit .userinfo .rank {    width: 100%;}