- better way?

[Rivet]

A quick question, I think (famouse last words!).

I have a ratings system where the user clicks on 1 of 10 horizontally aligned Radio Buttons.

Underneath it, for the visitor's convenience, I have printed the values from 0 thru 9 in order to number the rating of each of the above 10 choices. e.g.:

Definition attempt:

Ten circles for each of the ratings choices from 0 to 9 (Ten circles).
ID's below each one, indicating the button is for 0, 1, 2, 3, ,,, 9.
In order to line up the numbers with the circles, I find I've had to use a bunch of "   " to space the text out to align with the Radio button circles. I tried a "nl3br" but apparently there is no such thing.

Is there a better way to space out the text than using a bunch of   between the numbers? I want to keep the buttons horizontally in order to keep the real-estate from being excessively long in the vertical length on the screen. At the font sizes I'm using it takes 3   and a space between each digit.

Is there a better way?

Regards & TIA,

Rivet`

[dalecosp]

Perhaps. Generally, the "acceptable" way to do things in this regard has moved from markup (e.g., [noparse]" "[/noparse]) to CSS.

So, I suppose you might have ten DIV tags, all with a left-margin and set to float to the right of each other? Each DIV would contain your button, a linebreak, and the number?

[traq]

I'd suggest inline-block instead of floats.

[Rivet]

dalecosp;11031797 wrote:

Perhaps. Generally, the "acceptable" way to do things in this regard has moved from markup (e.g., [noparse]" "[/noparse]) to CSS.

So, I suppose you might have ten DIV tags, all with a left-margin and set to float to the right of each other? Each DIV would contain your button, a linebreak, and the number?

Nooooo thanks!!:rolleyes: I wish to minimize code, not write more than necessary, lol!

Actually, I've been so interested in relearning PHP all over again that I've been lazy and bypassed using CSS. Guess I'll have to get in gear with it!
If I'd remembered CSS I wouldn't have bothered you guys' time with the question.

Thanks much!

Rivet`🙂

[Rivet]

traq;11031815 wrote:

I'd suggest inline-block instead of floats.

I'm sorry; I don't know what you mean unless it was a reference to Dale's post?

Rivet`

[bradgrafelman]

Rivet;11031841 wrote:

I'm sorry; I don't know what you mean unless it was a reference to Dale's post?

It was. dalecosp was suggesting you utilize the float CSS property, while traq was suggesting setting the display property to "inline-block."

[traq]

Right. For example,

<label class=ratings>
    <input type=radio name=rating value=1><br>1
</label>
<label class=ratings>
    <input type=radio name=rating value=2><br>2
</label>
<!-- etc. ... -->

.ratings{
    display: inline-block;
    text-align: center;
    padding: .5em;
    margin: .15em;
    border: 1px outset gray;
    border-radius: 4px;
    background: #eee;
}

[ATTACH]4941[/ATTACH]

[upl-file uuid=9c758ef3-9d73-42e5-86de-152081c0a643 size=3kB]Screenshot from 2013-08-01 18:30:44.png[/upl-file]

[cretaceous]

or simpler just do <span style='padding:0 40px'>blah</span>

note that span can only take left / right padding values , top/bottom are ignored