Skip navigation
hunterguest1
hunterguest1
Currently Being Moderated

*HELP* SITE DIFFERS WHEN PUT IN LIVE VIEW!

Sep 7, 2012 12:28 PM

Tags: #cs4 #cs5 #cs3 #error #background #image #adobe #flash #internet #jquery #mac #files #javascript #link #images #links #spry #css #menu #form #phonegap #ie #html5 #ftp #dw #liveview

Hi there,

 

Okay, so at the moment I am making a website using Adobe Dreamweaver CS5 (on a mac.) I know a little bit about HTML/CSS, but I am no expert.

Recently, while working on dreamweaver I put my website into "live view" and  when the page loaded, everything was all over the place! The same think happened when I previewed it in my browser - all images went to the side of the page, and the text went to the side as well.

 

I can do nothing to change this, so please please help I you know a way around this problem.

Below is the code for my "index.php" file.

 

 

<!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"><!-- InstanceBegin template="/Templates/Template.dwt.php" codeOutsideHTMLIsLocked="false" --><head>




<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<!-- InstanceBeginEditable name="doctitle" -->
<title>EXAMPLE</title>












<meta name="Description" content="EXAMPLE"/>


<link rel="shortcut icon" href="file:///Macintosh HD/Applications/MAMP/htdocs//images/favicon.ico" type="image/x-icon" />


<!-- InstanceEndEditable -->


<!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="http://www..com/ie6.css" />
<![endif]--> 


<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/"/>  
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://feeds.feedburner.com/"/>


<link rel="Shortcut Icon" href="/favicon.ico"/>












<meta name="verify-v1" content="0KooIWgKqor2CP9rVUDNpl4CAi5NNdCWXS4kppblnXI="/>
<link href="file:///Macintosh HD/Applications/MAMP/htdocs//style2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
     background-image: url();
     background-color: #f3f1e5;
     margin-left: 0px;
}
#sidebanna12 {
     position: absolute;
     left: 695px;
     top: 1114px;
     right: auto;
     bottom: auto;
     width: 263px;
     height: 178px;
}
#container #content p {
     text-align: left;
}
#apDiv1 {
     position:absolute;
     width:630px;
     height:115px;
     z-index:1;
     left: 574px;
     top: 262px;
}
#apDiv2 {
     position:absolute;
     width:526px;
     height:115px;
     z-index:1;
     left: 454px;
     top: 388px;
}
#apDiv3 {
     position:absolute;
     width:283px;
     height:56px;
     z-index:2;
     left: 779px;
     top: 1378px;
}
#apDiv4 {
     position:absolute;
     width:200px;
     height:115px;
     z-index:2;
}
</style>
<style type="text/css">
#apDiv6 {
     position:absolute;
     left:529px;
     top:300px;
     width:406px;
     height:69px;
     z-index:1;
}


#apDiv5 {
     position:absolute;
     z-index:1;
     left: -152px;
     top: -347px;
}
#apDiv8 {
     position:absolute;
     left:561px;
     top:-110px;
     width:483px;
     height:105px;
     z-index:1;
}
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<script src="file:///Macintosh HD/Applications/MAMP/htdocs/2createablog/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///Macintosh HD/Applications/MAMP/htdocs/2createablog/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="shadow">
  <div id="container">
    <div id="header">
      <div id="topbanner">
        <table width="500" align="center">
          <tr>
            <td height="81">
              <script type="text/javascript"><!--
google_ad_client = "ca-pub-2872829090091962";
/* Topbanner */
google_ad_slot = "7036430466";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
  <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
  </td>
  </tr>
  </table>
        
        
        
        
        
        
        
        
        
        
      </div>
      <div id="logo"> <a href="file:///Macintosh HD/Applications/MAMP/htdocs/2createablog/index.php"><img src="file:///Macintosh HD/Applications/MAMP/htdocs//images/Logos/Website Logo/logo.png" width="426" height="176"/></a></div>
      <!--<div id="advertiseheretop"><a href="http://www..com/other/advertise.html">Advertise Here</a></div>-->
      <div id="tagline">
        <h2><img src="file:///Macintosh HD/Applications/MAMP/htdocs//images/Logos/tagline.png" width="499" height="31" alt="at the heart of website creation, heart, website," /></h2>
