PDA

View Full Version : Website loses all structure, except in browser preview


blurryhentaiii
06-18-2010, 04:39 AM
This is the first website i've built, purely using dreamweaver. So i'm not sure why this is happening.

This is what my website looks like in design view:
http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs033.snc4/34033_10150196560635182_564690181_13119733_1274754 _n.jpg
and here it is again when i preview it in firefox:

http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs013.snc4/34033_10150196560610182_564690181_13119731_7358405 _n.jpg

however, when i published the website it looked like this:
http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs013.snc4/34033_10150196560640182_564690181_13119734_3446888 _n.jpg

and again:
http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs013.snc4/34033_10150196560625182_564690181_13119732_5882268 _n.jpg

I'm assuming this has something to do with the css, more specifically my wrapper div tag or it's a box problem.

I have no idea, please can somebody help me save this trainwreck. What is wrong and why is it happening?

Thank you for your time and patience

edbr
06-18-2010, 04:46 AM
cant help from images, post your url or code

DWcourse
06-18-2010, 05:10 AM
Looks like you've either hard linked to files on your local computer (check for any links in your code that start with file:///) or forgot to upload some items.

blurryhentaiii
06-18-2010, 01:29 PM
Here's the code for my index.htm

<!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>Untitled Document</title>
<link href="file:///HD/Users/DomHome/Desktop/Lynda.com.Dreamweaver.CS4.Essential.Training.DVD/Exercise Files.7z Folder/Exercise Files/Exercise Files/Chapter10/10_04/_css/main_layout.css" rel="stylesheet" type="text/css" media="screen, projection" />
<script type="text/javascript">
<!--
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_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_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>
</head>

<body onload="MM_preloadImages('_Graphics/Buttons/ButHomoeroll.jpg','_Graphics/Buttons/butblahblahblahroll.jpg','_Graphics/Buttons/ButVideosroll.jpg','_Graphics/Buttons/ButContactroll.jpg','_Graphics/Buttons/ButLinkssroll.jpg')">
<div id="wrapper">
<div id="header">s Here</div>
<div id="mainContent"></div>
<div id="sidebar"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','_Graphics/Buttons/ButHomoeroll.jpg',1)"><img src="_Graphics/Buttons/ButHomoe.jpg" alt="home" name="Home" width="200" height="70" border="0" id="Home" /></a><a href="news.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blah','','_Graphics/Buttons/butblahblahblahroll.jpg',1)"><img src="_Graphics/Buttons/butblahblahblah.jpg" name="blah" width="200" height="70" border="0" id="blah" /></a><a href="videomain.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Videos','','_Graphics/Buttons/ButVideosroll.jpg',1)"><img src="_Graphics/Buttons/ButVideos.jpg" name="Videos" width="200" height="70" border="0" id="Videos" /></a><a href="contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','_Graphics/Buttons/ButContactroll.jpg',1)"><img src="_Graphics/Buttons/ButContact.jpg" name="contact" width="200" height="70" border="0" id="contact" /></a><a href="links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','_Graphics/Buttons/ButLinkssroll.jpg',1)"><img src="_Graphics/Buttons/ButLinkss.jpg" alt="link" name="links" width="200" height="70" border="0" id="links" /></a></div>
<div></div>
<div></div>
<div id="footer"></div>
</div>
</body>
</html>

Here's for my contact page:

<!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>Untitled Document</title>
<link href="file:///HD/Users/DomHome/Desktop/Lynda.com.Dreamweaver.CS4.Essential.Training.DVD/Exercise Files.7z Folder/Exercise Files/Exercise Files/Chapter10/10_04/_css/main_layout.css" rel="stylesheet" type="text/css" media="screen, projection" />
<script type="text/javascript">
<!--
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_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_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>
</head>

<body onload="MM_preloadImages('_Graphics/Buttons/ButHomoeroll.jpg','_Graphics/Buttons/butblahblahblahroll.jpg','_Graphics/Buttons/ButVideosroll.jpg','_Graphics/Buttons/ButContactroll.jpg','_Graphics/Buttons/ButLinkssroll.jpg')">
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="mainContent">
<h1><img src="_Graphics/Buttons/ButContact.jpg" width="200" height="70" alt="News" /></h1>
<h1 class="header">LIKE WHAT YOU SEE? DROP A LINE, SHOW YOUR APPRECIATION! SHOW YOUR HATRED!</h1>
<p>For all Inquiries/Requests/Comments/Criticisms E-mail us at: <a href="mailto:blamblamblamm@gmail.com">blamblamblamm@gmail.com</a></p>
<p>Looking for a Competant Web Designer? E-Mail to: <a href="mailto:thepentagon233@hotmail.com">thepentagon233@hotmail.com</a></p>
<p>Looking for Video Production Talent (From Features to Anything)? E-Mail: <a href="mailto:thepentagon233@hotmail.com">thepentagon233@hotmail.com</a></p>
<p>For Promotion and Advertising: E-Mail us at: <a href="mailto:blamblamblamm@gmail.com">blamblamblamm@gmail.com</a></p>
<h1 class="header">BE THE BIGGEST FAN...SUBSCRIBE!</h1>
<a href="http://www.facebook.com/pages/Blam-Blam-Blam-Productions/108030469245164?created#!/pages/Blam-Blam-Blam-Productions/108030469245164"><img src="_Graphics/Buttons/facebook_icon_5.png" width="97" height="100" alt="subscribe to facebook" /></a><a href="http://www.youtube.com/user/blamblamblamProd"><img src="_Graphics/Buttons/icon-yt.png" width="100" height="99" alt="subscribe to youtube" /></a><a href="http://twitter.com/BLAMHentaiii"><img src="_Graphics/Buttons/twitter_icon_4.png" width="97" height="100" alt="subscribe to twitter" /></a>
<h1 class="header">SUPPORT BLAM BLAM BLAM! </h1>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="KZPR58PYYHDQQ">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

</div>
<div id="sidebar"><a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','_Graphics/Buttons/ButHomoeroll.jpg',1)"><img src="_Graphics/Buttons/ButHomoe.jpg" alt="home" name="Home" width="200" height="70" border="0" id="Home" /></a><a href="news.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blah','','_Graphics/Buttons/butblahblahblahroll.jpg',1)"><img src="_Graphics/Buttons/butblahblahblah.jpg" name="blah" width="200" height="70" border="0" id="blah" /></a><a href="videomain.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Videos','','_Graphics/Buttons/ButVideosroll.jpg',1)"><img src="_Graphics/Buttons/ButVideos.jpg" name="Videos" width="200" height="70" border="0" id="Videos" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','_Graphics/Buttons/ButContactroll.jpg',1)"><img src="_Graphics/Buttons/ButContact.jpg" name="contact" width="200" height="70" border="0" id="contact" /></a><a href="links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','_Graphics/Buttons/ButLinkssroll.jpg',1)"><img src="_Graphics/Buttons/ButLinkss.jpg" alt="link" name="links" width="200" height="70" border="0" id="links" /></a></div>
<div>$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$</div>
<div></div>
<div id="footer"></div>
</div>
</body>
</html>

DWcourse
06-18-2010, 01:55 PM
<link href="file:///HD/Users/DomHome/Desktop/Lynda.com.Dreamweaver.CS4.Essential.Training.DVD/Exercise Files.7z Folder/Exercise Files/Exercise Files/Chapter10/10_04/_css/main_layout.css" rel="stylesheet" type="text/css" media="screen, projection" />

You're linking to a style sheet on your hard drive. Naturally, that's not available online once you've uploaded the html file. You need to delete the link to the style sheet and add it again. This time making sure the link is relative to the html file or the site root, (and make sure you've defined your site correctly. an incorrectly defined site can cause problems like this)

blurryhentaiii
06-18-2010, 09:32 PM
Thanks alot DW, you're a saint.