WYSIWYG HTML Editor That Lets Me Place Images and Text On Top of Each-other?

[MICHAELSD]

I created a few things for my site in Photoshop, however text in an image isn't great for formatting on every device, particularly the iPhone and iPad. I separated the elements of one of these images into multiple images. One is the black shape everything will lay upon, the other are Facebook and Twiter logos and icons, and one is a small version of my site logo. I want to try to find a WYSIWYG that would allow me to put these images on top of the shape image (because the Facebook and Twitter images are links).

I could always split the completed Photoshop design up into multiple parts if I have to. I want the text to be formatted and positioned in specific ways, which would be difficult to do in HTML alone without a WYSIWYG editor. Does anybody have any recommendations for an application that can do with I'm trying to accomplish?

 

[eponym]

I could always split the completed Photoshop design up into multiple parts if I have to. I want the text to be formatted and positioned in specific ways, which would be difficult to do in HTML alone without a WYSIWYG editor.

You have it backwards. Doing it via HTML/CSS with properly planned/split graphical elements (like a background separate from the icons) is the only way to go here. It would easier, faster, less bloated, more accessible and more reliable than trying to manage that via WYSIWYG. It _could_ be done well in any good WYSIWYG, but at that point if you understood the markup and techniques well enough to pull that off, there'd be no reason for you to be using the WYSIWYG in the first place.

I recommend you either learn how to do it yourself or you find somebody who knows how to help you.

 

[MICHAELSD]

Just to clarify, I only need specific elements done with a WYSIWYG editor. The site itself was coded in CSS and HTML. I'm having trouble getting multiple images and text on top of a shape precisely, though, and it seems easiest to do it with WYSIWYG.

 

[MICHAELSD]

I finally got everything pieced together after a lot of frustration and uploaded everything here:

http://dextercorner.com/blog/Images/FollowDexterCorner/DexterCornerFollow.html

Is there a way I can embed that HTML file with HTML or CSS? I'm a little confused how to add it to my site like that. I already have the image locations in the HTML files set. Will I have to set the image location again and just add the HTML code as part of the main site or is there an easy way to embed that HTML file somehow?

Edit: On my iPhone 4, around the slice where the text lays, white lines are visible at a few certain zooms and don't appear at all at other times. I mainly brought the text out of the image for the iPhone and iPad since text in a picture can look bad while zoomed in on rose devices, but this sort of defeaths the purpose of trying to get rid of visual imperfections on the iDevices. Any ideas way?

 

[manueld]

i would suggest converting that table into css rather utilizing a table based layout. Accomplishing this in CSS/HTML would be much easier and less bloated than what you currently have.

If your going to continue with the table, if your seeing lines it's probably because there maybe a pixel difference in how mobile safari renders it. Apply a background color to the cell/table so that even when there is a space it will show black.

 

[MICHAELSD]

I changed the img source to the full location in the HTML file, but it still doesn't look how it should as it's presented in the link above. In the link above, I have the HTML file and images in the same file. Again, is there just a way that I can embed that HTML file with HTML (or CSS) since it already is the way I want it?

 

[Ride9650]

I changed the img source to the full location in the HTML file, but it still doesn't look how it should as it's presented in the link above. In the link above, I have the HTML file and images in the same file. Again, is there just a way that I can embed that HTML file with HTML (or CSS) since it already is the way I want it?

Copy + Paste

 

[MICHAELSD]

Doesn't work properly just copy and pasting the HTML. When I set the image source of the images to just the image name and extension and put the HTML file in the same folder, it works fine. When I went through and changed the image source to the full source and copied the HTML, the text showed up off of the image and not all of the split images showed up.

 

[Ride9650]

Doesn't work properly just copy and pasting the HTML. When I set the image source of the images to just the image name and extension and put the HTML file in the same folder, it works fine. When I went through and changed the image source to the full source and copied the HTML, the text showed up off of the image and not all of the split images showed up.

a. Are you sure the paths are correct?
b. did you copy/link the css?
c. Did you copy the table or the whole page?

If a = Yes:
- see b

if b = Yes
- see c

if c = Table
- then I don't know what to tell you. There is no embed function in HTML. It should show up fine. Double check your paths again. Post the HTML you tried to use.

if c = Whole page
- then thats your problem. Just copy and paste everything from <table> to </table>(PS, tables are considered bad practice) as well as the css