Guest Posted August 29, 2008 Share Posted August 29, 2008 Hello - can anyone help a novice please? I want to add an animated gif to my header. I have found out I can't add the animated gif to my header in PSP, and then upload the complete header to my site, (I have tried this and the animation does not work - unless I am doing something wrong). So I have uploaded my header without the gif, but I am unsure how to complete this task and add the animated gif so that it works. Do I use the <img src="gif_file_name"> and insert this into my public/templates/option1/header.php file? Can anyone help please? Thanks in advance. Regards Tony Brown Quote Link to comment Share on other sites More sharing options...
germ Posted August 29, 2008 Share Posted August 29, 2008 (edited) In your /includes/header.php change this code: <TD class="headertext"> </TD> to: <td align="left"><img src="images/fish.gif" border="0" alt=" "></td> or <td align="right"><img src="images/fish.gif" border="0" alt=" "></td> depending on which side of the header you want it, left or right. If I've chosen the wrong animated gif, just use the correct name in the code.... :blush: Edited August 29, 2008 by germ Quote If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
germ Posted August 29, 2008 Share Posted August 29, 2008 Or maybe you'd like this: <td> </td> <td align="left"><img src="images/logo/Earth-06-june.gif" border="0" alt=" "></td> <td> </td> <td align="right"><img src="images/logo/Earth-06-june.gif" border="0" alt=" "></td> <td> </td> A different gif, and one on each side of the header. Quote If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
Guest Posted August 30, 2008 Share Posted August 30, 2008 Thanks very much Jim One further question regarding the actual position of the gif, if you have the time. Can I place the gif at a specific point, or will it have to go to the far right of the webpage. You can see my header here, www.dealsonline4u.com. My actual header/logo is 780x100, sized to show on all screens I think, and I want to place the gif to the right hand side of the 780x100 header, ie the r/h side of the gif to correspond to the end of the blue line in my header. Hope I have explained this correctly. Thanks very much for your help. Regards Tony Brown Quote Link to comment Share on other sites More sharing options...
germ Posted August 30, 2008 Share Posted August 30, 2008 It's not an exact science, especially in your case since you don't have a fixed width for your page - it adjusts to the width of the screen of whomever is viewing. It could be anywhere from 800 to over 1900 pixels wide. I try to use the old "divide and conquer" strategy. Try this for your code: <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%" align="right"><img src="/templates/Option1/images/earth.gif" alt=" " border="0"></td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> This splits the screen width into ten parts, and you just chose which "tenth" of the screen you want it on. You can shuffle those lines around to position it where you think it looks good. My screen is 1280 wide, and that's where it looks good to me. That's the best I can do. If someone else has a better way, please speak up! :lol: Quote If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
Guest Posted August 30, 2008 Share Posted August 30, 2008 Thanks a lot again Jim. Appreciate your help. Regards Tony Bronw Quote Link to comment Share on other sites More sharing options...
Guest Posted August 31, 2008 Share Posted August 31, 2008 Hello Jim Inserting this code did place the gif correctly, but unfortunately my header repeated itself at 10% intervals as well. So this did not work for me, but again thanks for taking the time to help me. Regards Tony Brown CODE <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%" align="right"><img src="/templates/Option1/images/earth.gif" alt=" " border="0"></td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> Quote Link to comment Share on other sites More sharing options...
germ Posted August 31, 2008 Share Posted August 31, 2008 Replace this code: <td align="right"><img src="/templates/Option1/images/earth.gif" alt=" " border="0"></td> With this code: <td align="center"> <div style=" bottom: 15; left: 355; position: relative; z-index: 1; visibility: show;"> <img src="/templates/Option1/images/earth.gif" alt=" " border="0"> </div> </td> This will put the image in about the same place on the screen no matter what resolution the users screen is. ;) If you change your header background image or small gif you may need to modify the numbers used here. This is how I arrived at the numbers I used. The backgound image is 780 x 100. The gif you're using is 70 x 70. The code positions the small gif approximately from the bottom/center of your background image. To position it at the end of and centered in the background image: (780/2) - (70/2) = 355 (number used for left positioning) 100/2 = 15 (number used for bottom positioning) I tried this code using IE7 and Firefox and it looked good in both cases. Quote If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
germ Posted August 31, 2008 Share Posted August 31, 2008 (edited) Minor correction. :blush: This: 100/2 = 15 (number used for bottom positioning) Should have been: (100-70)/2 = 15 (number used for bottom positioning) Edited August 31, 2008 by germ Quote If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
Guest Posted September 1, 2008 Share Posted September 1, 2008 Replace this code: <td align="right"><img src="/templates/Option1/images/earth.gif" alt=" " border="0"></td> With this code: <td align="center"> <div style=" bottom: 15; left: 355; position: relative; z-index: 1; visibility: show;"> <img src="/templates/Option1/images/earth.gif" alt=" " border="0"> </div> </td> This will put the image in about the same place on the screen no matter what resolution the users screen is. ;) If you change your header background image or small gif you may need to modify the numbers used here. This is how I arrived at the numbers I used. The backgound image is 780 x 100. The gif you're using is 70 x 70. The code positions the small gif approximately from the bottom/center of your background image. To position it at the end of and centered in the background image: (780/2) - (70/2) = 355 (number used for left positioning) 100/2 = 15 (number used for bottom positioning) I tried this code using IE7 and Firefox and it looked good in both cases. Just picked up this thread Jim. Will try it out. Good to see there are people like you around willing to take the time and trouble to help others. Will sort this out today. Many thanks once again. Regards Tony Brown Quote Link to comment Share on other sites More sharing options...
Guest Posted September 1, 2008 Share Posted September 1, 2008 Perfect Jim. I can now place the gif wherever. This was the first main change I want to do to revamp my site. I want to change boxes, add curves maybe to them etc. Thanks again. Regards Tony Brown Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.