HTML/CSS animation clipped on iPad

Hi list...
When inserting html into an inDesign document intended to be published as an iPad app, I'm running into issues with seeing the entire html. The bounding box that holds the html collapses down to the size of the "This is arbitrary html" message that's displayed in inDesign at design time. Second, when viewing on the iPad, this collapsed box is fully black at first, and you have to touch it in order to see the now clipped html.
Am I missing a setting in inDesign somewhere? In the html, I attached styles to force the <body> and a <div> wrapper to be 500px by 500px. That doesn't seem to help.
Any ideas are appreciated.
- Michael M.

Thanks again Bob for following up. I appreciate your diligence.
I'm trying to insert an svg graphic, with some css animation. That renders fine, but the svg gets shrunk down to fit the bounding box, and the bounding box is clipped. Also, it's filled with black first until you tap it (only then does it display the svg). Below is the html I'm inserting.
Hopefully this is helpful?
- Mike
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#gear{
          -webkit-animation-duration:20s;
          -webkit-animation-iteration-count:infinite;
          -webkit-animation-name:gearSpin;
          -webkit-animation-timing-function:linear;
          animation-duration:20s;
          animation-iteration-count:infinite;
          animation-name:gearSpin;
          animation-timing-function:linear;
          position:relative;
          display:block;
          border:none;
          width:auto;
          height:auto;
@-webkit-keyframes gearSpin {
          from { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
          to { -webkit-transform:rotate(360deg); transform:rotate(360deg); }
</style>
</head>
<body style="width:500px;height:500px;">
<svg id="gear">...</svg>
</body>
</html>

Similar Messages

How can I use my Html/CSS Navigation bar to control an Edge Stage?

I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage.
Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.
The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:
sym.play("home");
and animate a 6000px width symbol across my 1000px stage in 1000px increments.
I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.
So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.
currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?
Many thanks to anyone who can help with this!
Here is the code for the navbar:
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
Full HTML:
<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
          <title>Untitled</title>

    <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-57204389 { visibility:hidden; }
              .block-menu {
                              display: block;
                              background: #000;
                    .block-menu li {
                              display: inline-block;
                    .block-menu li a {
                              color: #fff;
                              display: block;
                              text-decoration: none;
                              font-family: 'Passion One',Arial,sans-serif;
                              -webkit-font-smoothing: antialiased;
                              -moz-font-smoothing: antialiased;
                              font-smoothing: antialiased;
                              text-transform: uppercase;
                              overflow: visible;
                              line-height: 20px;
                              font-size: 24px;
                              padding: 15px 10px;
                    /* animation domination */
                    .three-d {
                              -webkit-perspective: 200px;
                              -moz-perspective: 200px;
                              perspective: 200px;
                              -webkit-transition: all .07s linear;
                              -moz-transition: all .07s linear;
                              transition: all .07s linear;
                              position: relative;
                              .three-d:not(.active):hover {
                                        cursor: pointer;
                              .three-d:not(.active):hover .three-d-box,
                              .three-d:not(.active):focus .three-d-box {
                                        -moz-transform: translateZ(-25px) rotateX(90deg);
                                        -webkit-transform: translateZ(-25px) rotateX(90deg);
                                        -o-transform: translateZ(-25px) rotateX(90deg);
                                        transform: translateZ(-25px) rotateX(90deg);
                    .three-d-box {
                              -webkit-transition: all .3s ease-out;
                              -moz-transition: all .3s ease-out;
                              -ms-transition: all .3s ease-out;
                              -o-transition: all .3s ease-out;
                              transition: all .3s ease-out;
                              -webkit-transform: translatez(-25px);
                              -moz-transform: translatez(-25px);
                              -o-transform: translatez(-25px);
                              transform: translatez(-25px);
                              -webkit-transform-style: preserve-3d;
                              -moz-transform-style: preserve-3d;
                              -ms-transform-style: preserve-3d;
                              -o-transform-style: preserve-3d;
                              transform-style: preserve-3d;
                              pointer-events: none;
                              position: absolute;
                              top: 0;
                              left: 0;
                              display: block;
                              width: 100%;
                              height: 100%;
                    .front {
                              -webkit-transform: rotatex(0deg) translatez(25px);
                              -moz-transform: rotatex(0deg) translatez(25px);
                              -o-transform: rotatex(0deg) translatez(25px);
                              transform: rotatex(0deg) translatez(25px);
                    .back {
                              -webkit-transform: rotatex(-90deg) translatez(25px);
                              -moz-transform: rotatex(-90deg) translatez(25px);
                              -o-transform: rotatex(-90deg) translatez(25px);
                              transform: rotatex(-90deg) translatez(25px);
                              color: #FFE7C4;
                    .front, .back {
                              display: block;
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              top: 0;
                              left: 0;
                              background: black;
                              padding: 15px 10px;
                              color: white;
                              pointer-events: none;
                              -moz-box-sizing: border-box;
                              box-sizing: border-box;
    </style>

</head>
<body>
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
<div id="Stage" class="EDGE-57204389">
</div>
</body>
</html>

I've come across this from the Edge API:
Edge.getComposition(compId)
Anyone having trouble with this same issue should try this:
var targetComp = AdobeEdge.getComposition('TARGETCOMPID');
   targetComp.getStage().play();
in their trigger or event handler.
How I got it to work:
<li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
   targetComp.getStage().play();" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>

Reset CSS Animation With Java?

I'm having trouble trying to reset my css animation after its clicked. Once the animation is clicked on it will not show the animation if clicked again. How can I have my animation reset after 2 seconds?
Heres the HTML:
<a href="software/ASC.exe">
                        <section id="download" title="Download ASC">
                            Download
                        </section>
Here is the CSS:
.animated {
.animated {
    -webkit-animation:fadeOutUp 2s;
    -moz-animation:fadeOutUp 2s;
    -o-animation:fadeOutUp 2s;
    -ms-animation:fadeOutUp 2s;
    animation:fadeOutUp 2s;
@-webkit-keyframes fadeOutUp {
0% {
    opacity: 1;
    -webkit-transform: translateY(0);
100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
@-moz-keyframes fadeOutUp {
0% {
    opacity: 1;
    -moz-transform: translateY(0);
100% {
    opacity: 0;
    -moz-transform: translateY(-20px);
@-o-keyframes fadeOutUp {
0% {
    opacity: 1;
    -o-transform: translateY(0);
100% {
    opacity: 0;
    -o-transform: translateY(-20px);
@keyframes fadeOutUp {
0% {
    opacity: 1;
    transform: translateY(0);
100% {
    opacity: 0;
    transform: translateY(-20px);
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
And here is the Java Script
</script>
<script language="javascript">
window.onload = function() {
var btn = document.getElementById("download");
btn.addEventListener("click", function(e) {
this.className = "animated";
</script>
Any Help would be greatly appreciated!

You could use the css pseudo class :focus to fire the animation. That way, if they click on anything after clicking the Download button (like the OK or Cancel box in the download prompt), and then click the button again, it would fire the animation. You'd need to add a tabindex attribute to the link to make it work in -webkit, but that's easy enough. You wouldn't need javascript for it at all.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Quick Animation</title>
    <style>
    .animated { color:green; }
    .animated:focus {
    -webkit-animation:fadeOutUp 2s;
    -moz-animation:fadeOutUp 2s;
    -o-animation:fadeOutUp 2s;
    -ms-animation:fadeOutUp 2s;
    animation:fadeOutUp 2s;
@-ms-keyframes fadeOutUp {
    0% {opacity: 1;-ms-transform: translateY(0);}
    100% {opacity: 0; -ms-transform: translateY(-20px);}
@-webkit-keyframes fadeOutUp {
    0% {opacity: 1;-webkit-transform: translateY(0);}
    100% {opacity: 0; -webkit-transform: translateY(-20px);}
@-moz-keyframes fadeOutUp {
    0% {opacity: 1;-moz-transform: translateY(0);}
    100% {opacity: 0;-moz-transform: translateY(-20px);}
@-o-keyframes fadeOutUp {
0% {opacity: 1;-o-transform: translateY(0);}
100% {opacity: 0;-o-transform: translateY(-20px);}
@keyframes fadeOutUp {
0% {opacity: 1;transform: translateY(0);}
100% {opacity: 0;transform: translateY(-20px);}
.fadeOutUp {
-ms-animation-name: fadeOutUp;
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
</style>
</head>
<body>
    <div id="section_4">
         <a href="#" id="download" class="animated" title="Download ASC" tabindex="1">Download</a>
    </div>
</body>
</html>

CSS/HTML5 make the iPad 1/2 hot?

I don't have an iPad but heard the things don't have fans, I also heard they get hot... on top of that the iPad 2 has x9 graphic performance over its original. I don't know if anybody can compare but how does the following mathematically intensive website fair on each one?
The thing about CSS and HTML5, for me on my late 2007 white MacBook, is that it turns the fans on immediately, as if it were Flash code. This obviously to dissipate heat, but was wondering how newer iOS devices cope? I heard they get hot, sometimes too hot, but the new iPad2 has x9 graphic performance over the original and I was wondering if that applied to mathematics, like vectors (HTML/CSS)?
The website below is the one in question, does your iPad get really hot?
http://neography.com/experiment/circles/solarsystem/

Hamper wrote:
I don't have an iPad but heard the things don't have fans, I also heard they get hot
You have heard incorrectly.
The thing about CSS and HTML5, for me on my late 2007 white MacBook, is that it turns the fans on immediately, as if it were Flash code. This obviously to dissipate heat, but was wondering how newer iOS devices cope?
The newer iOS devices have better graphics cards than the 2007 white MacBook. That is the machine I use now so I know exactly what you are talking about. Any video causes the jet engines to start up. These days I will typically use my iPad instead just to avoid that.

Inserting HTML/CSS in a Tabbed Panel

I've been having trouble inserting HTML/CSS into a Tabbed Panel widget. In this case, the HTML/CSS is creating a text box with scroll bars (as described in an excellent workaround for getting scroll bars to work).
Has anyone else come across this situation?
Thanks!

I'm not seeing the same problem (the scrolling text box displays fine in the tabbed panel for me).
Does your HTML container fit within the content area of the panel?
Here are screenshots from Muse Design view:
and Preview in Browser (Firefox):
When you say it's not working, what exactly do you mean? What's happening?
Best regards,
Corey
Edited: Adding topic on creating scrolling text box for reference: http://forums.adobe.com/message/4327943#4327943)

HTML/CSS match to InDesign layout

Hello,
I have been given the task of taking an InDesign layout from CS6, and building it in HTML/CSS. The challenging part is that it is required to be 1:1 pixel perfect. When I open it in Google Chrome–which is going to be the standard browser it’s opened in–the font raggs differently.
When I overlay a PNG of the HTML site, and a PNG from the InDesign file it is no where close to pixel-perfect. The text wrapping differently is the main issue at hand. I have tried every CSS hack possible to adjust letter-spacing and word-spacing, I've also explored Google Fonts to attempt to get a better match.
Does anyone have any experience with a similar ask? In CS6 you can’t specify type pixels, I’m not sure it would matter if you could, because it seems that InDesign is using it’s own conversion for what it considers a pixel.
Please help!!!

Agreed, it's way too optimistic. InDesign is a typographic design application, under development since 1999. Already in its very first version, its type engine came "fully grown and armed, with a shout", supporting enough advanced features to squash all but the very stubbornest competition (I'm looking at you, TeX).
HTML/CSS, on the other hand, has had problems displaying "plain text" since its very beginnings. Only the very latest version of CSS finally addresses some typographic features (probably unnecessary to add, but anyway: with mixed results for different browsers).
" ..it seems that InDesign is using [its] own conversion for what it considers a pixel", you bet it does. After all, there was a web crowd that outright demanded "pixels" to be a measurement unit in InDesign. Adobe did a have a stab at adding pixels, and if one would ask me, they did it the wrong way. But that's no fault in InDesign. ID has its roots firmly in the "real world", that is, you can design a document with a precision right up to the wavelength of visible light; and ID will happily produce output for it. Your "pixel", on the other -- Darker -- Side, "is" not a real thing. It has no width or height. If you think it does, it goes only for your screen. You may say, "but if necesasry I can hold a magnifier to my screen and count the itty bitty lights!" What if you do so, and discover that your screen does not consist of square pixels, but round ones, or hexagonal, or elongated rectangles? And any measurement would only be value for just your screen. What about mine, your bosses', or your client's?
Following John's advice, here is a list of features you would need to switch off (as most are enabled by default) before you can even think of mimicking ID's sophisticated text engine in HTML:
ligatures
alternate characters
real small capitals
tabular or oldstyle figures
.. wait -- better switch off *all* OTF features
Paragraph composer. Use the dumb One Line At A Time And We'll See How Far We Get Composer.
Language based hyphenation.
Minimum/Optimal/Maximum Word Spacing (CSS must be using this internally, else it could not show justified text; however, I don't think you can set its parameters)
Letter Spacing and Glyph Scaling (although to be fair, these seem to be already off by default).
~16 decimals of precision for every object, line width, text size, spacing, et cetera
any real-world based measurement unit.
I probably forgot a few too.
--- add.
Advanced character/class kerning
Optical kerning (not enabled by default)
-- add2.
Balance Ragged Lines (off by default; but you can't use it)
Optical Margin Alignment (as above)
Align to Baseline grid
last line indent
Align to spine
justify last line (can only be achieved with span/div tricks)
tabs
about all internal hyphenation settings (CSS allows 'none', 'manual', and 'auto')
live text color outline (I may be mistaken, but I bet if it were possible literally everybody would be using it by now -- just like the dreaded "blink" tag did, before it was deemed illegal by federal law)
skewed text. I know, nobody with a grain of sense uses it in ID.[*] Still, you can't do it in CSS so I'm gonna list it anyway.
[*] Except myself, by the way. But I don't use it willy-nilly, only after exhausting all the good and the bad options; then yes, I go for the Ugly look.
Message was edited by: [Jongware]
Message was edited by: [Jongware]

How can I create stop animation clip utilizing single images?

Can I load individual images and overlap them to create a short animation clip?
What is the best file type of still images to use, jpeg?
How to overlap small image (with transparent background) on top of another background?
Thank you!

You import the images. You put them on multiple layers, stacked on top of each other. JPEG is not a good format. Use PNG or Photoshop or TIFF.
Layers are transparent. Put whatever background you want on the base layer.

HTML+CSS conversion issue with nth-child() selector

Why doesn't Adobe Acrobat XI Pro convert the below HTML code correctly when I try to create a PDF from it?
I've simplified the actual code significanly in order to present the problem in its simplest possible form. The code below uses the CSS "counter" feature to modify <li> elements according to a specific pattern. This code enumerates and indents every third line in the progression 1,4,7,10,13, ...
In Firefox and Internet Explorer, this code is displayed correctly, but Acrobat XI Pro ignores the lines with the "nth-child(3n+1)" selector which contain directives to hide line enumeration on non-matching lines and to indent text on matching lines. Acrobat XI Pro instead displays line enumeration for all lines and doesn't indent text on any line, as if the two directives containing the "nth-child(3n+1)" selector were not present at all.
Is this a bug or is it an unsupported feature in Adobe Acrobat XI Pro?
Whichever the case, any suggestions on a not too labourious alternative method to achieve the same result?
As things are, I've been forced to resort to using the so called "poor man's nth-child selector" workaround (abouthalf.com/development/poor-mans-nth-child-selector-for-ie-7-and-8/), which requires manual specification of each line's content with ever-increasing code extension/repetition. It gets the job done, but in a very messy and time-consuming way, and it only works with pre-defined static content. In terms of size, the difference is that of less than 1kb CSS file size when using the nth-child() selector vs more than 75kb CSS file size when using the above mentioned workaround, for a 250 line predefined stylesheet.
Surely there has to be a better way to deal with this issue? Support for a core HTML/CSS feature that generates ordered layout patterns for line enumeration, indentation, etc, would seem like a top priority feature to support in a product such as Adobe Acrobat Pro, given its focus on page layout...
<html>
<head>
<style type="text/css">
body { margin: 75px 90px; }
li { list-style-type: none; counter-increment: listing; }
li:after { content: counter(listing); float: right; margin-right: -2em; visibility: visible; }
li:not(:nth-child(3n+1)):after { visibility: hidden; }
li:nth-child(3n+1) { text-indent: 25px; }
</style>
</head>
<body>
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
<li>Line Four</li>
<li>Line Five</li>
<li>Line Six</li>
<li>Line Seven</li>
<li>Line Eight</li>
<li>Line Nine</li>
<li>Line Ten</li>
</body>
</html>

Any suggestion what the issue and/or solution might be?

Help animating clips and text

How would I go about animating clips and text the way they appear to move in the above video (made using Motion) in After Effects? What effect would I apply to the clips and text to be able to alter their perspective/angle like that?
Thanks for your help!

You'd just make the video layers into 3D layers and animate them and move the camera around them.
The text can be animated using per-character 3D animation.
Since you're new to After Effects, I strongly recommend that you start here to learn After Effects.

Classic/static html+css export

Unfortunately i've never really figuerd out all that div-floating margin-and-padding-overlaping css mambo jumbo
I always prefered flash over html+css becouse of its logical visual approach and I even developed my own little news cms and we suppose to live happily ever after but apple crew that all up ;(
is it posible to make nice and clean layout in flash and then convert it to html+css?
with semantics like container symbol -> container div and buttons become functional links?
that would get smile back on my face :/
i would appreciate any help!

Unfortunately i've never really figuerd out all that div-floating margin-and-padding-overlaping css mambo jumbo
I always prefered flash over html+css becouse of its logical visual approach and I even developed my own little news cms and we suppose to live happily ever after but apple crew that all up ;(
is it posible to make nice and clean layout in flash and then convert it to html+css?
with semantics like container symbol -> container div and buttons become functional links?
that would get smile back on my face :/
i would appreciate any help!

How to 'Publish' layout or extract the HTML/CSS?

OK, I created a nice layout, how do I "Publish" it -- i.e. extract the HTML/CSS so I can use it on an actual web site page? The "Reflow Overview" and other such Adobe "Getting Started" videos don't say and when I looked for such a thing as "Extract" or "Publish" or even "Upload" [ala Flash and/or Dreamweaver), all I found was "Save" and "Save As" which saves the Project as an arcane RFLW file.
Since I found no other question like this on the Forum, I'm beginning to wonder if I'm missing something obvious!

There was a recent update to a thread on this:
How to export Edge Reflow work file to Dreamweaver
Long story short, it will be easier to export code in the next release of Reflow. Until then you can get the HTML and CSS from the preview folder or you can get just the CSS from the code popover by clicking on the "<>" button on the bottom bar:
Hope that helps and thanks for using Reflow,
Chris

Installing Outlook 2007 HTML & CSS Validator in CS4

Hi everyone,
I have installed the Outlook 2007 HTML & CSS validator but when I go to look at the target browser list nothing appears.
The path that the tool was installed to is: C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS4\configuration\BrowserProfiles
Does anyone know if it will work with CS4? I have scoured Google and these forums to no avail.

The path is correct. Try restarting DW, then go to the Browser Compability window and see if it is there to enable in the Settings. If DW was running it will not appear until it is restarted.

Html + css editor

I am a java programmer who was told to design a jsp page using html + css.
i dont know css. is there a free WYSIWYG editor out there which takes into an account your css files and lets you use it somehow to make what you need.
keep in mind that when i look at the css style sheet i cant "imagine" how any of the stuffs in there would looks, and i dont know which divs must be inside other divs.

As long as you are able to get away with writing "dirty code" it isn't too much of a pain. When I am knocking a random page up I use 2 methods
1) Set the style for a tag using clas="..."
2) Set the style by adding the tag in your css
The first option allows you to tightly control what style gets applied where. The second option is for global setting of styles. By putting a <style> tag in your header you will find you are very quickly able to change and test your style changes. I am currently, at home, learning php with MySql served from apache. All I have to do is edit my css file in notepad, hit F5 on my browser and voil�, I can see the changes. I can develop my style sheets very quickly with this method. I prefer not to use graphic tools because of all the unnecessary tags they create.
Ted.

Html,css injector for firefox

i found a great math page, but it looks ugly,so i downloaded a css injector plugin for chrome ( https://chrome.google.com/extensions/detail/hiadkoalmmkgennhcldmdlndfgagkcim?hl=en )
after editing the css, it will be applied on all subpages on that math website, i was quite happy but, when i print it, or any webpage, there will always be url, date and tittle, which made it looks ugly and not professional, and there's no way to disable url, date and tittle in chrome.
does html,css injector exist in firefox?

There is no browser specific code for padding because padding is universally supported by all browsers. Why are you using negative margins?
Vendor prefixes are reserved for certain CSS properties that are not universally supported in all browsers yet like box-sizing.
-webkit- = Safari/Chrome
-moz- = Mozilla/Firefox
-o- = Opera
-ms- = IE
Nancy O.

HTML & CSS editing applications

I feel this is posted in the wrong place.
if it is, all apologies.
I am looking for an HTML, CSS editor for my mac.
I understand Adobe has Dreamweaver, which I would love, but I am trying to be cheap.
I currently use pixelmator rather than photoshop and I'm looking for something similar for webpage creating and editing.
If anyone could recommend so e applications I would greatly appreciate it!

I dont think Coda or Rapidweaver have what I am looking for.
Both seem like quality programs, but dont have the uses that Dreamweaver has that I need.
I guess what I am looking for is a WSYIWYG editor but an editor that will allow me to have a design editor and generate the code into a text editor for me -- Like dreamweaver.
I hope I wont have to resort to purchasing the 400 dollar app.
Help me if you can!

HTML/CSS animation clipped on iPad

Similar Messages

Maybe you are looking for