</div>
      
      <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td><ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="file:///Macintosh HD/Applications/MAMP/htdocs//index.php">Home</a>        </li>
            <li><a href="file:///Macintosh HD/Applications/MAMP/htdocs//prebuild/Start.php" class="MenuBarItemSubmenu">Start</a>
              <ul>
  <li><a href="file:///Macintosh HD/Applications/MAMP/htdocs//prebuild/Start.php"></a></li>
  <li><a href="file:///Macintosh HD/Applications/MAMP/htdocs//prebuild/.php"></a></li>
  <li><a href="file:///Macintosh HD/Applications/MAMP/htdocs//prebuild/Name.php">Name</a></li>
  <li><a href="file:///Macintosh HD/Applications/MAMP/htdocs//prebuild/.php"></a></li>
  <li><a href="#">Software</a></li>
                </ul>
              </li>
            <li><a class="" href="#">Blogging</a>
              <ul>
                <li><a href="#">Free Blog?</a>            </li>
                <li><a href="#" class="">Wordpress</a>
                  <ul>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    </ul>
                  </li>
  </ul>
              </li>
            <li><a href="file:///Macintosh HD/Applications/MAMP/htdocs//money.php">Money</a>        </li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#">Site Map</a></li>
          </ul></td>
        </tr>
  </table>
      
      
    </div>
    <div id="bannaholder"><img src="file:///Macintosh HD/Applications/MAMP///images/banners/top banna/Banner1.png" width="1000" height="160" alt="blogging," />
      <div id="fo"></div>
      
  </div>
    <!-- InstanceBeginEditable name="content1" -->
    <div id="content">
      <div id="apDiv8"><img src="file:///Macintosh HD/Applications/MAMP/htdocs//images/Logos/1327581977_Twitter_128x128.png" width="105" height="109" /><img src="file:///Macintosh HD/Applications/MAMP/htdocs/2createablog/images/Logos/1327581982_FaceBook_128x128.png" width="107" height="111" /><img src="file:///Macintosh HD/Applications/MAMP/htdocs//images/Logos/1327581984_Feed_128x128.png" width="105" height="111" /><img src="file:///Macintosh HD/Applications/MAMP/htdocs//images/Logos/1327582010_Google_128x128.png" width="108" height="110" /></div>
      <!--<div id="navcontainer"> 


   
   
   
   
   
   
            </div> -->
      <h1>Header HERE</h1>
      <!-- BEGIN MAIN CONTENT--><!-- BEGIN MAIN CONTENT-->
      <p>MAIN CONTENT HERE<img src="file:///Macintosh HD/Applications/MAMP/htdocs/2createablog/images/sideimages/123.png" alt="ABC" width="312" height="225" class="inline"/></p>
<h2> </h2>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><em><img src="file:///Macintosh HD/Applications/MAMP/htdocs//images/Content Images/rules_image.png" alt="guide" align="right" height="458" hspace="5" vspace="5" width="256"/></em></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><em><img src="file:///Macintosh HD/Applications/MAMP/htdocs//images/Images/helpful_tips.png"  alt="Lisa Irby" width="108" height="106" hspace="5" vspace="5" align="left" /></em></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h2> </h2>
<p>
        <!-- AddThis Button BEGIN -->
      </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
      <div class="addthis_toolbox addthis_default_style ">
        <p> </p>
      </div>
      <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e52b14270845301"></script>
      <!-- AddThis Button END -->
      <p></p>
      <br />
      <table width="620" border="0">
        <tr>
          <td width="300"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2872829090091962";
/* Sidebanna top */
google_ad_slot = "0086306766";
google_ad_width = 300;
google_ad_height = 250;
//-->
        </script>
            <script type="text/javascript"
src="http://pagead2..com/pagead/show_ads.js">
          </script></td>
          <td width="310"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2872829090091962";
/* Sidebanna top */
google_ad_slot = "0086306766";
google_ad_width = 300;
google_ad_height = 250;
//-->
        </script>
            <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
          </script></td>
        </tr>
      </table>
      <p><br />
      </p>
      <div align="left">
        <p>
          <!--<a href="../design/css-website-templates.html"><img src="http://EXAMPLE.com/images/footerAd.jpg" alt="Easy Starter CSS Templates" width="600" height="200" /></a>-->
          <a href="http://www.EXAMPLE.com/wordpress-tutorial/">Advert</a>
          <!--
<a href="http://www..com/money/.html"><img src="../images/sbiHoliday.gif" alt="Starter ()" width="600" height="250" border="0"/></a>
 -->
        </p>
        <p><a href="http://www.EXAMPLEcom/wordpress-tutorial/">Advert</a></p>.
        <p><a href="http://www.gg.com/-tutorial/">Advert</a></p>
      </div>
      <!--


 <div id="twitter_div">
