Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Website Not Displaying on Host as it does in desktop program

    I am new to HTML/CSS and I am trying to get a simple info page up for a starting company. Once that is up I will work on a full page. I used a template as an initial document and edited it to suit my situation. Now that I have uploaded it to my host it is not displaying the same way it was when I just opened the text documents with firefox. I am probably missing a number of key things, any help would be appreciated.

    I have loaded the HTML, CSS and images onto my host site and I chaged my CSS link address in the HTML document.

    http://www.canyonbgc.com/

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
      <title>Canyon Biological and Geospatial Consultants .LLC</title>
      <link rel="stylesheet" type="text/css" href="css/Style.css" />
      </head>
    <body>
      <div id="TopOverall">
      <div id="zaglavlje">
        <div id="logo">Canyon Biological and Geospatial Consultants</div>
      </div>
      <div id="lijeva_kolona">
        <div id="menuheader"></div>
        <a href="http://all-free-download.com/free-website-templates/">Home</a> <a href="http://all-free-download.com/free-website-templates/">Biological Services</a> <a href="http://all-free-download.com/free-website-templates/">Geospatial Services</a> <a href="http://all-free-download.com/free-website-templates/">Affiliates</a> <a href="http://all-free-download.com/free-website-templates/">Info</a> <a href="http://all-free-download.com/free-website-templates/">Contact Us</a>
        <div id="menufooter"></div>
      </div>
      <div id="desna_kolona">
        <h3>Website Construction</h3>
        <div class="text_desno"> This website is underconstruction.  <br />To contact us please email<br /> at MWeldy@canyonbgc.com
          <br /> or call at (651)210-8959
        </div>
        <h3><b>About Us</b></h3>
        <div class="text_desno"> Canyon Biological and Geospatial<br /> Consultants was registered as an LLC<br /> during March of 2013.</div>
      </div>
      <div class="srednja_kolona">
        <div class="content_title"><a href="http://all-free-download.com/free-website-templates/">March 2013 Was a Big Month For Us</a></div>
        <div class="text"> Canyon Biological and Geospatial Consultants is proud to annouce our formation! Our experienced pricinpal staff envisoned a company geared to handle compliance monitoring, research and restoration services that focus on providing the highest quality, solution oriented, services and deliverables. The team at Canyon Biological and Geospatial Consultants wants to bring practical, scienctifically rigorous anwsers to your project. We are looking forward to working with you. </div>
      </div>
      <div class="srednja_kolona">
        <div class="content_title"><a href="http://all-free-download.com/free-website-templates/">How we can help on your project.</a></div>
        <div class="text"> Canyon Biological and Geospatial Consultants provides biological and geospatial services, consulting and deliverbles to any client from large firms to small research teams.<br /><br />Our Services:<br />Biological Monitoring<br />Wildlife and Botanical Surveys<br /> Project Compliance<br /> Restoration<br /> Project Mapping<br />Geospatial Analysis <br /><br /> Contact us at (651)210-8959 or by email atInfo@canyonbgc.com</div>
      </div>
    </div>
    <div align=center>This template  downloaded form <a href='http://all-free-download.com/free-website-templates/'>free website templates</a></div>  
    </body>
    </html>
    Code:
    /* CSS Document_Canyonbgc.com*/
    
    body {
    background-color : #cccccc;
    }
    a:link, a:visited {
    color : rgb(204, 204, 204);
    font-weight : bold;
    text-decoration : none;
    }
    a:hover {
    color : rgb(255, 255, 255);
    text-decoration : underline;
    }
    .content_title {
    background : transparent url(images/header.gif) no-repeat scroll left top;
    position : absolute;
    padding-top : 15px;
    padding-left : 15px;
    font-size : 14px;
    margin-bottom : 1px;
    font-weight : bold;
    width : 400px;
    color : rgb(255, 255, 255);
    height : 21px;
    }
    #content_title a, #content_title a:visited {
    color : rgb(222, 240, 254);
    background-color : rgb(204, 0, 0);
    }
    h3 {
    background : transparent url(rightheader.gif) no-repeat scroll left top;
    margin-top : 0;
    margin-bottom : 0;
    padding-top : 12px;
    padding-left : 13px;
    font-size : 12px;
    color : rgb(255, 255, 255);
    height : 20px;
    }
    #zaglavlje {
    background : transparent url(images/logo.gif) no-repeat scroll 0%;
    font-size : 5px;
    font-weight : bold;
    margin-bottom : 5px;
    padding-left : 20px;
    color : rgb(255, 255, 255);
    height : 73px;
    }
    #logo {
    padding-top : 0;
    }
    #lijeva_kolona {
    float : left;
    width : 130px;
    }
    #lijeva_kolona a, #lijeva_kolona a:visited {
    background : transparent url(menulink.gif) repeat scroll 0%;
    display : block;
    padding-top : 3px;
    padding-left : 18px;
    height : 20px;
    color : rgb(204, 204, 204);
    }
    #lijeva_kolona a:hover {
    color : rgb(255, 255, 255);
    text-decoration : none;
    }
    #menuheader {
    background : transparent url(menuheader.gif) no-repeat scroll 0%;
    height : 23px;
    }
    #menufooter {
    background : transparent url(menufooter.gif) no-repeat scroll left top;
    height : 21px;
    }
    #TopOverall {
    margin : 5px auto;
    width : 750px;
    background-color : rgb(255, 255, 255);
    color : rgb(51, 51, 51);
    line-height : 180%;
    }
    #desna_kolona {
    background : rgb(255, 255, 255) url(rightcontent.gif) repeat scroll 0%;
    float : right;
    width : 240px;
    text-align : justify;
    color : rgb(204, 204, 204);
    }
    .srednja_kolona {
    background : transparent url(content.gif) repeat scroll left top;
    margin-left : 135px;
    margin-right : 240px;
    max-width : 34em;
    text-align : justify;
    }
    .text {
    padding : 40px 15px 20px;
    background : transparent url(footer.gif) no-repeat scroll left bottom;
    color : rgb(255, 255, 255);
    }
    .text_desno {
    padding : 0 15px 20px;
    background : transparent url(rightfooter.gif) no-repeat scroll left bottom;
    color : rgb(226, 226, 226);
    }
    #info {
    border : 1px solid rgb(133, 133, 133);
    padding : 5px;
    background : rgb(83, 83, 83) none repeat scroll 0%;
    color : rgb(204, 204, 204);
    font-size : 9px;
    margin-top : 5px;
    margin-bottom : 5px;
    }
    Last edited by vinyl-junkie; 07-30-2013 at 03:45 AM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Well you havent told us what is different so I will answer the obvious one first.

    remove the height from :

    Code:
    #lijeva_kolona a, #lijeva_kolona a:visited {
    background: transparent url(menulink.gif) repeat scroll 0%;
    display: block;
    padding-top: 3px;
    padding-left: 18px;
    height: 20px;
    color: rgb(204, 204, 204);
    }
    also on your hover effects you are using white when hovering, which makes the text invisible because the background is also white.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    change this

    Code:
    .srednja_kolona {
    background: transparent url(content.gif) repeat scroll left top;
    margin-left: 135px;
    margin-right: 240px;
    max-width: 34em;
    text-align: justify;
    }
    to this


    Code:
    .srednja_kolona {
    background: transparent url(/images/content.gif) repeat scroll left top;
    margin-left: 135px;
    margin-right: 240px;
    max-width: 34em;
    text-align: justify;
    }
    as a matter of fact, go through and make sure all of your image urls start with /images/ as this appears to be the root of your issue actually.

    as the images do appear to be in the correct location
    Last edited by DanInMa; 07-30-2013 at 05:24 AM.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you may want to use a bigger font for your title

    Code:
    #zaglavlje {
    font-size: 5px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    }
    actually, If I was you I would remove the font-size from zaglavlje

    and do this

    Code:
    #logo {
    font-size: 16px;
    line-height: 73px;
    width: 460px;
    }
    Last edited by DanInMa; 07-30-2013 at 05:35 AM.

  • Users who have thanked DanInMa for this post:

    Wevils (08-01-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •