Hello guys, I know nothing about HTML and I was trying to make a simple custom HTML page that have image on it and when you click an image you go to my google plus, facebook etc... so I use the muse software from adobe to create the code but I have two problem one is that the image appear in the simulator and not on my iphone and two I dont know how to center the image. Also I created the image to look good on an Iphone how Can I make them look good on an IPAD as I'm creating a universal app. May the solution would be to created big JPG buttons for Ipad and make them smaller when it displays for Iphone, but how to make the html for that ?? tks guys ! Here is the full content of the custom HTML : <p>  </p> <p> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="width=device-width; initial-scale=1.0; user-scalable=no;" name="viewport" /></p> <p style="text-align: center; ">  </p> <div class="clearfix" id="page"> <div class="clearfix grpelem" id="pu66"> <!-- group --> <a class="nonblock nontext grpelem" href="http://photoserge.com/download-raw-files-for-lightroom-4-retouching/" id="u66"><!-- image --><img alt="" height="105" id="u66_img" src="rawfiles.png" width="223" /></a> <a class="nonblock nontext grpelem" href="https://plus.google.com/112279549888292933430/posts" id="u72"><!-- image --><img alt="" height="102" id="u72_img" src="googleplus.png" width="223" /></a> <a class="nonblock nontext grpelem" href="https://www.youtube.com/cmoeu" id="u78"><!-- image --><img alt="" height="103" id="u78_img" src="youtube.png" width="223" /></a> <a class="nonblock nontext grpelem" href="http://www.facebook.com/sergeramelli" id="u84"><!-- image --><img alt="" height="106" id="u84_img" src="facebook.png" width="223" /></a> <a class="nonblock nontext clearfix grpelem" href="https://twitter.com/photoserge" id="u90"><!-- image --></a> <div id="u90_clip"> <a class="nonblock nontext clearfix grpelem" href="https://twitter.com/photoserge" id="u90"><img alt="" class="position_content" height="105" id="u90_img" src="twitter.png" width="221" /></a></div> <a class="nonblock nontext grpelem" href="http://www.photoserge.com" id="u96"><!-- image --><img alt="" height="107" id="u96_img" src="sitephotoserge.png" width="236" /></a></div> <div class="verticalspacer">  </div> </div> <!-- JS includes --><script type="text/javascript"> if (document.location.protocol != 'https:') document.write('x3Cscript src="http://musecdn.businesscatalyst.com/scripts/1.1/jquery-1.7.min.js" type="text/javascript">x3C/script>'); </script><script type="text/javascript"> window.jQuery || document.write('x3Cscript src="scripts/1.1/jquery-1.7.min.js" type="text/javascript">x3C/script>'); </script><script src="scripts/1.1/museutils.js?3944585760" type="text/javascript"></script><script src="scripts/1.1/jquery.watch.js?346672883" type="text/javascript"></script><!-- Other scripts --><script type="text/javascript"> Muse.Utils.addSelectorFn('body', Muse.Utils.transformMarkupToFixBrowserProblemsPreInit);/* body */ Muse.Utils.addSelectorFn('body', Muse.Utils.prepHyperlinks); /* body */ Muse.Utils.fullPage('#page'); /* 100% height page */ Muse.Utils.addSelectorFn('body', Muse.Utils.showWidgetsWhenReady);/* body */ Muse.Utils.addSelectorFn('body', Muse.Utils.transformMarkupToFixBrowserProblems);/* body */ </script>

