Adobe Community: Design view and browser view in DW are different than when I view from local folder

Currently Being Moderated

Design view and browser view in DW are different than when I view from local folder

Apr 22, 2012 5:38 PM

I'm brand new to Dreamweaver CS5.5 and here is my problem:

I've made an html page in dreamweaver with a banner, with an additional graphic and some text on top of the banner. It displays just fine in every browser when I view from the local folder, but when I open DW and view, it displays incorrectly in all three design, live and browser views within DW. If I make changes to the css file until it views correctly in design view, it no longer displays correctly from the local folder and it still doesn't view correctly in live or browser view within DW. If what I'm doing isnt going to display accurately in any of the views provided by Dreamweaver as compared to the live server, whats the point in having this software? I could just keep building webpages in notepad and uploading with CoreFTP.

Any suggestions? Is it some setting that I dont know about that I need to change within DW? Please help.

4446 Views 23 Replies Latest reply: BcSurvivor08, Apr 29, 2012 12:13 PM

Replies

Currently Being Moderated

1. Nick Entin,

Apr 23, 2012 9:30 AM in reply to BcSurvivor08

Report

Please post a link to the file you are talking about. Also, what browsers have you tried it in?

|
Mark as:
Currently Being Moderated

2. BcSurvivor08,

Apr 23, 2012 11:51 AM in reply to Nick Entin

Report

Here is the link to the server: http://www.healthquestpt.com/hpc/ if you notice the doctor bag and phone number are centered to each other and the bag is centered between the house logo and the diagonal line. The other side text is centered between the diagonal line and the text underneath the house logo. This is the way it is suppose to look and it looks this way in IE, firefox, Safari, Opera, and chrome.

But this is how it looks in DW

Design view screen shot:

Live Code screen shot:

Live view screen shot:

Thank you so much for looking at this for me, I really appreciate your help!!

|
Mark as:
Currently Being Moderated

3. BcSurvivor08,

Apr 23, 2012 1:52 PM in reply to BcSurvivor08

Report

I've added 3 links and it displays perfect in the browser: http://www.healthquestpt.com/hpc/

here is a screen shot of how it looks in DW design view & live view:

|
Mark as:
Currently Being Moderated

4. BcSurvivor08,

Apr 24, 2012 10:28 AM in reply to BcSurvivor08

Report

Anyone help?

|
Mark as:
Currently Being Moderated

5. vincentccw,

Apr 24, 2012 11:49 AM in reply to BcSurvivor08

Report

The problems is that you are using "position:absolute" in your titlle, handbag and the navigation menu, which will cause the elements to floats on browser windows, if you are not sure what i mean just try resizing your browser window and you can see the whole thing got mess up.

position:absolute will appear differently in different monitor screen (e.g. 1024 by 768, and 1440 by 1200) and so does DW (since the preview screen is quater smaller...)

to solve this you need to add "position: relative" to your id="container" and reposition again....

|
Mark as:
Currently Being Moderated

6. BcSurvivor08,

Apr 24, 2012 4:31 PM in reply to vincentccw

Report

Thank you soooo much!!!! That seemed to work perfectly!!!!!!!

|
Mark as:
Currently Being Moderated

7. vincentccw,

Apr 24, 2012 6:03 PM in reply to BcSurvivor08

Report

You are welcome

|
Mark as:
Currently Being Moderated

8. BcSurvivor08,

Apr 25, 2012 2:55 PM in reply to vincentccw

Report

More problems now......

I've attempted to add content and its not going very well, because I'm having to write all the code.....I'm used to WYSIWYG software and I guess DreamWeaver is for professionals...... Anyway here is a screen shot of how it now looks in Design View:

Here is the bottom part of Design View -notice the page counter and copyright info is outside the boundaries and up too high:

This is Live View:

and the bottom part in Live View:

This is how it looks from the server: http://www.healthquestpt.com/hpc

And this is how it is suppose to look: http://www.healthquestpt.com/homephysiciancare/

If anyone can help me figure out how to make this page work in Dreamweaver I'd be so grateful!!!

|
Mark as:
Currently Being Moderated

9. BcSurvivor08,

Apr 26, 2012 10:22 AM in reply to BcSurvivor08

Report

Please help?

|
Mark as:
Currently Being Moderated

10. Nick Entin,

Apr 26, 2012 10:38 AM in reply to BcSurvivor08

Report

I'm not in front of a computer right now, so I can't really see much. But I remember having a similar problem on an older project. I remember it was something about setting the height of the background. I assume this is what you are trying to fix - background doesn't reach all the way? I'll let you know more when I can get to a real computer.

|
Mark as:
Currently Being Moderated

11. Nancy O.,

Apr 26, 2012 2:28 PM in reply to BcSurvivor08

Report

There's no point chasing down specific layout issues until you fix your HTML & CSS errors. See details below.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.healthque stpt.com%2Fhpc%2F
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&u ri=http%3A%2F%2Fwww.healthquestpt.com%2Fhpc%2F