<ul id="twitter_update_list" style="width: 430px; line-height: 15px;">
</ul>
<a href="http://twitter.com/" id="twitter-link" style="display:block;text-align:right;font-size: 10px; font-color: #d22929;">Follow on</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/.json?callback=&count=3"></script></div>


-->
    </div>
    <!-- InstanceEndEditable --><!--closes content div-->
    <div id="sidebar1"><!-- InstanceBeginEditable name="Related" -->
      <div align="center">
        <p class="redtext">Related Articles:</p>
        <p> </p>
        <p> </p>
        <div>
          <script type="text/javascript" src="http://www.google.co.uk/coop/cse/brand?form=cse--box&lang=en"></script>
        </div>
      </div>
    <!-- InstanceEndEditable -->
      <p> </p>
      <p> </p>
      <div></div>
      <div id="makingMoneyOnline"></div>
      <div id="makingMoneyOnline"></div>
      <table width="120" align="left">
        <tr>
          <td><script type="text/javascript"><!--
google_ad_client = "ca-pub-2872829090091962";
/* Sidebanna_down */
google_ad_slot = "4472817359";
google_ad_width = 120;
google_ad_height = 600;
//-->
        </script>
            <script type="text/javascript"
src="http://pagead2..com/pagead/show_ads.js">
          </script></td>
        </tr>
      </table>
      <!-- InstanceBeginEditable name="Side Test" -->
      <div>
        <p> </p>
      </div>
      <!-- InstanceEndEditable -->
      <div class="center" id="sidebar">
        <p> </p>
        <p class="bulletlist"><span class="VR"> <a href="d">---Tips, Tricks,---</a></span></p>
        <p class="bulletlist"><a href="d"><span class="VR">---My </span></a></p>
        <p class="bulletlist"><a href="d"><span class="VR">---Creating a EXAMPLE EXAMPLE EXAMPLE---</span></a></p>
        <pre class="bulletlist"><a href="d"><span class="VR">---Moving EXAMPLE EXAMPLE EXAMPLE---</span></a><span class="VR"></span></pre>
        <pre class="bulletlist"><span class="VR"><a href="sadf">---EXAMPLE Help</a></span><a href="d">---</a></pre>
        <p> </p>
        <div class="sidebar" id="sidebar2">
          <p>  </p>
          <p class="bulletlist"><span class="VR"> <a href="d">---TEXAMPLEs---</a></span></p>
          <p class="bulletlist"><a href="d"><span class="VR">---EXAMPLE Templates</span></a></p>
          <p class="bulletlist"><a href="d"><span class="VR">---EXAMPLE--</span></a></p>
          <pre class="bulletlist"><a href="d"><span class="VR">---EXAMPLE---</span></a><span class="VR"></span></pre>
          <pre class="bulletlist"><span class="VR"><a href="sadf">---EXAMPLE</a></span><a href="d">---</a>
        </pre>
        </div>
        <div class="sidebar" id="sidebar3">
          
          <p class="bulletlist"><span class="VR"> <a href="d">---EXAMPLE---</a></span></p>
          <p class="bulletlist"><a href="d"><span class="VR">---EXAMPLE</span></a></p>
          <p class="bulletlist"><a href="d"><span class="VR">---EXAMPLE---</span></a></p>
          <pre class="bulletlist"><a href="d"><span class="VR">---EXAMPLE---</span></a><span class="VR"></span></pre>
          <pre class="bulletlist"><span class="VR"><a href="sadf">---Help</a></span><a href="d">---</a></pre>
        </div>
      </div>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p><br/>
      </p>
      <!-- 




<div id="feedburnerFeed">






<center><img src="../images/.gif" /></center>






<script src="http://feeds.feedburner.com/?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/"></a><br/>Powered by FeedBurner</p> </noscript></div>-->
      <!-- end #sidebar1 -->
    </div>
    <hr width="1%" size="100" />
  <!--<div class="line"> 
            
          </div> -->
    <!--
            <p class="title">Donec Laoreet :</p> 
            <p>Lorem magna, lobortis non, venenatis et, vulputate et, enim. Nulla
              at diam a augue rhoncus molestie. Fusce eros nisl, imperdiet et,
              feugiat ut, eleifend accumsan, velit. </p> 
            <p>  </p> -->
    <div id="footer">
      <p class="small">Copyright 2011-2012 |</a></p>
      <p align="center">
        <!--WEBBOT bot="Script" startspan PREVIEW="Site Meter" -->
        <script type="text/javascript" src="http://s12.sitemeter.com/js/counter.js?site=6">


