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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Html and CSS: CSS file isnt working right

    This is my coding, my background image and all the fonts wont work for some reason. Please help.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Runner's Racing</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="https://pbs.twimg.com/profile_images/1622233750/alton_favicon.png"/>
    <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet'>
    <link rel="stylesheet" href="CSS.css">
    </head>
    <body>
    <h1 id="head">Runner's Racing</h1>
    <div class="box"><div class="featured"; id="left"></div><h2>New Apparel</h2></div>
    <div class="box"><div class="featured"; id="center"></div><h2>Bestsellers</h2></div>
    <div class="box"><div class="featured"; id="right"></div><h2>News and Updates</h2></div>
    </body>
    </html>




    .featured {
    width: 306px;
    height:306px;
    display: inline-block;
    border: 6px solid black;
    text-align: center;
    font-family: "Arial bold";

    }
    .box {
    width: 346px;
    height: 406px;
    display: inline-block;
    border: 6px solid black;
    text-align: center;

    .info {
    width: 318px;
    text-size: 1000px;
    #head {
    text-align: center;
    font-size: 50px;
    color: #3B84A8;
    font-family:"Audiowide"
    }
    head {
    background: url("http://megahdwall.com/wp-content/uploads/2014/06/Degradado-Blanco-Minimal-Gray-To-White-Gradient-Pc-And-Mac-104735.jpg") no-repeat center center fixed;
    background-size: cover;
    }
    #left {
    background-image: url("http://demandware.edgesuite.net/aako_prd/on/demandware.static/Sites-saucony_us-Site/Sites-saucony_us-Library/default/v1407509547636/content/seasonal-content/homepage/2014/08/home-bottom-left-20140801.jpg");
    background-size: cover;
    }
    #center {
    background-image: url("http://kodjoworkout.com/wp-content/uploads/2012/11/running-shoes.jpg");
    background-size: cover;
    margin-left: 25px;
    clear: both;
    }
    #right {
    float: right;
    }

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,348
    Thanks
    11
    Thanked 289 Times in 288 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Runner's Racing</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="https://pbs.twimg.com/profile_images/1622233750/alton_favicon.png"/>
    <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet'>
    <link rel="stylesheet" href="CSS.css">
    </head>
    <body>
    <h1 id="head">Runner's Racing</h1>
    <div class="box"><div class="featured"; id="left"></div><h2>New Apparel</h2></div>
    <div class="box"><div class="featured"; id="center"></div><h2>Bestsellers</h2></div>
    <div class="box"><div class="featured"; id="right"></div><h2>News and Updates</h2></div>
    </body>
    </html>
    A few errors above, highlighted in red:
    - Stray slash - decide whether you're coding to xhtml style (with slash) or html (without), and stick with it
    - Stray semicolons, remove them
    - stylesheet links need to include: type="text/css", as
    Code:
    <link type="text/css" rel="stylesheet" href="CSS.css">
    See if fixing those helps...

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,220
    Thanks
    15
    Thanked 253 Times in 253 Posts
    There's no such thing as styling the head of the document. On the stylesheet change 'head' to 'body' and see what happens.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,348
    Thanks
    11
    Thanked 289 Times in 288 Posts
    I think he meant #head in the css, as he references id="head" in his html

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,220
    Thanks
    15
    Thanked 253 Times in 253 Posts
    Quote Originally Posted by tracknut View Post
    I think he meant #head in the css, as he references id="head" in his html
    Whatever he meant, his coding is incorrect, in his CSS he's trying to style the head of the document and not an element with the ID of head.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

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