How to put <li> Elements in a row?

[Draffi]

Hello!

I was changing the post-profile section from my Forum, following this manual:

http://www.smfpersonal.net/tutoriales/celdas-en-perfil-t3256.0.html

Now i was installing the Arcade-Trophies-Mod and set it to show the small icons from the game.

My post-profile looks like this now (see first picture).

When i add the <li> Element (for to show the icons in a box, like the other post-profile-elements), every single icon from the game appear in a new row.

How can i do this, that all the trophy-icons are in one row and boxed, like the IM-icons for example?

Thank you in advance!

D.

[cretaceous]

not sure how much hand control you have here..
Add style ='float:left;'  or  style='display:inline-block;'  in the html (or css)
you may need to set a width as well

[Draffi]

At first: Thank you!

I try to add directly

Koodi [Valitse] Laajenna

echo '
             
<li><style="display:inline-block"><a href="', $scripturl . '?action=arcade;sa=play;game=' . $trophy['id'], '">', '<img src="' , $modSettings['gamesUrl'].'/', ($trophy['directory'] ? $trophy['directory'] . '/' : ''), $trophy['thumbnail'], '" alt="' . $trophy['name'] . '" title="' . $trophy['name'] . '" border="0" height="15" width="15"/>', '</a></style></li>';

and

Koodi [Valitse] Laajenna

echo '
             
<li><style="float:left"><a href="', $scripturl . '?action=arcade;sa=play;game=' . $trophy['id'], '">', '<img src="' , $modSettings['gamesUrl'].'/', ($trophy['directory'] ? $trophy['directory'] . '/' : ''), $trophy['thumbnail'], '" alt="' . $trophy['name'] . '" title="' . $trophy['name'] . '" border="0" height="15" width="15"/>', '</a></style></li>';

into display.template.php, but both are not working....

[Mick.]

Try:
<div style="text-align: left;">whatever</div> instead of align float left.

[Draffi]

thank you so much...

didnt work either.

This is the result (see Picture)

[Mick.]

Well lets steal the default CSS here...

<ul class="reset">
    <li>whatever</li>
</ul>


Sorry man, being on mobile sucks as I'm typing this off my head.

[Mick.]

I will be home shortly and if u don't mind waiting a bit, I can fix this issue for you then.

[Draffi]

That would be nice. Here (berlin, germany) it is late, but i prefer to wait & to fix this.

tell me what you need (PM)

Thank you!

[Mick.]

Just for giggles,... You want them icons in a row right? I mean, one line?

[Draffi]

exactly. in a row, surrounded from a box, created from the <li> tag....

[cretaceous]

you need to add it like this:

<li style="display:inline-block">
or
<li style="float:left">

or edit the css preferably

[Draffi]

Not working, too...

When i add this to the index.css, all my other icons are no longer centerd.

can i create a new class? or a new div id? or something like "postbox li" for example....?

What i need to do for this?

actually, the part for this in the index.css, looks like this:

Koodi [Valitse] Laajenna


/* poster details and list of items */
.poster h4, .poster ul li
{
   background: #fff;
   color: #546C7E;
   border: solid 1px #B0C4D2;
   margin-bottom: 1px;
   padding-top: 2px;
   padding-bottom: 2px;
   text-align: center;
   width: 90%;   
}


.poster h4, .poster h4 a
{
color: #c06002;
}
.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li
{
display: inline;
}
.poster li.stars, .poster li.avatar, .poster li.blurb, li.postcount, li.im_icons ul
{
   margin-bottom: 2px;
}
li.im_icons ul li, .poster li.profile ul li
{
   margin-top: 0.5em;
   border:  none;  padding: 0;
}
.poster li.avatar
{
overflow: hidden;
}
.poster li.warning
{
line-height: 1.2em;
padding-top: 1em;
}
.poster li.warning a img
{
vertical-align: bottom;
padding: 0 0.2em;
}
.messageicon
{
float: left;
margin: 0 0.5em 0 0;
}
.messageicon img
{
padding: 6px 3px;
}
.keyinfo
{
float: left;
width: 50%;
}
.modifybutton
{
clear: right;
float: right;
margin: 6px 20px 10px 0;
text-align: right;
font: bold 0.85em arial, sans-serif;
color: #334466;
}

[cretaceous]

do they have space to go in a line?
maybe the container object above has a specified width that is not allowing them to go in a line?
or maybe the css style for the list items is conflicting in some way