Thursday, May 6, 2010

Website Issue: Table picture cannot fit in css format for web header

We have been facing this problem since last week. Our designer send us new image link to be place in our website header.. but in table format ... which is different from the previous format where we just use a single picture for link. For the new one, we need to add a curve black background shape with 2 on-off button for link and one static link for pdf. The designer provide us the picture in slices... which formatted in html table. This should be okey if our web page only use simple html. But in our case, we use .php header with .css style file.

We try for a few days, and still cannot get the correct position. After my boss come and ask me today, suddenly I get a a simple idea to solve this problem. Why don't I just compile those slices to a single picture. Then I cut into three and place it in header as three link, formatted the css style and adjust a bit the position part. And finally it works.

Simple way to do:
  1. Display the original .html(given by designer) file in browser.

  2. Print screen and crop the full picture in Photoshop.

  3. Cut the picture into 3 pieces... follow the previous original picture file size(411 x65).
    Then upload those pictures in img folder in the themes folder.

  4. Then edit the header.php file. Add two more link after the original link. Change the image name with the correct path. I use the mouseover link style, where the picture will swap when mouseover.
    .....................
    [link tag]
    ='link address' class="applynow1" title="Apply On Campus">/img/oncampus_1.png" onmouseover="this.src='/img/oncampus_2.png';" onmouseout="this.src='/img/oncampus_1.png';" border="0" alt="" />
    [close link tag]
    .............................

  5. Then edit the css file. Add 2 more class style for 'applynow' > applynow1 and applynow2.
    .header a.applynow { position: absolute; right: 20px; bottom: 0; top: 36px }
    .header a.applynow1 { position: absolute; right: 153px; bottom: 0; top: 36px }
    .header a.applynow2 { position: absolute; right: 60px; bottom: 0; top: 36px }

  6. Save and preview the changes.
  7. Lastly, I edit the bg.png to repair the bg curve in right position. Then upload back and publish. All work just nice. Alhamdulillah.

.

0 comments:

Post a Comment