Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Oct 2012
    Location
    Brisbane QLD Australia
    Posts
    12
    Member #
    33227
    Hello all I am new to the community here and I hope to help others as others help me.

    Here is my problem. I am trying to create a website using CSS, JQuery, HTML and some php later (still not sure weather I want the PHP)

    So the problem is that it appears that the CSS sheet is not linking to the HTML sheet. (page/s)

    Bellow are both codes in order CSS first and followed by HTML.

    CSS:
    Code:
    .body{
    background url:(images/bodybg.jpg)
    }
    #slider_wrapper {
    height: 246px;
    }
    #slider {
    position: relative;
    width: 1000;
    height: 350;
    
    }
    #slider img {
    position: absolute;
    top:
    left: 0;
    display: none;
    background: url(images/loading.gif) no-repeat 50% 50%;
    }
    #slider a {
    border: 0;
    display: block;
    }
    /*
    * jQuery Nivo Slider v3.1
    * http://nivo.dev7studios.com
    *
    * Copyright 2012, Dev7studios
    * Free to use and abuse under the MIT license.
    * http://www.opensource.org/licenses/mit-license.php
    */
    
    /* The Nivo Slider styles */
    .nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
    }
    .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    max-width: none;
    }
    .nivo-main-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    }
    
    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
    }
    /* The slices and boxes in the Slider */
    .nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
    }
    .nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
    }
    .nivo-box img { display:block; }
    
    /* Caption styles */
    .nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    width:100%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    }
    .nivo-caption p {
    padding:5px;
    margin:0;
    }
    .nivo-caption a {
    display:inline !important;
    }
    .nivo-html-caption {
    display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
    }
    .nivo-prevNav {
    left:0px;
    }
    .nivo-nextNav {
    right:0px;
    }
    /* Control nav styles (e.g. 1,2,3...) */
    .nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    }
    .nivo-controlNav a {
    cursor:pointer;
    }
    .nivo-controlNav a.active {
    font-weight:bold;
    }
    *{
    
    margin: 0;
    
    }
    
    html, body{
    height: 100%;
    
    }
    
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
    
    .footer, .push {
    height: 4em;
    color: #FFFFFF;
    text-align: center;
    }
    HTML:

    HTML Code:
    <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script src="jquery-1.7.1.min.js " type="text/javascript"></script>
    <script src="jquery.nivo.slider.js " type="text/javascript"></script>
       
    <title>Shutter Speed Artography</title>
    </head>
     
    <body id="body">
    <div class="wrapper">
    <div id="slider-wrapper">
    <div is="slider">
    <img src="images/Abstract 73.jpg" title="Abstract image 73" height="350" width="1000">
    <img src="images/beetle 3.jpg" title="#htmlcaption" height="350" width="1000">
    
    </div>
    <div id="htmlcaption" class="nivo-slider-caption">
    </div>
    <strong>image</strong> <a href="#">tag</a>
    </div>
    </div>
      
    <h1 id="main_heading">Shutter Speed Artography</h1>
     
    <br />
    <br />
    <br />
    <div id="upper-content">
    
    <div id="p-home">
    <p>
    Welcome to the home of Shutter Speed Artography
    </p>
    </div>
    </div>
      
    </div>
     
    <div class="footer">
    
    <p>
    Copyright &copy; 2012 Shutter Speed Artography
    </p>
    <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
    src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
    </p>
    
    </div>
    </body>
    
    </html>
    So there are the 2 codes.

    I would be most grateful if somone could assist me with this issue.

    Thanks

    Nick


  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Is your CSS file saved as css/style.css? That's usually what causes a stylesheet to fail...the location isn't referenced correctly.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Oct 2012
    Location
    Brisbane QLD Australia
    Posts
    12
    Member #
    33227
    Is your CSS file saved as css/style.css? That's usually what causes a stylesheet to fail...the location isn't referenced correctly.
    I have a seperate area from the HTML so the CSS file is located in a directory / file named CSS

    therefor the link is: css/styl.css

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    CSS or css ? And styl.css or style.css? Directories (depending on your server) and filenames are spelling and case sensitive.

    If you can't get it to work, upload it somewhere and show us the link.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Oct 2012
    Location
    Brisbane QLD Australia
    Posts
    12
    Member #
    33227
    I have this:

    HTML Code:
    <!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>
    <body id="body">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <script src="jquery-1.7.1.min.js " type="text/javascript"></script>
    <script src="jquery.nivo.slider.js " type="text/javascript"></script>
       
    <title>Shutter Speed Artography</title>
    </head>
     
    <body>
    <div class="wrapper">
    <div id="slider-wrapper">
    <div is="slider">
    <img src="images/Abstract 73.jpg" title="Abstract image 73" height="350" width="1000">
    <img src="images/beetle 3.jpg" title="#htmlcaption" height="350" width="1000">
    
    </div>
    <div id="htmlcaption" class="nivo-slider-caption">
    </div>
    <strong>image</strong> <a href="#">tag</a>
    </div>
    </div>
      
    <h1 id="main_heading">Shutter Speed Artography</h1>
     
    <br />
    <br />
    <br />
    <div id="upper-content">
    
    <div id="p-home">
    <p>
    Welcome to the home of Shutter Speed Artography
    </p>
    </div>
    </div>
      
    </div>
     
    <div class="footer">
    
    <p>
    Copyright &copy; 2012 Shutter Speed Artography
    </p>
    <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
    src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
    </p>
    
    </div>
    </body>
    
    </html>
    then the CSS:

    Code:
    body{
    background url:(images/bodybg.jpg)
    }
    #slider_wrapper {
    height: 246px;
    }
    #slider {
    position: relative;
    width: 1000;
    height: 350;
    
    }
    #slider img {
    position: absolute;
    top:
    left: 0;
    display: none;
    background: url(images/loading.gif) no-repeat 50% 50%;
    }
    #slider a {
    border: 0;
    display: block;
    }
    /*
    * jQuery Nivo Slider v3.1
    * http://nivo.dev7studios.com
    *
    * Copyright 2012, Dev7studios
    * Free to use and abuse under the MIT license.
    * http://www.opensource.org/licenses/mit-license.php
    */
    
    /* The Nivo Slider styles */
    .nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
    }
    .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    max-width: none;
    }
    .nivo-main-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    }
    
    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
    }
    /* The slices and boxes in the Slider */
    .nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
    }
    .nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
    }
    .nivo-box img { display:block; }
    
    /* Caption styles */
    .nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    width:100%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    }
    .nivo-caption p {
    padding:5px;
    margin:0;
    }
    .nivo-caption a {
    display:inline !important;
    }
    .nivo-html-caption {
    display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
    }
    .nivo-prevNav {
    left:0px;
    }
    .nivo-nextNav {
    right:0px;
    }
    /* Control nav styles (e.g. 1,2,3...) */
    .nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    }
    .nivo-controlNav a {
    cursor:pointer;
    }
    .nivo-controlNav a.active {
    font-weight:bold;
    }
    *{
    
    margin: 0;
    
    }
    
    html, body{
    height: 100%;
    
    }
    
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
    
    .footer, .push {
    height: 4em;
    color: #FFFFFF;
    text-align: center;
    }

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I think you misunderstood me. My bad.

    What I meant was to upload the page somewhere via FTP and let us see it. The code by itself isn't quite enough information to go on in this case.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Junior Member
    Join Date
    Oct 2012
    Location
    Brisbane QLD Australia
    Posts
    12
    Member #
    33227
    Sure I can do that.

    The link to the project is: http://www.aussiemines.com/spa

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You've definitely got the CSS referenced correctly within the HTML page. This means that you're not seeing something you're expecting to see.

    Personally, if it's what I think it is I think your problem is here:
    Code:
    #slider {
        position: relative;
            width: 1000;
            height: 350;
    
    }
    This should be:
    Code:
    #slider {
        position: relative;
            width: 1000px;
            height: 350px;
    
    }
    Always specify units of measure.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Junior Member
    Join Date
    Oct 2012
    Location
    Brisbane QLD Australia
    Posts
    12
    Member #
    33227
    Thanks I shall try this and see if that fixes the problem

    I shall reply soon.

  11. #10
    Junior Member
    Join Date
    Oct 2012
    Location
    Brisbane QLD Australia
    Posts
    12
    Member #
    33227
    Nope problem not fixed.

    Here is an ftp account I have setup for you.

    FTP:

    File Zilla

    Host: ftp.aussiemines.com
    Username: public@aussiemines.com
    Password: Public_Open

    Hope that helps you help me

    Thanks again I am most gratful for your assistance.

    Nick.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:40 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com