Member Avatar for frenchi1966

Hi,

have a look at my - on the rightside i have the Links by Pagerank.

Icons should be kept on left side but numbers should be right aligned.

How to do it - have checked several times but did not suceed.

Would you require the script to verify?

thanks

Here is the code:

{strip}

	<div align="left">
        
        {if $SHOW_ALL_PR eq '1'}

	   {foreach item=PR from=$PR_STATS }
	    <div style="width:100px;line-height:19px; text-align:right; font-size:11px; font-weight: bold;">
	    <a href="{$smarty.const.DOC_ROOT}/livepagerank.php?pr={$PR.PR}" title="{l}Browse pagerank {$PR.PR} links{/l}">
	    <img align="left" src="/images/pr{$PR.PR}.gif" border="0" alt="{l}Browse pagerank {$PR.PR} links{/l}" />{$PR.COUNT|indent}
	    </a>
	    </div>
	   {/foreach}
        
	{else}
           
	   {foreach item=PR from=$PR_STATS }
	      {if $PR.COUNT > 0}   
		<div style="width:100px;line-height:19px; text-align:center; font-size:11px; font-weight: bold;">
		<a href="{$smarty.const.DOC_ROOT}/livepagerank.php?pr={$PR.PR}" title="{l}Browse pagerank {$PR.PR} links{/l}">
		<img align="left" src="/images/pr{$PR.PR}.gif" border="0" alt="{l}Browse pagerank {$PR.PR} links{/l}" />{$PR.COUNT|indent}
		</a>
		</div>
              {/if}
	   {/foreach}

	{/if}
	
	
	
	
	</div>
  • 3 Contributors
  • 5 Replies
  • 206 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ndeniche

Dani AI

Generated

Short, practical fix: stop using deprecated align/<font> and give the anchor its own layout. Treat each pagerank row as an inline block (or list item) with the icon first and the count wrapped in a separate element that you can push to the right. and are right that a two-column layout works, but a small modern CSS approach keeps markup semantic and is easier to style later.

Try this structure and CSS (replace the placeholders with your loop output):

<div class="pr-item">
  <a href="#">
    <img src="PR_ICON.png" alt="pagerank">
    <span class="pr-count">12</span>
  </a>
</div>
.pr-item a {
  display: flex;
  align-items: center;
  width: 100px;          /* keep your chosen width */
  text-decoration: none;
}

.pr-item img { display: block; margin-right: 0.5rem; }

.pr-item .pr-count {
  margin-left: auto;     /* pushes the number to the far right */
  text-align: right;
  min-width: 2ch;        /* reserve a little space for 1–3 digit counts */
  font-variant-numeric: tabular-nums; /* makes digits line up visually */
  font-weight: bold;
}

Why this works: in a flex row, margin-left: auto uses leftover space to push the count to the right edge, so the icon stays left. min-width or a fixed width for the count keeps different rows aligned. font-variant-numeric: tabular-nums helps when the font has proportional digits so columns look even.

Fallback notes: if you must support very old browsers, float the image left and make the count an inline-block with a fixed width and text-align:right. Also keep the <a> wrapping both icon and count (bigger click target) and always include meaningful alt text.

Recommended Answers

All 5 Replies

Member Avatar for ndeniche

you should try working with tables...

create a two column table, align your left column to the left and your right column to the right... you could even align your table to the center of the "links by pagerank" section...

Member Avatar for Suetan

I agree, the tables would be a better setup than divs. But if you want to stick with the divs, you might want to try this

<div style="width:100px;line-height:19px; font-size:11px; font-weight: bold;">
     <font align="left">
          <a href="{$smarty.const.DOC_ROOT}/livepagerank.php?pr={$PR.PR}" title="{l}Browse pagerank {$PR.PR} links{/l}"><img align="left" src="/images/pr{$PR.PR}.gif" border="0" alt="{l}Browse pagerank {$PR.PR} links{/l}" />{$PR.COUNT|indent}</a>
     </font>
</div>
<div style="width:100px;line-height:19px; font-size:11px; font-weight: bold;">
     <font align="right">
          <a href="{$smarty.const.DOC_ROOT}/livepagerank.php?pr={$PR.PR}" title="{l}Browse pagerank {$PR.PR} links{/l}"><img align="left" src="/images/pr{$PR.PR}.gif" border="0" alt="{l}Browse pagerank {$PR.PR} links{/l}" />{$PR.COUNT|indent}</a>
     </font>
</div>

Personally, I'd go with the tables. It's easier to do it that way.

Member Avatar for ndeniche

you can even insert a table inside the div, to keep the format you have... don't be afraid to build a site based on tables... as i always say... combine tables and css, and you'll have a highly powerfull tool...

Member Avatar for frenchi1966

Thanks for your quick replies,

i tried it - but did not succeed. Either i could not see a difference or had all of of a sudden everything twice stated.

@ Nichito: Would you please be so kind to state the entire code how it would be perfect in my case as i am not the expert in this field.

thanks and regards

Member Avatar for ndeniche

ok... suppose img stands for the graph, n for the record in the databesa (for the image and the rank), and rank for the rank...

it would go something like this:

#pagerank
{
   font-family:verdana; //just an example
   font-color:#aaa;
   font-size: 13px;
}

#pagerank .left
{
   text-align:left;
}

#pagerank .right
{
   text-align:right;
}
<table id="pagerank">
   <tr>
      <td class="left"><img src="img(n).gif"></td>
      <td class="right">rank(n)</td>
   </tr>
   <tr>
      <td class="left"><img src="img(n).gif"></td>
      <td class="right">rank(n)</td>
   </tr>
</table>

remember img , n and rank are all variables and you have to substiturte them for the programming you're using...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.