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:
- Display the original .html(given by designer) file in browser.
- Print screen and crop the full picture in Photoshop.
- 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. - 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]
............................. - 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 } - Save and preview the changes.
- Lastly, I edit the bg.png to repair the bg curve in right position. Then upload back and publish. All work just nice. Alhamdulillah.
.
