SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    placing icon next to positioned headers

    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
    All those who wander aren't lost.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    it ruins my positioned elements
    All those who wander aren't lost.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @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?
    All those who wander aren't lost.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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}

  8. #8
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i m seeing this first time 100&#37; 4px for the background is it same as margin:4px 4px;
    All those who wander aren't lost.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by emaarkhan View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •