PDA

View Full Version : WYSIWYG editor problem



Akkernight
03-31-2009, 11:52 AM
NOTICE: This isn't intended to be advertisement, I know this is off-topic for these boards, but I'm a regular on here and hate to find new boards. If any moderator has problems with this topic, please just remove it

LINK: Madness: Operation Extinction - Home (http://moe.aeresentertainment.com) or Madness: Operation Extinction - Home (http://AeresEntertainment.com/moe)

Ok, so I used a WYSIWYG editor from Bluehost, it's called pagewizard. I dunno if anyone of you has used it before, but when I edited the website with it, I set the layout all nice and stuff, just to find out that the editor only places the site in the middle for when you edit, not when you publish it. So if you look at the link above, you'll see the website is placed to the left, and it's not perfectly aligned. It was perfect in the editor, but as I said, it doesn't position the page the same when you publish it, so I'd want to know if some of you peeps know how I can get the page centered in the middle and force it's size to be no more than 700px in width.
these are the codes I know:



<center></center>



div { max-width: 700px; }


Now, I've tried using those codes, but it won't work. Also, to get the source code, just use your browser to see them from the pages in the links I posted above.
One thing I did notice was that the editor hasn't placed any html, body, ect. end tags in the end of atleast index.html, I dunno why, but that's why I'm asking :)
Thanks in advance!

whiteflags
03-31-2009, 12:29 PM
Since you're using a wysiwyg editor, I would make sure that the pages you make work correctly before you publish them. Sometimes wysiwyg editors can render things differently from the browser so it is still important to check.

You have a lot of divs in your document, such as these.


<div Id="image0" name="image0" style="position:absolute;left:-1;top:-1;z-index:4000">
<img src="_wizardimages/header_img.png" style="width:700;height:200;border:0">
</div>
<div Id="image1" name="image1" style="position:absolute;left:0;top:199;z-index:4002">
<a id="ilinkid1" href="http://moe.aeresentertainment.com/index.html" target="_self">
<img src="_wizardimages/BtnPreset.png" style="width:152;height:29;border:0"></a>
</div>

You can see that they're all styled pretty close to the left, and that's what needs to be changed. To get a perfect center, you could use the align= attribute for div but the CSS will likely override attributes for any modern Web platform. Another solution is to style things with "position: relative;" where you can focus on the position of elements on the page, relative to other elements, but it won't be perfect.

700 pixels is a pretty small resolution, IMO, but it is generally controlled by the width property in CSS.

Akkernight
03-31-2009, 12:31 PM
Are you saying I have to change that through ALL the divs?

whiteflags
03-31-2009, 12:38 PM
Yes, or create a "wrapper" div to surround the entire page and style that one properly, in the middle, and to your exacting size. To make sure that the other, contained divs don't extend the width of the wrapper, you should style those with relative measurements, such as percents or ems (though last I checked, em is not well supported).

If you do this though you will definitely need relative positioning.

Akkernight
03-31-2009, 12:50 PM
but everytime I change something in the editor, it will all be replaced = do it all over again each time

whiteflags
03-31-2009, 12:57 PM
Then use something else that works and upload with an FTP client, like Core FTP. Dreamweaver has a 30-day free trial...

cyberfish
03-31-2009, 02:03 PM
For any serious work, though, write the HTML and CSS yourself by hand. Code generated by WYSIWYG editors are usually redundant, unreadable, non-standard compliant (from, for example, FrontPage), unreliable (renders differently on different browsers), unnecessarily complicated (which makes it unreliable), obscure, fail non-gracefully (because the DOM structure is usually not logical with regards to the layout of the site)... etc.

Writing code by hand also gives you finer control.

That said, the best WYSIWYG editor I have tried is Dreamweaver. I was surprised how clean the generated code was, and actually made a few very simple websites with it (with only simple formatting). I use it to make tables, too (and just copy the resulting <table>...</table> to my code).

Akkernight
03-31-2009, 02:56 PM
Yeah, I think I'll just be telling my website guy to code the website exactly like it is there, just better and cleaner, damn my precision sucks some places on there xD Also, there are noticable marks of my laziness, so I guess this will just be temporary and a sketch for the real site... But thanks everyone anyways!

Akkernight
03-31-2009, 03:40 PM
oh yeah, just a quick question... I'm no graphics designer or artist in the ways of graphics, but I did make all the graphics for the website, and I do know it's not ultra leet! But are they acceptable? Honest answers here, I do not cry over a no, I do more cry over a lie that makes me think I can do it while I can't! xP
So, please come with honest answers if my poor graphic skills can do websites? And if someone wants to go deeper, would I be able to do game graphics? And I mean graphics that people survive by, that people don't stop to look at and say "Yuck! Ruins the whole thing"
Thanks in advance...

Elysia
03-31-2009, 03:48 PM
For any serious work, though, write the HTML and CSS yourself by hand. Code generated by WYSIWYG editors are usually redundant, unreadable, non-standard compliant (only applies to Frontpage), unreliable (renders differently on different browsers), unnecessarily complicated (which makes it unreliable), obscure, fail non-gracefully (because the DOM structure is usually not logical with regards to the layout of the site)... etc.

Writing code by hand also gives you finer control.

That said, the best WYSIWYG editor I have tried is Dreamweaver. I was surprised how clean the generated code was, and actually made a few very simple websites with it (with only simple formatting). I use it to make tables, too (and just copy the resulting <table>...</table> to my code).

Actually, if you look at the site, you'll see how non-standards compliant it is. So Frontpage isn't the only one...

cyberfish
03-31-2009, 04:15 PM
Actually, if you look at the site, you'll see how non-standards compliant it is. So Frontpage isn't the only one...


Okay. Stand corrected.


For any serious work, though, write the HTML and CSS yourself by hand. Code generated by WYSIWYG editors are usually redundant, unreadable, non-standard compliant (from, for example, FrontPage), unreliable (renders differently on different browsers), unnecessarily complicated (which makes it unreliable), obscure, fail non-gracefully (because the DOM structure is usually not logical with regards to the layout of the site)... etc.


I've only tried FrontPage and Dreamweaver and Nvu, and both Dreamweaver and Nvu produce rather compliant code, but I guess I shouldn't generalize it.

DavidP
03-31-2009, 04:17 PM
I also recommend coding by hand when it comes to web development rather than using a WYSIWYG editor. You get much better (and cleaner) results.

cyberfish
03-31-2009, 04:20 PM
Graphics look quite fine to me, for an amateur project. I am no artist at all, though.

zacs7
03-31-2009, 04:40 PM
oh yeah, just a quick question... I'm no graphics designer or artist in the ways of graphics, but I did make all the graphics for the website, and I do know it's not ultra leet! But are they acceptable? Honest answers here, I do not cry over a no, I do more cry over a lie that makes me think I can do it while I can't! xP
So, please come with honest answers if my poor graphic skills can do websites? And if someone wants to go deeper, would I be able to do game graphics? And I mean graphics that people survive by, that people don't stop to look at and say "Yuck! Ruins the whole thing"
Thanks in advance...
Sure, other than the ~50% of unused screen space :)

whiteflags
03-31-2009, 06:32 PM
For any serious work, though, write the HTML and CSS yourself by hand.

I guess it depends on what "serious work" is, but since this is only a small web site, code by hand. For larger web sites (or lazy people like me), my text recommends something like Dreamweaver, since it is apparently less tedious to only fix what a generator spits out.

MK27
04-01-2009, 08:37 AM
Just an observation: when I click on a sidebar item (stock firefox 3.0.4 from Fedora 10) I get a bunch of stuff overlapped (ie, text on top of text), making it unreadable. Oversights like this would be a be reason to lose all confidence in whatever the site is supposed to represent.

The overlap is probably vertical from the /div positioning. If you got some "Intro to html and javascript", you could do this yourself in a couple of days. And do check it on more than one browser!

Elysia
04-01-2009, 08:50 AM
Heh. Make it XHTML. Then you have one less browser to worry about :p