placing icon next to positioned headers

**nofel** · Sep 3, 2010 06:32

hey folks,
i have a design and i am using the paul's fixed header technique. and i added sort JS on it, its working all good but i need to place arrows next to heading i tried to place img tag next to it. it work fine until i have a one line heading. but there is two line heading (i have to break the heading down coz i had problem allocating th's specific width's)

Code HTML4Strict:

        <div class="fuel-result">
            <div class="fuel-scroll">  
 <table class="fuel" width="100%" >
 
  <thead>
 
  <tr  bgcolor="#f2f7fb">
            <th><p>January<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>Feburary<br /> Month.&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>March<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
             <th><p>April<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>           
           <th><p>May <br />Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
           <th><p>June<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>July<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>August<br /> Month&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>Septemeber&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
            <th><p>October&nbsp;<img src="../images/sorter.png" border="0" /></p></th>
 
   </tr>
 
   </thead>
      <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr> 
</tbody>
</table>

Code CSS:

table.fuel{width:1020px; overflow-x:hidden;}
table.fuel td{border:1px solid #09C;padding:2px; text-align:center;}
table.fuel thead p{position:absolute; top:5px; margin-left:25px; cursor:pointer;}
table.fuel th tr{background-color:#f2f7fb;}
div.fuel-result{width:1020;height:278px;position:relative;padding-top:40px;}
div.fuel-scroll{width:100%; height:275px; overflow-x:hidden; overflow:auto;}

i must also add here that as elements are positioned, i can't get a perfect center for my th's. is there any workaround?
thanks in advance

**prajapati** · Sep 3, 2010 06:50

Try segregating the text and the image inside the <th> put it in another table or div and then center them.

HTML Code:

<th><table><tr><td align="center">January</td></tr><tr><td align="center">Month&nbsp;<img src="../images/sorter.png" border="0" /></td></tr></table></th>

Check if it works.

**nofel** · Sep 5, 2010 01:20

it ruins my positioned elements

**Stomme poes** · Sep 5, 2010 01:26

Can these be background images instead? Esp since the lack of alt text makes me think this is a sort of decoration and not telling users anything important. Just saying the table is sortable?

**Paul O'B** · Sep 5, 2010 01:51

As Stomme said you could apply the arrow as background image but it might not align correctly.

Code:

th p{background:url(../images/sorter.png) no-repeat 100&#37; 0;padding-right:10px}

Or if you need an image in the html to click then move the image to the start of the line and float it left.

e.g.

Code:

.fuel th img{float:right;margin:0 0 10px 10px}

Code:

<th><p><img src="../images/sorter.png" border="0" />January<br />
Month</p></th>

You can't really center the text automatically due to the way the fixed header is constructed which is why I originally recommended leaving it left aligned.

The only other alternative would be to use a full javascript fixed header version as there are some about.

**nofel** · Sep 5, 2010 06:05

@Stomme those are little arrow facing opposite direction to tell user its sortable.
@paul, the first option is good as i have many otheer pages and it will be wise to include that n css so it reflect in all the pages. however when i do padding-top:the images stays there n text movies. which is opposite of what i want. is there a workaround?

**Paul O'B** · Sep 5, 2010 07:50

You'll want padding-right not padding-top if you want to place the image in the background at the right. Use the background-position to move the image down if needed.

Code:

.fuel th p{background:url(../images/sorter.png) no-repeat 100&#37; 4px;padding-right:10px}

**nofel** · Sep 5, 2010 10:17

i m seeing this first time 100% 4px for the background is it same as margin:4px 4px;

**Paul O'B** · Sep 5, 2010 13:20

Originally Posted by emaarkhan

i m seeing this first time 100% 4px for the background is it same as margin:4px 4px;

Not quite

The first co-ordinate is the horizontal measurement and 100% means place it on the right as far as it will go.(It actually means place the point that is at the 100% position of the image and place it at the 100% position of the element.)

The second co-ordinate is the vertical mesurement and 4px will place it 4px from the top.

User Tag List

Thread: placing icon next to positioned headers

Thread Tools

Display

placing icon next to positioned headers

Bookmarks

Bookmarks

Posting Permissions