Dreamweaver design and live view show different things?

Question

please view images below:

http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png (Design view) http://gyazo.com/a1e09aacc855c013d349017d0487402d.png (Live & browser view)

As you can see in the design view everything that has been placed on the page looks fine, and is also exactly what I want! But when I go to live view or preview in a web browser it shows differently, with some of the content overlapping my navigation. I really do not know what to do? I will display my code below:

HTML:

<nav>
        <ul>
          <li> <a href="index.html">Home</a></li>
          <li> <a href="news.html">News</a></li>
          <li> <a href="events.html">Events</a></li>
          <li> <a href="galleries.html">Galleries</a></li>
          <li> <a href="videos.html">Video </a></li>
          <li> <a href="history.html">History</a></li>
          <li> <a href="contact.html"> Contact</a></li>

        </ul>    
      </nav>    



   <div id="contactheader">
        <p>Get in touch with FIFAScene: </p>
   </div>     


    <p>&nbsp;</p>

  <div id="contactcontent">    
         <p>If you have any feedback regarding our website, or wish to comment on anything FIFA eSport related, then please contact us via:</p>
  </div>

    <p>&nbsp;</p>
    <p>&nbsp;</p>

    <ul>
          <div id="contacthotmail">
               <li>FIFAScene@hotmail.com<img src="images/icons/outlook.png" width="112" height="95"></li>
          </div>

          <div id="contactsm">
                 <li><a href="http://www.twitter.com/FIFAScene">www.twitter.com/FIFAScene<img src="images/icons/twitter.png" width="94" height="78"></a>
                 <a href="http://www.facebook.com/FIFAScene">www.facebook.com/FIFAScene<img src="images/icons/facebook.png" width="67" height="63"></a></li>
          </div>
   </ul>

CSS:

nav {
float:left;
position:relative;
}

nav ul li {
display:block;
margin:20%;
padding:30%;
list-style-type: none;
font-family:Segoe UI Light;
font-size:30px;
text-align: center;
}

#contactheader {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:20px;
}

#contactcontent {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
}

#contacthotmail {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
}

#contactsm {
text-align:center;
    color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
margin-top:40px;

}

Sorry if I have provided too much information, I am relatively new to designing websites and programming!

Thank you.

Answer 1

If you want to use Dreamweaver you should ditch the design view and get in the habit of previewing everything in the browser and troubleshooting with the browsers web inspector.

If you really want to see a live preview of your css and positioning, you can do some of that in the web inspector. If you have access to a Mac you should consider looking at Espresso <Link> by the folks at macrabbit.

Also, beware of the non breaking space returns (<p>&nbsp;</p>) tags that Dreamweaver is making, delete em and use css instead.

Answer 2

Probably your version of DW doesn't see some of the HTML5 elements as a block type element. As a concession to the program you could add a line to the nav element in your css:

display: block;

Thereby embettering the 'prognosis' of the design view as you type.

Edit starts here: Myself I use the Design-View to type content. It can be handy for some UTF characters, like the double quotes for instance. I use it a lot when writing (un-)ordered lists. Sometimes I use it to type content without the visual aids or css enabled. My advise is to use it as a tool but to have a browser open at the same time, with your document loaded. Adobe provided several tutorials that offered strategies for almost have a consistent preview of the page in design-view, but that's almost. Live view offers a better standard.

Because of a comment, I tried the code in DW5.5. I wanted to see how far I would get keeping the nav and main tag and have these as floats. To have some consistency in preview of the design-view and Live-View (hitting ALT+11 on windows) a wrapper that would clear the float (see the link to an article of Louis Lazaris) seemed to help.

I tried the the pyramid layout of the contact logo's as floats, but I could not center the two links below properly without too much hustle. To have these centered as well I made these display as inline-blocks.

Further the padding on the navigation list-items were a bit exotic having 50% on both sides.

html,
body {
  width: 100%;
}
body {
  font: 18px/1.25 "Segoe UI Light";
  color: #0099FF;
}

