Skip navigation
BcSurvivor08
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.

 
Replies
  • Currently Being Moderated
    Apr 23, 2012 9:30 AM   in reply to BcSurvivor08

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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 24, 2012 11:49 AM   in reply to BcSurvivor08

    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
    Apr 24, 2012 6:03 PM   in reply to BcSurvivor08

    You are welcome

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 10:38 AM   in reply to BcSurvivor08

    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
    Apr 26, 2012 2:28 PM   in reply to BcSurvivor08

    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
    Apr 26, 2012 5:02 PM   in reply to BcSurvivor08

    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
    Apr 26, 2012 9:50 PM   in reply to Nancy O.

    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
    Apr 26, 2012 11:46 PM   in reply to BcSurvivor08

    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
    Apr 27, 2012 10:46 AM   in reply to BcSurvivor08

    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.

    HPC.jpg

     

    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
    Apr 28, 2012 12:18 AM   in reply to BcSurvivor08

    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>&quot;Bringing Wellness Home&quot;</h3>

         </div>

         <div class="content">

              <p><a href="#">Home</a>           <a href="#">About Us</a>  <a href="#">Our Services</a></p>

         <!-- end .content --></div>

    <!-- end .container --></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>&quot;Bringing Wellness Home&quot;</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">

         <!-- end .content --></div>

    <!-- end .container --></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
    Apr 28, 2012 9:22 PM   in reply to BcSurvivor08

    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:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points