Skip navigation
goneagaingirl
Currently Being Moderated

Design View not displaying properly

Mar 26, 2012 12:44 PM

I am pretty new to Dreamweaver.  I can't get my Design view to display properly, even when tried on two different computers.  The top div displays properly, then on the nav bar, only the background shows with the table items just listed in a row.  There are a lot of black background segments to the page, and thin yellow lines.  The main content shows at the bottom after a big chunk of black background blocks.  The page shows perfectly fine in a browser.  I can only work in Code view because of this.  Any suggestions?

 

If it helps, here is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>dentonquiltguild</title>

<link href="includes/gallery.css" rel="stylesheet" type="text/css" />

<link href="dqgfinal_styles.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<div id="wrapper">

<!--[if lte IE 6]>

 

<![endif]-->

 

<style type="text/css">

 

</style>

 

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

 

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

 

<script type="text/javascript">

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

 

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}

 

function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>

 

 

<div id="top">

 

  <div id="logotemp"><img src="images/logo.gif" width="280" height="175" alt="logo" /></div><!--logotemp -->

 

  <div id="quilt_top"><img src="images/quilt_top_01.png" width="550" height="209" alt="quilt top" /></div>

</div><!--top --> 

 

 

<div id="navbar">

 

   <ul id="MenuBar2" class="MenuBarHorizontal">

     <li><a href="index.html"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/homered_03.gif',1)"><im g src="images/homewhite_03.gif" alt="home button" name="Image8" width="101" height="43" border="0" id="Image8" /></a> </li>

     <li><a href="general.html" class="MenuBarItemSubmenu"></a><a href="general.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/generalred_03.gif',1)"> <img src="images/generalwhite_03.gif" alt="general button" name="Image9" width="101" height="43" border="0" id="Image9" /></a>

       <ul>

         <li><a href="meetings.html">Meetings</a></li>

         <li><a href="showandtell.html">Show &amp; Tell</a></li>

         <li><a href="library.html">Library</a></li>

         <li><a href="blogs.html">Blogs</a></li>

    <li><a href="retreat.html">Retreat</a></li>

       </ul>

     </li>

     <li><a class="MenuBarItemSubmenu" href="members.html"></a><a href="members.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/membersred_03.gif',1)" ><img src="images/memberswhite_03.gif" alt="members button" name="Image10" width="101" height="43" border="0" id="Image10" /></a>

      

     </li>

     <li><a href="community.html" class="MenuBarItemSubmenu"></a><a href="community.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/communityred.gif',1)"> <img src="images/communitywhite_03.gif" alt="community button" name="Image11" width="101" height="43" border="0" id="Image11" /></a>

       <ul>

         <li><a href="kidskwilts.html">Kids Kwilts</a></li>

         <li><a href="storybooks.html">Storybooks</a></li>

         <li><a href="sowinghope.html">Sowing Hope</a></li>

       </ul>

     </li>

     <li><a href="contacts.html" class="MenuBarItemSubmenu"></a><a href="contacts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/contactsred_03.gif',1) "><img src="images/contactswhite_03.gif" alt="contacts button" name="Image12" width="101" height="43" border="0" id="Image12" /></a>

       <ul>

         <li><a href="board.html">Board</a></li>

         <li><a href="bees.html">Bees</a></li>

         <li><a href="resources.html">Resources</a></li>

         <li><a href="shops.html">Shops</a></li>

         <li><a href="guilds.html">Guilds</a></li>

       </ul>

     </li>

   </ul>

</div><!--navbar -->

 

<div id="quilt_bottom"><img src="images/quilt_bottom_02.png" width="550" height="128" alt="quilt bottom" /></div>

<div id="maintemp">

  <div id="next">

  <div id="next_meeting_text">

    <div align="center">Next Meeting<br/> March 15

      </div><!--center -->

   

   

  </div><!--next_meeting_text -->

 

  <div><!--speaker_text -->

    <div  align="center"><a href="http://americanjane.com" id="speaker_text">Sandy Klop<br/>"American Jane"</a></div><!--align -->

   

  </div><!--speaker_text -->

 

 

  <div id="calendar_button">

    <div align="center"><a href="calendar.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/calendar_ro_03.gif',1)" ><img src="images/calendar_03.gif" alt="calendar button" name="Image6" width="136" height="54" border="0" id="Image6" /></a></div>

  </div><!--calendar_button -->

 

  <div id="events_button">

    <div align="center"><a href="events.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/events_ro_03.gif',1)">< img src="images/events_03.gif" alt="events button" name="Image7" width="136" height="54" border="0" id="Image7" /></a></div>

    </div><!--events_button -->

</div><!--next -->

   

 

<div id="main_head">Welcome To The <br/>Denton Quilt Guild</div><!--main_head -->

  

  

 

<div id="main_text">

      We are a group of over 200 quilters creating everything from traditional quilts, to art quilts, and everything in between.  New members and visitors are always welcome to our meetings on the 3rd Thursday of each month.<br />

     

      The Denton Quilt Guild provides a service to the local community by providing quilts to children in need, offering our Storybooks and Quilts To Go to our local schools, and participating in local events such as the Storytelling Festival.  Quilters of all levels are welcome!

     

      </div><!--main_text -->

 

    <div id="bottom">

    <div id="copyright"><img src="images/copyright.gif" width="127" height="8" alt="copyright" /></div><!--copyright --> 

 

    <div id="facebook"><a href="http://www.facebook.com/groups/42514709926/"><img src="images/facebook.gif" width="112" height="45" alt="facebook" /></a></div>

  </div>  

</div>

</div><!--maintemp -->

</div><!--wrapper -->

 

<script type="text/javascript">

var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

 

</body>

</html>

 
Replies
  • Currently Being Moderated
    Mar 26, 2012 12:48 PM   in reply to goneagaingirl

    I can only work in Code view because of this.

     

    That's the best way to be working! Never trust Design View as it doesn't load the CSS 100% - Live View is always a better option if you must see what the coding looks like, or testing in browser.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2012 4:03 PM   in reply to goneagaingirl

    Some CSS Layouts don't render properly in Design View.   It's because DW isn't a web browser.

     

    As a work around, you can edit your un-styled page by disabling CSS in DW.  I do this quite often.

    View > Style Rendering > un-tick Display Styles. 

     

    Also read F1 Help re: "Design Time Style Sheets."

    http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822 510a94ae8d65-7e17a.html

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 2:29 PM   in reply to goneagaingirl

    Is this a static or dynamic site?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 2:45 PM   in reply to goneagaingirl

    It looks like your style sheets are not linked properly. Can you give us a link to the live pages? Or post the CSS as well as the HTML?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 11, 2012 12:58 PM   in reply to goneagaingirl

    What works for me when an image placeholder appears rather than the image in design view is to right-click the placeholder then click Optimize... then click OK.  If Optimize... doesn't appear then make sure in code the placeholder is referenced as a "img src=" rather than a "href=".  I've found that sometimes when I drag an image into design view Dreamweaver places it as a href.  Inserting the image from the menu bar will insert it as an image.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 11, 2012 1:12 PM   in reply to Whitehub

    A look at the code would be more precise, no?

     

    And by the way, I would agree with Rik that this is a stylesheet linking problem most likely.

     
    |
    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