</script>
        <noscript>
          <a href="http://s12.sitemeter.com/.asp?site=34" target="_top"> <img src="http://s12.sitemeter.com/.asp?site=s122create" alt="Site Meter" border="0"/></a>
        </noscript>
        <!--WEBBOT bot="Script" Endspan i-checksum="23150" -->
      </p>
      <!--start Google Analytics-->
      <script src="http://www.google-analytics.com/.js" type="text/javascript">


</script>
      <script type="text/javascript">


_uacct = "UA-185121-1";


urchinTracker();


</script>
      <!--end Google Analytics-->
      <!--Start WWD Reseller Code  -->
      <script type="text/JavaScript" src="https://rt.trafficfacts.com/tf.php?k=;c=s;v=2"></script>
      <script type="text/JavaScript">tfObj.process();</script>
      <noscript>
        <img src="h" height="1" width="1" alt=""/>
      </noscript>
      <!--End WWD Reseller Code  -->
      <!-- end .footer -->
    </div>
  <!-- end .container --></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body><!-- InstanceEnd --></html>
1223 Views   8 Replies   Latest reply: Rik Ramsay, Sep 7, 2012 1:00 PM
 
Replies
  • hunterguest1
    Currently Being Moderated
    1. hunterguest1,
    Sep 7, 2012 12:35 PM   in reply to hunterguest1
    Report

    Anyone have any ideas?

     
    |
    Mark as:
  • Jon Fritz II
    Currently Being Moderated
    2. Jon Fritz II,
    Sep 7, 2012 12:35 PM   in reply to hunterguest1
    Report

    It is much more helpful if you could post a link to a live page, even if you put it in a test folder that you take down after the issue is solved.

     
    |
    Mark as:
  • hunterguest1
    Currently Being Moderated
    3. hunterguest1,
    Sep 7, 2012 12:36 PM   in reply to Jon Fritz II
    Report

    Okay, I will do that.

     

    However I do not have not connected it to my web host yet, so is there any other way of putting it up?

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    4. Rik Ramsay,
    Sep 7, 2012 12:40 PM   in reply to hunterguest1
    Report

    Any time you see a link that looks like this:

    file:///Macintosh HD/Applications/MAMP/htdocs/2createablog/SpryAssets/SpryMenuBar.js

    it means you have not defined your site which is an essential part of working within Dreamweaver.

     

    Define your site by setting the local folders and image folders and see if it clears anything up. As you are using MAMP and working with PHP (why? You have no PHP code) also make sure you turn on PHP for the local host.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Sep 7, 2012 12:42 PM   in reply to hunterguest1
    Report

    HTML:

     

    You have links pointing to files on your local hard drive instead of your site.

    <link href="file:///Macintosh HD/Applications/MAMP/htdocs//style2.css" rel="stylesheet" type="text/css" />

     

    Did you set up a testing server in DW?

     

    CSS:

     

    Absolute positioning for primary layouts is the kiss of death.  What you're seeing is exactly how APDivs behave. 

    http://forums.adobe.com/thread/477969

     

    If you're new to CSS Layouts, you should step away from this project and learn how to work with CSS margins, padding and floats.  Or use one of the pre-built CSS layouts that comes with Dreamweaver.

    File > New > Plain > HTML > Layout (select one).

     

     

    Nancy O.

     
    |
    Mark as:
  • hunterguest1
    Currently Being Moderated
    6. hunterguest1,
    Sep 7, 2012 12:46 PM   in reply to Rik Ramsay
    Report

    Thanks for the quick reply Rik,

     

    When you say "define your site by setting the local folders and image folders" do you mean setting a root folder for my file and images?

     

    And Yes, i am using MAMP

     
    |
    Mark as:
  • hunterguest1
    Currently Being Moderated
    7. hunterguest1,
    Sep 7, 2012 12:50 PM   in reply to Nancy O.
    Report

    Nancy O,

     

    Thank you for replying, I set up a testing server in dreamweaver using MAMP. And I will fix the  files which lead into my Desktop

     

    Thanks Again

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    8. Rik Ramsay,
    Sep 7, 2012 1:00 PM   in reply to hunterguest1
    Report

    Yes. When you define a site, it asks you what the root folder of the site is and also for the default images folder. This helps DW sort out the structure of your site.

     
    |
    Mark as:
Actions

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