HINT: To get the most out of DW, you need to be able to work with code. Start here: http://w3schools.com/
Don't rely so much on Design View. It's not 100% reliable. Previewing in browsers is the best way to gage how you're doing. If the page doesn't render properly in browsers, most likely you have code errors that need attention.

Bookmark the links below and use them often during development.

CSS Validator - http://jigsaw.w3.org/css-validator/
HTML Validator - http://validator.w3.org/

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

|
Mark as:
Currently Being Moderated

12. BcSurvivor08,

Apr 26, 2012 4:17 PM in reply to Nancy O.

Report

Nick, yes I want all of the content of the page to have a white background with the overall page background to be gray. I appreciate any help you can offer, Thanks!

Nancy, thanks for the links you have provided. I am working on them now, have my reference books with me and hopefully can figure it all out. I am "self-taught" novice/intermediate webdesigner who does this for friends and side $$ so thats why I have so many errors LOL

Any advice, help, etc is so greatly appreciated!!!

|
Mark as:
Currently Being Moderated

13. Nancy O.,

Apr 26, 2012 5:02 PM in reply to BcSurvivor08

Report

I think we're ALL self-taught.

Working in Split View vs Design View alone allows you to see:
     a) the code DW generates for you,
     b) yellow highlighted code which indicates something is amiss.

If you get stuck on any of the error messages, post back with specific questions. Someone here will help you.

Keep up the good work!

Nancy O.

|
Mark as:
Currently Being Moderated

14. BcSurvivor08,

Apr 26, 2012 8:16 PM in reply to Nancy O.

Report

Thank you Nancy!

I seemed to successfully clear the errors in the css code - that is according to the link you provided.

I was able to fix some of the errors in the code itself, however it still says I have 46 errors and I cant figure out how I'm suppose to fix them, because its not making sense.

For example DW inserts the line break tag as <BR /> and the validator said that was an error. So I went back and edited them to be <br> and validator doesnt like that either. I want to center the text in a paragraph and the validator says <p><center> is invalid but also <p align="center"> is invalid, but DW codes the latter one. Validator is marking so much as invalid that is standard html.....

Any advice?

Also there is a .gif that shows correctly in DW in both design and live view but on the server its just a white rectangle.

This is how its suppose to look: http://www.healthquestpt.com/homephysiciancare/ (made with Webstudio 5.0 software)

This is Dreamweavers version: http://www.healthquestpt.com/hpc/

|
Mark as:
Currently Being Moderated

15. zztanti,

Apr 26, 2012 9:50 PM in reply to Nancy O.

Report

I never clean up html code for a long time.
Thanks Nancy for sharing Validator sites.

CSS Validator - http://jigsaw.w3.org/css-validator/
HTML Validator - http://validator.w3.org/

|
Mark as:
Currently Being Moderated

16. Nick Entin,

Apr 26, 2012 11:46 PM in reply to BcSurvivor08

Report

Sorry, little confused here.
This is how it looks from the server: http://www.healthquestpt.com/hpc

And this is how it is suppose to look: http://www.healthquestpt.com/homephysiciancare/
If you have the correct one already, why don't you just use that? I might be totally missing something here, but wouldn't that be easier...

As for the background, try this... Find this line of code:

<td colspan="2" bgcolor="#ffffff;">

And replace it with this:

<td height="200">

See if that fixes your problem.

And to touch on what Nancy said, Dreamweaver has a WYSIWYG portion to it, but it's much more than that. Most of the time, I'm in Code View and use Design View just to check to make sure everything is colored right, etc. There is such a huge advantage to knowing code. I'm in charge of my school website with a staff of about 30 students. It's obvious when you look at the sites made by the ones who know code versus the ones who stuck to WYSIWG. Anyway, just my two cents.

|
Mark as:
Currently Being Moderated

17. Nancy O.,

Apr 27, 2012 10:46 AM in reply to BcSurvivor08

Report

align="center" is deprecated (obsolete) code in XHTML & HTML5 doc types. Instead of styling markup with HTML, you should be using CSS.

CSS
.center {text-align:center}

HTML
<p class="center">some centered text here</p>

With respect to break tags, in XHTML doc types the correct syntax is <br /> not <br>. However your usage of line breaks is inconsistent with good symantic markup. Use headings <h1> <h2> <h3> <h4> for important keywords. Use <p> for descriptive paragraphs. Use <ul> <li> or <ol> <li> for lists. Line breaks should be used minimally if ever.

XHTML doc types require all tags to be lowercase. Uppercase tags will throw errors.

Your design is too rigid. When text size is increased in browsers, your content is unreadable. See screenshot.

SOLUTIONS:

1) DO NOT USE POSITION ABSOLUTE. You don't need it. Absolute positioning removes content from the normal document flow resulting in a jumbled mess. Use default CSS positioning (none) with margins, padding & floats to align elements.

