#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0

    CSS not working...


    Hi,

    I am new to this form and new to web development. I have written the following code for including social buttons in footer in my web page:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Footer</title>
    <link rel="stylesheet" type="text/css" media="all" href="css/socialfooter.css" />
    </head>
    <body>
    <div id="divblock_2" style="float: right;">
    <h3>Connect and Share</h3>
    <div id="divsocial_box">
    <div id="divfacebook"><a href="#"title="Facebook"></a></div>
    <div id="divtwitter"><a href="#" title="Twitter"></a></div>
    <div id="divlinkedin"><a href="#" title="Linkedin"></a></div>
    <div id="divyoutube"><a href="#" title="Youtube"></a></div>
    </div>
    </body>

    </html>

    Following is the CSS for the above:
    @charset "utf-8";

    body, h1, h2, h3, h4, h5, h6, p, div, ul, li {

    margin:0;
    padding:0;
    }

    body {
    font-family: Verdana, Geneva, sans-serif;
    background-color: white;
    height: 600px;

    }


    #divblock_2 {
    float: left;
    padding: 0 0 0 0px;
    width: 227px;
    }

    #divsocial_box {
    float:left;
    width:100%;
    padding-bottom:20px;
    background:blue;
    }

    #divfacebook, #divtwitter, #divlinkedin, #divyoutube {
    float:left;
    margin-right:7px;
    }

    #divfacebook a {
    background:url("images/facebook.png") no-repeat 0 0px;
    width:43px;
    height:44px;
    display:block;
    -moz-transition:all 0s ease 0s;
    -webkit-transition:all 0s ease 0s;
    transition: all 0s ease 0s;
    -ms-transition:all 0s ease 0s;
    }

    #divfacebook a:hover {
    -moz-transform: rotate(-360deg);
    -moz-transition: all 0.8s ease-in-out 0s;
    -webkit-transform: rotate(-360deg); -webkit-transition: all 0.8s ease-in-out 0s;
    -ms-transform: rotate(-360deg); -ms-transition:all 0.8s ease-in-out 0s;
    transform: rotate(-360deg); transition: all 0.8s ease-in-out 0s;
    }


    #divyoutube a {
    background:url("images/youtube.png") no-repeat 0 0px;
    width:43px;
    height:44px;
    display:block;
    -moz-transition:all 0s ease 0s;
    -webkit-transition:all 0s ease 0s;
    }

    #divyoutube a:hover {
    -moz-transform: rotate(-360deg);
    -moz-transition: all 0.8s ease-in-out 0s;
    -webkit-transform: rotate(-360deg);
    -webkit-transition: all 0.8s ease-in-out 0s;
    }

    #divtwitter a {
    background:url("images/twitter.png") no-repeat 0 0px;
    width:43px;
    height:44px;
    display:block;
    -moz-transition:all 0s ease 0s;
    -webkit-transition:all 0s ease 0s;
    }

    #divtwitter a:hover {
    -moz-transform: rotate(-360deg);
    -moz-transition: all 0.8s ease-in-out 0s;
    -webkit-transform: rotate(-360deg);
    -webkit-transition: all 0.8s ease-in-out 0s;
    }

    #divlinkedin a {
    background:url(images/linkedin.png) no-repeat 0 0px;
    width:43px;
    height:44px;
    display:block;
    -moz-transition:all 0s ease 0s;
    -webkit-transition:all 0s ease 0s;
    }

    #divlinkedin a:hover {
    -moz-transform: rotate(-360deg);
    -moz-transition: all 0.8s ease-in-out 0s;
    -webkit-transform: rotate(-360deg);
    -webkit-transition: all 0.8s ease-in-out 0s;
    }


    -------------------------------------------------
    I have placed the images in images folder, but still can't get it work. I can see the "Connect and Share" line.
    Please help me improve this code.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    #1) you are missing a closing div
    #2) your images need to be referenced [in the css file] from wherever your CSS file is located.
    if you have something like:

    ./index.html
    ./css/socialfooter.css
    ./images/<yourimages>.jpg

    then, your reference will be url("../images/<your image>.jpg") ... because you must first ascend up and out of the css folder to get into the images folder.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    3
    Rep Power
    0
    Originally Posted by DonR
    #1) you are missing a closing div
    #2) your images need to be referenced [in the css file] from wherever your CSS file is located.
    if you have something like:

    ./index.html
    ./css/socialfooter.css
    ./images/<yourimages>.jpg

    then, your reference will be url("../images/<your image>.jpg") ... because you must first ascend up and out of the css folder to get into the images folder.
    I agree with DonR to found out your mistake. firstly close div tag. update you file again then try.

IMN logo majestic logo threadwatch logo seochat tools logo