Website doesn’t display correctly on FTP, works fine when viewed from Dreamweaver

[asalaver]

I need help with my website/portfolio. I’m a noob at dreamweaver. When I view it using my webspace a white screen just shows up, but when I hovered over to the links on the right side they were there. It seems like everything turned white. Everything including the images doesn’t show up according to my CSS format.
Here is my website: http://www.sfu.ca/~asalaver/alexportfolio/
Here’s the html code. I used a template i found online.

 Alex Salaveria


Welcome


about


works


resume


contact

CSS

@charset "UTF-8";

/* CSS Document */



/* CSS Reset */



body, div, h1, h2, h3, h4, h5, h6, h7, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {

margin: 0px; padding: 0px; border: 0px;



}



body {

font-family: Helvetica, Arial, sans-serif; /* Set the global font */

background:url(../images/bg_body.jpg); /* Add the repeating texture file */

position:absolute;





}



#page-wrap {

background: url(../images/bg_body.jpg) center top no-repeat; /* An extra DIV allows us to attach the larger background image and position centrally on the page */

}



/* Lay out the page structure with a container */

#container {

width: 900px; /* Width of the container minus the left padding below */

margin: 0 auto; /* Aligns the container to the centre of the page */

padding: 60px 0 0 222px; /* Add some top and left padding */

}



#header {

margin: 0 0 40px 0;	/* Bottom margin on the header */

}



#header h1 a {



display: block;

width: 485px; height: 75px; /*...Which then allows us to specify width and height (according to the image) */

color: #6b5c4e; margin: 0 0 20px 0; /* the color can't actually be seen on the text, but it avoids a blue dotted border in Firefox */

background: url(../images/logo2.png); text-indent: -9999px; /* Add the background image as part of the CSS Image Replacement and shift the text out of the way */





}



#header h2 {

width: 600px;

height: 580px;

background: url(../images/welcome.png) no-repeat;

position:fixed;

margin-left:45px;

margin-top:60px;

text-indent: -9999px;



}



#header h3 a {



width: 485px;

height: 75px;

background: url(../images/about.png) no-repeat;

text-indent: -9999px;

position:fixed;

margin-left:505px;

margin-top:-65px;





}



#header h4 a {



width: 485px;

height: 75px;

background: url(../images/works.png) no-repeat;

text-indent: -9999px;

position:fixed;

margin-left:580px;

margin-top:-65px;



}



#header h5 a {



width: 485px;

height: 75px;

background: url(../images/resume.png) no-repeat;

text-indent: -9999px;

position:fixed;

margin-left:665px;

margin-top:-67px;





}

#header h6 a {



width: 485px;

height: 75px;

background: url(../images/contact.png) no-repeat;

text-indent: -9999px;

position:fixed;

margin-left:755px;

margin-top:-69px;



}



h7 {

font-family:Arial, Helvetica, sans-serif;

font-size:15px;

color: #FFF;

}



#header h3 a.about:hover,a.about:active {

background:url(../Images/aboutblack.png) no-repeat;

}



#header h4 a.works:hover, a.works:active {

background:url(../Images/worksblack.png) no-repeat;



}



#header h5 a.resume:hover, a.resume:active {

background:url(../Images/resumeblack.png) no-repeat;

}



#header h6 a.contact:hover, a.contact:active {

background:url(../Images/contactblack.png) no-repeat;



}



a.type:link{

color: #FFF;

text-decoration:none;

background:transparent;

}





a.type:visited {

color: #FFF;

text-decoration:none;

background:transparent;

}



a.type:hover{

color: #000;

text-decoration:none;

background:transparent;

}

a.type:active {

color:#000;

text-decoration:none;

background:transparent;

}

[Vermaas]

Dreamweaver sucks with outputting the website. You better look for using wamp (windows user) or mamp (mac user) for testing you’re website’s in every browser.

That’s the best way to see or your website works in the browsers or not. Don’t use dreamweaver for it.

[pgorski]

Your Image directory is no where to be found. Are you using different image directory?

I also have to agree with Andy, I wouldn’t use the dreamweaver built in preview.
I also code by sites with dreamweaver(I know it sucks) but use the browsers for testing. I don’t trust the built in preview

Peter

[Paulie_D]

The preview in Dreamweaver is irrelevant to this problem.

This is a simple case of the site structure not replicating properly on the live web server and the file src not being updated.

[asalaver]

I uploaded the entire folder containing the html pages and a folder for the CSS file and another folder for the Images. I just used the Browse URL option for linking the files in my Images folder. I don’t know why my image directory can’t be found. And yeah I can’t remove the tilde because i’m using my school’s webspace and the text indent -9999px is there because of the template i’m using.

[TheDoc]

I also can’t find the directory anywhere.

Are you sure you’ve actually uploaded it? Can you take a screenshot of what the server looks like via ftp?

[asalaver]

yes. here are the screenshots. I use Filezilla.
Screenshot1
Screenshot2

[TheDoc]

Perfect! It’s because your folder is using a capital ‘I’, not lower case ‘i’.

[asalaver]

WOW I MADE SUCH A SILLY MISTAKE. It works now! Thank you TheDoc and everyone. I appreciate the help.

[TheDoc]

As a rule, always go lower case.

[Senff]

It looks much better, but I think it’s a very dubious decision to make everything on this page an image.

[Paulie_D]

It’s also an odd way to code the menu. Is there some reason you aren’t using a list?

[asalaver]

I’m still learning how to use Dreamweaver, so I don’t really have a solid idea on how to code navigations and menu. I used images for now until I could learn how to make a better code structure.

[Author]

Posts