html, body,
h1, h2, h3, p, ul, li,
div, 
nav, main,
a, img,
a img {
  margin: 0;
  border: none;
  padding: 0;
}

h1 {
  font-size: 2.618em;
  text-align: center;
  padding: 1em 0;
  margin-left: 20%;
  margin-right: 5%;
}

a {
  color: #0099FF;
  text-decoration: none;
}
.wrap {
  width: 100%;
  overflow: hidden;
}
nav, main {
  float: left;
  text-align: center;
}

nav {
  overflow: hidden;
  position: relative;
  width: 20%;
}

main {
  width: 75%;
  text-align: center;
}

ul {
  list-style-type: none;
}


nav ul {
}

nav ul li {
  font-size: 1.666em;
}

nav ul li a {
  display: block;
  line-height: 2.25;
}


.contactheader {
  font-size: 1.666em;
}

.contactcontent {
  font-size: 1em;
}


.contactsms {
  display: inline-block;
  margin: auto;
}

.contactsms ul {
}

.contactsms ul li {
  display: inline-block;
  padding: 1em 1em;
  margin: 0 auto;
}
.contactsms ul li img {
  white-space: nowrap;
  vertical-align: text-bottom;
}

.whiteSpace {
  height: 2em;
}

<div class="wrap">
  <h1>Contact Us</h1>
  <nav>
    <ul>
      <li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Home</a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Design</a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">View</a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Mess</a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Video </a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">History</a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Contact</a></li>
    </ul>  
  </nav>
  <main>
    <div class="contactheader"><p>Get in touch with DreamWeaver:</p></div><!-- contactheader -->
    <div class="whiteSpace"></div><!-- whiteSpace -->
    <div class="contactcontent">
      <p>If you're interested in how the design view could be of help in your <em>'workflow'</em>, its abilities and disabilities, look out for AdobeTV tutorials like:</p>
    </div><!-- contactcontent -->
    <div class="whiteSpace"></div><!-- whiteSpace -->
    <div class="whiteSpace"></div><!-- whiteSpace -->
    <ul>
      <li class="contacthotmail"><a href="https://video.search.yahoo.com/video/play;_ylt=A2KLqIN1TcNWCF8A2qQsnIlQ;_ylu=X3oDMTBzMmQ2MHUwBHNlYwNzcgRzbGsDdmlkBHZ0aWQDBGdwb3MDMTc-?p=Taming+the+Web+Greg+Rewis+Youtube&vid=5e43e36d0d668c3a7c2e36670d98d1e2&turl=http%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOVP.V42f1ecfd29e64dec6b34ac147dacb021%26pid%3D15.1%26h%3D168%26w%3D300%26c%3D7%26rs%3D1&rurl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DvabpQhJD3FA&tit=HTML5+%26+CSS3+with+Dreamweaver+CS5+-+Part+1&c=16&h=168&w=300&l=572&sigr=11bcfkama&sigt=11a5a8ev8&sigi=1310fh8ok&age=1275343369&fr2=p%3As%2Cv%3Av&fr=yhs-mozilla-002&hsimp=yhs-002&hspart=mozilla&tt=b">Taming the Web, Greg Rewis<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Adobe_Systems_logo_and_wordmark.svg/200px-Adobe_Systems_logo_and_wordmark.svg.png" width="112" height="95"></a></li><!--
   --><li class="whiteSpace"></li><!-- 
   --><li class="whiteSpace"></li><!--
   --><li class="contactsms">
        <ul>
          <li><a href="http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements">StackOverflow: center floats?<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/200px-Stack_Overflow_logo.svg.png" width="94" height="78"></a></li><!-- 
       --><li><a href="https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/">clearing-floats/louis-lazaris<img src="https://upload.wikimedia.org/wikipedia/en/c/c0/Smashing_Magazine_logo.png" width="67" height="63"></a></li>
        </ul>
      </li>
    </ul>
  </main>
</div>