problem wraping around an image

jtrifts · September 18th, 2009, 11:47 AM

I'm trying to have the output appear all on the same line in html
In the case below it should look like 1 2 3 4 5 6
but is displaying as

1
23456

1 being an image with a 1 over it.

If the image were say a 3 it is appearing as
1 2
3
4 5 6

See code below

css file
.textposition {text-align:center; font-size:10px; margin-top:5px}
.pagenumimage {background:url('../images/PageNum.gif') no-repeat; width: 14px; height: 18px; }

html
<tr><td colspan=2 align=center class="nowrap">
<div class="pagenumimage"><div class="textposition">1</div></div> 
<a class="periwinkle" href="test.asp?p=2">2</a>
<a class="periwinkle" href="test.asp?p=3">3</a>
<a class="periwinkle" href="test.asp?p=4">4</a>
<a class="periwinkle" href="test.asp?p=5">5</a>
<a class="periwinkle" href="test.asp?p=6">6</a>
</td></tr>

Any ideas why it is wraping ?

om_prakash · September 18th, 2009, 12:16 PM

Instead you can have simple image tag

Code:

<img src="../images/PageNum.gif" border="0">
<a class="periwinkle" href="test.asp?p=2">2</a>
<a class="periwinkle" href="test.asp?p=3">3</a>
<a class="periwinkle" href="test.asp?p=4">4</a>
<a class="periwinkle" href="test.asp?p=5">5</a>
<a class="periwinkle" href="test.asp?p=6">6</a>

jtrifts · September 18th, 2009, 02:57 PM

Quote:

Originally Posted by om_prakash

Instead you can have simple image tag

Code:

<img src="../images/PageNum.gif" border="0">
<a class="periwinkle" href="test.asp?p=2">2</a>
<a class="periwinkle" href="test.asp?p=3">3</a>
<a class="periwinkle" href="test.asp?p=4">4</a>
<a class="periwinkle" href="test.asp?p=5">5</a>
<a class="periwinkle" href="test.asp?p=6">6</a>

Thanks for the reply,

I had thought of doing that way but the number of pages is created dynamically.
So at any given time I could have 50 pages. I didn't want to create 50 images depending on the number. The method I'm using works great except for the wraping issue.

om_prakash · September 19th, 2009, 04:19 AM

In that case you can also try:

Code:

 
<style>
textposition {text-align:center; font-size:10px; margin-top:5px}
.pagenumimage {background:url('user_online.gif') no-repeat; width: 14px; height: 18px; }
</style>
 
<table>
<tr>
<td class="pagenumimage">1</td>
<td><a class="periwinkle" href="test.asp?p=2">2</a></td>
<td><a class="periwinkle" href="test.asp?p=3">3</a></td>
<td><a class="periwinkle" href="test.asp?p=4">4</a></td>
<td><a class="periwinkle" href="test.asp?p=5">5</a></td>
<td><a class="periwinkle" href="test.asp?p=6">6</a></td>
</tr>
</table>