9 Replies Latest reply on Dec 30, 2015 4:25 AM by scottishriver

    footer css not working

    scottishriver

      i am adding a footer to my page and i want to change the colour but its not working i created a footer class but the background wont change i no its something simple but i cant see it here is my code thanks.

       

      <!DOCTYPE html>

      <html lang="en">

       

       

      <head>

      <meta charset="utf-8">

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <meta name="description" content="">

      <meta name="author" content="">

      <!-- TemplateBeginEditable name="doctitle" -->

      <title>my events calendar</title>

      <!-- TemplateEndEditable -->

       

       

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

       

       

      <!-- Bootstrap Core CSS -->

      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

      <!-- Custom CSS -->

      <link href="../css/business-casual.css" rel="stylesheet">

      <!-- Fonts -->

      <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,8 00italic,400,300,600,700,800" rel="stylesheet" type="text/css">

      <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300itali c,400italic,600italic,700italic" rel="stylesheet" type="text/css">

       

       

      <div id="fb-root"></div>

      <script>(function(d, s, id) {

        var js, fjs = d.getElementsByTagName(s)[0];

        if (d.getElementById(id)) return;

        js = d.createElement(s); js.id = id;

        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=512896575525133";

        fjs.parentNode.insertBefore(js, fjs);

      }(document, 'script', 'facebook-jssdk'));</script>

       

       

       

       

       

       

       

       

       

       

       

       

      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

      <!--[if lt IE 9]>

              <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

              <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

          <![endif]-->

      <!-- TemplateParam name="class" type="text" value="" -->

      </head>

      <body class="@@(_document['class'])@@">

          <div class="brand">My Events Calendar</div>

          <div class="address-bar"><strong>where all your events are a click away</strong></div>

         

       

       

       

          <!-- Navigation -->

          <nav class="navbar navbar-default" role="navigation">

              <div class="container">

                  <!-- Brand and toggle get grouped for better mobile display -->

                  <div class="navbar-header">

                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                          <span class="sr-only">Toggle navigation</span>

                          <span class="icon-bar"></span>

                          <span class="icon-bar"></span>

                          <span class="icon-bar"></span>

                      </button>

                      <!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->

                      <a class="navbar-brand" href="../index.html">My events calendar</a>

                  </div>

                  <!-- Collect the nav links, forms, and other content for toggling -->

                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                      <ul class="nav navbar-nav">

                          <li>

                              <a href="../index.html">Home</a>

                          </li>

                          <li>

                              <a href="../calendar.html">Calendar</a>

                          </li>

                          <li>

                              <a href="../events.html">Events</a>

                          </li>

                         

                          <li>

                              <a href="../venues/venues.html">Venues</a>

                          </li>

                           <li>

                              <a href="../registration.php">Comments</a>

                          </li>

                            

                         

                      </ul>

                  </div>

                  <!-- /.navbar-collapse -->

              </div>

              <!-- /.container -->

          </nav>

          <!-- TemplateBeginEditable name="EditRegion2" -->

        

          <div class="container">

           

          

          </div><!-- TemplateEndEditable -->

      <!-- /.container -->

        <footer>

              <div class="footer">

                  <div class="row">

                      <div class="col-lg-12 text-center">

                          <p>Copyright &copy; Your Website 2014</p>

                      </div>

                  </div>

              </div>

          </footer>

        

       

       

          <!-- jQuery -->

         <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

          <!-- Bootstrap Core JavaScript -->

          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

       

       

          <!-- Script to Activate the Carousel -->

          <script>

          $('.carousel').carousel({

              interval: 5000 //changes the speed

          })

          </script>

       

       

      </body>

       

       

      </html>

        • 1. Re: footer css not working
          Ken Binney Adobe Community Professional & MVP

          Partial code is not helpful.

          Quick and reliable answers come when you upload your problem page and dependent files on your server and post a link.

          • 2. Re: footer css not working
            scottishriver Level 1

            sorry not sure what you mean thanks

            • 3. Re: footer css not working
              Ken Binney Adobe Community Professional & MVP

              Sorry I was not more clear..

              We use browser based web developer tools to spot what's really going on with your page

              Posting part of your code, and none of your CSS leaves us only guessing.

              We're all busy, and prefer not to have to rebuild your site on our machines to diagnose.

              If you put it all on your server with a link for us, it only takes a minute to analyze.

               

              You can use a temporary file name for the page, or put it all in a "test" folder.

              • 4. Re: footer css not working
                scottishriver Level 1

                i am using WAMP as a testing server dont know if i can do that thanks

                • 5. Re: footer css not working
                  Ken Binney Adobe Community Professional & MVP

                  Sorry Scott, we can't access your local machine.

                  Don't you have a web server yet?

                   

                  May we at least see the failing footer CSS?

                  • 6. Re: footer css not working
                    scottishriver Level 1

                    this is my css thanks

                    /*!

                    * Start Bootstrap - Business Casual Bootstrap Theme (http://startbootstrap.com)

                    * Code licensed under the Apache License v2.0.

                    * For details, see http://www.apache.org/licenses/LICENSE-2.0.

                    */

                     

                     

                    body {

                      font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

                      -webkit-background-size: cover;

                      -moz-background-size: cover;

                      background-size: cover;

                      -o-background-size: cover;

                      background-attachment: fixed;

                      background-repeat: no-repeat;

                      background-position: center center;

                      background-image: url(../img/event%20places%20pictures/3arena.jpg);

                      -webkit-background-size: cover;

                      color: #000;

                       

                       

                       

                    }

                     

                     

                     

                     

                     

                     

                    h1,

                    h2,

                    h3,

                    h4,

                    h5,

                    h6 {

                      text-transform: uppercase;

                      font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;

                      font-weight: 700;

                      letter-spacing: 1px;

                      text-align: left;

                    }

                     

                     

                    p {

                      line-height: 1.6;

                      color: #000;

                    }

                     

                     

                    hr {

                        max-width: 400px;

                        border-color: #999999;

                    }

                     

                     

                    .brand,

                    .address-bar {

                        display: none;

                    }

                     

                     

                    .navbar-brand {

                        text-transform: uppercase;

                        font-weight: 900;

                        letter-spacing: 2px;

                    }

                     

                     

                    .navbar-nav {

                        text-transform: uppercase;

                        font-weight: 400;

                        letter-spacing: 3px;

                    }

                     

                     

                    .img-full {

                        min-width: 100%;

                    }

                     

                     

                    .brand-before,

                    .brand-name {

                        text-transform: capitalize;

                    }

                     

                     

                    .brand-before {

                        margin: 15px 0;

                    }

                     

                     

                    .brand-name {

                        margin: 0;

                        font-size: 4em;

                    }

                     

                     

                    .tagline-divider {

                        margin: 15px auto 3px;

                        max-width: 250px;

                        border-color: #999999;

                    }

                     

                     

                    .box {

                      margin-bottom: 20px;

                      padding: 30px 15px;

                      background-color: rgba(255,255,255,0.7);

                    }

                     

                     

                    .intro-text {

                        text-transform: uppercase;

                        font-size: 1.25em;

                        font-weight: 400;

                        letter-spacing: 1px;

                    }

                     

                     

                    .img-border {

                        float: none;

                        margin: 0 auto 0;

                        border: #999999 solid 1px;

                    }

                     

                     

                    .img-left {

                        float: none;

                        margin: 0 auto 0;

                    }

                     

                     

                    .footer {

                      background-color: #3F3

                    }

                     

                     

                    footer p {

                        margin: 0;

                        padding: 50px 0;

                     

                    }

                     

                     

                    @media screen and (min-width:768px) {

                        .brand {

                      display: inherit;

                      margin: 0;

                      padding: 30px 0 10px;

                      text-align: center;

                      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

                      font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;

                      font-size: 5em;

                      font-weight: 700;

                      line-height: normal;

                      color: #fff;

                      background-color: rgba(51,51,51,0.7);

                      text-shadow: 2px 2px #000;

                        }

                     

                     

                        .top-divider {

                            margin-top: 0;

                        }

                     

                     

                        .img-left {

                            float: left;

                            margin-right: 25px;

                        }

                     

                     

                        .address-bar {

                      display: inherit;

                      margin: 0;

                      padding: 0 0 40px;

                      text-align: center;

                      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

                      text-transform: uppercase;

                      font-size: 1.25em;

                      font-weight: 400;

                      letter-spacing: 3px;

                      color: #fff;

                      background-color: rgba(51,51,51,0.7);

                      text-shadow: 2px 2px #000;

                        }

                        

                      

                      

                        .navbar {

                            border-radius: 0;

                        }

                     

                     

                        .navbar-header {

                            display: none;

                        }

                     

                     

                        .navbar {

                            min-height: 0;

                        }

                     

                     

                        .navbar-default {

                            border: none;

                            background: rgba(255,255,255,0.8);

                        }

                     

                     

                        .nav>li>a {

                      padding: 25px;

                        }

                     

                     

                        .navbar-nav>li>a {

                            line-height: normal;

                        }

                     

                     

                        .navbar-nav {

                            display: table;

                            float: none;

                            margin: 0 auto;

                            table-layout: fixed;

                            font-size: 1.15em;

                        }

                     

                     

                    }

                     

                     

                    @media screen and (min-width:1200px) {

                        .box:after {

                            content: '';

                            display: table;

                            clear: both;

                        }

                     

                     

                    /* start of css for each of the venue pages*/

                     

                     

                    body.gallery{

                      background-image:url(../img/event%20places%20pictures/3arena.jpg)

                      }

                     

                     

                     

                    body.academy{

                      background-image:url(../img/event%20places%20pictures/the%20academy.jpg)

                     

                      }

                     

                     

                     

                    body.vicar{

                      background-image:url(../img/event%20places%20pictures/vicar%20st.jpg)

                    }

                     

                     

                     

                     

                     

                     

                    body.Ambassador{

                      background-image:url(../img/event%20places%20pictures/Ambassador.jpg)

                     

                    }

                     

                     

                     

                     

                    body.aviva{

                      background-image:url(../img/event%20places%20pictures/aviva.jpg)

                    }

                     

                     

                    body.arena{

                      background-image:url(../img/event%20places%20pictures/02-Arena.jpg)

                    }

                    body.croke{

                      background-image:url(../img/event%20places%20pictures/croke%20park.jpg)

                    }

                    body.gaiety{

                      background-image:url(../img/event%20places%20pictures/gaiety-theater.jpg)

                    }

                    body.gate{

                      background-image:url(../img/event%20places%20pictures/gate%20theatre.jpg)

                    }

                    body.grand{

                      background-image:url(../img/event%20places%20pictures/grand%20social.jpg)

                    }

                    body.laughter{

                      background-image:url(../img/event%20places%20pictures/laughter%20lounge.jpg)

                    }

                    body.marlay{

                      background-image:url(../img/event%20places%20pictures/marlay%20park.jpg)

                    }

                    body.olympia{

                      background-image:url(../img/event%20places%20pictures/the-olympia-photo.jpg)

                    }

                    body.rds{

                      background-image:url(../img/event%20places%20pictures/rds.jpg)

                    }

                    body.button{

                      background-image:url(../img/event%20places%20pictures/The_Button_Factory.jpg)

                    }

                    body.whelans{background-image:url(../img/event%20places%20pictures/whelans.jpg)

                    }

                    body.signup{background-image:url(../img/bianca%20photos/IMG-20150717-WA0024.jpg)

                    }

                    • 7. Re: footer css not working
                      Nancy OShea Adobe Community Professional & MVP

                      Relevant code:

                       

                      <footer>

                              <div class="footer">

                                  <div class="row">

                                      <div class="col-lg-12 text-center">

                                          <p>Copyright &copy; Your Website 2014</p>

                                      </div>

                                  </div>

                              </div>

                          </footer>

                       

                      CSS:

                       

                      footer {background: red}  /**adjust as required**/


                      Nancy O.

                      • 8. Re: footer css not working
                        Ken Binney Adobe Community Professional & MVP

                        Your footer background-color calls for this green, and that's what I see.

                         

                        .footer{
                            background-color: #3f3;

                        }

                        snap.jpg

                        1 person found this helpful
                        • 9. Re: footer css not working
                          scottishriver Level 1

                          thanks for help i got it sorted i removed my site from the wamp server and installed it again everything fine now thanks again HAPPY NEW YEAR.

                          my new years resulotion  is to get this bloody site finished lol