2) Remove HEIGHT values from all CSS containers. Height limits a container's capacity to hold more content when needed. Container height should always be determined by the amount of content it holds; not explicit values. If required to reveal a background image, for example, use CSS min-height instead of height.

CSS Box Model
http://www.w3schools.com/css/css_boxmodel.asp

CSS Floats
http://www.w3schools.com/cssref/pr_class_float.asp

CSS min-height
http://www.w3schools.com/cssref/pr_dim_min-height.asp

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

|
Mark as:
Currently Being Moderated

18. BcSurvivor08,

Apr 27, 2012 12:15 PM in reply to Nick Entin

Report

Nick, I had to buy a new computer 2 weeks ago and the version of software I had been using for years (Webstudio) isn't compatible with windows 7 and it's been so many years since I purchased the other, I couldnt ask for a compatible version without paying again. I cant afford to pay for new software and Webstudio has its own issues anyway. I friend of mine pays for Adobe subscriptions and offered to use one of them to put Creative Suites 5.5 on my system. Hince, I'm learning Dreamweaver........

Nancy, I read your instructions.....gave me a headache ... LOL... but will begin working on what you've instructed. I know that once I can learn this stuff, I'll be better off in the end, its just trying to learn it all.

Thanks again and when I make progress, I'll post back the results.

|
Mark as:
Currently Being Moderated

19. BcSurvivor08,

Apr 27, 2012 7:52 PM in reply to BcSurvivor08

Report

Ok... I have started over by using a DW template 1 column liquid with a hearder. I have the banner, doctor bag, and the text "bringing wellness home" where I want them, but I cant get the phone number or the 3 links where I want them to go. I want the phone number to be centered under the doctor bag and same distance from the top as the "bringing..." text. Ive tried all the floats, margins, paddings, and clears that I know how to use, and I dont know how to do it without absolute positioning......

also, the 3 links I want to be up on top of the banner in the white space created below the "bringing....." text.

Please look and any help is sooooo appreciated: http://www.healthquestpt.com/hpc/home2.html

|
Mark as:
Currently Being Moderated

20. Nick Entin,

Apr 28, 2012 12:18 AM in reply to BcSurvivor08

Report

Your code looks something like this right now:

<div class="container">
     <div class="banner">
          <h1><img src="images/docbag.gif" alt="" width="100" height="80" /></h1>
          <h2>770-554-9773</h2>
          <h3>"Bringing Wellness Home"</h3>
     </div>
     <div class="content">
          <p><a href="#">Home</a>           <a href="#">About Us</a> <a href="#">Our Services</a></p>
     </div>
</div>

The problem is that your links are in the content div, whereas the background for them is in the banner div. Try changing it to this:

<div class="container">
     <div class="banner">
          <h1><img src="images/docbag.gif" alt="" width="100" height="80" /></h1>
          <h2>770-554-9773</h2>
          <h3>"Bringing Wellness Home"</h3>
          <div id="menu"><p><a href="#">Home</a>     <a href="#">About Us</a> <a href="#">Our Services</a></p></menu>
     </div>
     <div class="content">
     </div>
</div>

And add this to your CSS:

#menu {
     float:left;
     margin-left:100px;
     margin-top:20px;
}

I haven't tried this out, but this should be a good starting point. Just mess with the margins until it fits.

And good choice moving to a CSS layout vs. tables.

|
Mark as:
Currently Being Moderated

21. BcSurvivor08,

Apr 28, 2012 6:38 PM in reply to Nick Entin

Report

Ok, I did as you suggested. I have margined, padded, floated, float-cleared, and div'd myself into oblivion...

Please look: http://www.healthquestpt.com/hpc/home2.html I want the phone # to be centered underneath the doctor bag and the 3 links to be in the white cutout area on the banner. The only way I can get it to do this is with tables and absolute positioning, and since that wont work in all browsers HOW on earth does one do this WITHOUT tables and absolute positioning?

Please Please Please someone help. If I can get these two things to be where they are suppose to be I should be able to figure the rest out.

|
Mark as:
Currently Being Moderated

22. Nick Entin,

Apr 28, 2012 9:22 PM in reply to BcSurvivor08

Report

Change the CSS for #menu to this:

#menu {
float:left;
margin-left:-235px;
margin-top:140px;
}

Although this won't fix your problem, you are missing a semicolon (;) in the CSS for h3 (the phone number). Probably the best thing to do would be to combine the doctor's bag and phone number into the banner background image using Photoshop.

|
Mark as:
Currently Being Moderated

23. BcSurvivor08,

Apr 29, 2012 12:13 PM in reply to Nick Entin

Report

Thank you Nick. I had thought about adding the info to my banner in Photoshop but for some reason was just determined (a.k.a. stubborn) to figure it out the hard way. But I've wasted lots of time trying to figure out something that I suppose doesnt exist, so I took your advice and now it looks like I wanted with no tables. Thanks again your help!!

|
Mark as: