Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #36980
    asalaver
    Participant

    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.










    Portfolio














    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;
    }




    #98166
    Vermaas
    Participant

    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.

    #98173
    pgorski
    Member

    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

    #98177
    Paulie_D
    Moderator

    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.

    #98239
    asalaver
    Participant

    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.

    #98241
    TheDoc
    Moderator

    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?

    #98242
    asalaver
    Participant

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

    #98245
    TheDoc
    Moderator

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

    #98247
    asalaver
    Participant

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

    #98248
    TheDoc
    Moderator

    As a rule, always go lower case.

    #98272
    Senff
    Participant

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

    #98274
    Paulie_D
    Moderator

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

    #98688
    asalaver
    Participant

    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.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.