Phew! That's some bloated code! Try this: <div align="center"> <a href="http://photoserge.com/download-raw-files-for-lightroom-4-retouching/"> <img height="100px" src="rawfiles.png" width="220px" /></a> <br><br> <a href="https://plus.google.com/112279549888292933430/posts"> <img height="100px" src="googleplus.png" width="220px" /></a> <br><br> <a href="https://www.youtube.com/cmoeu"> <img height="100px" src="youtube.png" width="220px" /></a> <br><br> <a href="http://www.facebook.com/sergeramelli"> <img height="100px" src="facebook.png" width="220px" /></a> <br><br> <a href="https://twitter.com/photoserge"> <img height="100px" src="twitter.png" width="220px" /></a> <br><br> <a href="http://www.photoserge.com"> <img height="100px" src="sitephotoserge.png" width="220px" /></a> </div> In customHTML, hit the source button in the wysiwyg editor and paste the above code between the <body></body> tags. In the code, see where src= is? - src="rawfiles.png" you will either need to put the full path to the image. So it will look like: http://path_to_image.com/rawfiles.png or if you're using iOS, I think you can keep the path as it is and put the images in the BT_Images folder of your project. Not sure about this, some iOS dev will put me right on that. Hope that helps.

correct as long as the image is in the images folder yes.

Thanks @LeonG, wasn't sure.

Tks this code looks much cleaner and I kind of understand it. I just didn't understand about the path, photos still displays on the simulator but when I run it on the Iphone (they dont display) I have an error msg : CopyPNGFile error and the image dont display, they are in the BT_image folder any idea ? tks, Serge

hmmm. The code's good, the paths to images are good. Must be something else. Have you copied the BT_Image folder (and the other BT_folders) into xcode? Not sure what that requires, but it's something documented that you must do. I'm sure you have. Sorry, no idea with xcode, but I know your html is ok. *edit Just found this on stackoverflow.com. Would you know if your png images are interlaced or not? Seems like an obscure error, but you never know! http://stackoverflow.com/questions/5287600/build-app-with-xcode-4-it-always-show-some-error-about-png-image PS, I left some un-needed code in the post above, sorry. I've just edited the post and stripped it out.

Hello Raveyd, You are right the eror on the PNG come from having interlaced on, I have corrected that, but I still have my jpg image not appear when I test on my Iphone and I have them when I test on the IPAD, any ideas, must be something about the path ? Serge

@raveyd ->That's good to know. I never know how to save the images in PS.

@nadthevlad, yeah, who'da known? Simple things can cause so much frustration! @photoserge - making progress! So jpg's can be seen on an ipad, but NOT on an iphone? That would make the paths ok. I think this is going to be a xcode specific problem, which I know 0% about. Just out of interest are there discrepancies in the file naming? like in the code it's jpg but the file is actually JPG? or jpeg v jpg? Also, are you forcing the images sizes like you are the png's above? The png's are being forced to 100x220. If you are, try removing the height and width, just to see if that's having an effect. In the code above, you would change: <img height="100px" src="rawfiles.png" width="220px" /> to <img src="rawfiles.png" /> So do the same thing with your jpg images. It's a shot in the dark, as I really don't know why you would be having an issue with jpg's. *Edit* The default format for jpg's in xcode appears to be JPEG. Try renaming the file extension if you haven't already.

@raveyd my mistake photos works on similutor Iphone or Ipad, but not on the real device, I meant simulator not Ipad, so Im quite sure it is a path trouble

Ok, try this. Put everything in the BT_Docs folder - html file and images. See if that works. There would be no possible way for the path to be wrong then.

I dont get it Im using a custom HTML page with buzztouch 2.0, I tried moving around the images to BT_image or BT_docs it's still not working, how can I move the HTML to be BT_Docs using a custom HTML screen plug in ? tks, Serge

Hi Serge, Ah, yes. Sorry, my bad. You would need to use the html doc plugin. How are you with html? Could you open this file: https://dl.dropbox.com/u/56760890/index.zip and put the code you have in the customhtml into it? In your customHTML screen hit source in the wysiwyg and copy everything between the <body></body> tags and paste between the <body></body> tags of the file from dropbox. THEN put everything in the BT_Docs folder! It's a bit more fiddly, but I think anyone will tell you that the customHTML plugin ain't great. It's the 3rd party editor that spoils it, not the fault of bt.

Hello, I found out what was the bug, somehow when I exported the html code from Adobe Muse all the image file names Caps became small caps, it worked in the simulator but not in the real device. I put all the Caps back on and now it works on both, tks and sorry I should have checked. Serge