Skip to main content
S
seq3420
Participant
December 12, 2018
Question

college work need help !

  • December 12, 2018
  • 1 reply
  • 352 views

hello im very new to html so i need bit of help to understand it so could you help me out here and solve and show me how you do that kinda stuff here my website so im wondering how to change the color to make it look them same as i have on my navigation bar i mean the drop down menu is broken and im not sure how to change it so it will like my navigation bar.

    This topic has been closed for replies.

    1 reply

    S
    seq3420Author
    Participant
    December 12, 2018

    here is my code

    <!doctype html>

    <html>

    <meta charset="utf-8">

    <title>Untitled cument</title>

    <head>

    <link rel="stylesheet" href="website.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script>

    $(function () {

    $('nav li ul').hide().removeClass('fallback');

    $('nav li').hover(function () {

    $('ul', this).stop().slideToggle(200);

    });

    });

    </script>

    </head>

    <body>

    <div class="wrapper">

    <header><!--header title !-->

    <h2>British Values</h2>

    </header>

    <nav> <!--Navigation bar !-->

    <ul>

    <!doctype html>

    <html lang =''>

       <meta charset ='utf-8'>

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

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

       <link rel="stylesheet" href="styles.css">

       <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

       <script src="script.js"></script>

       <title>CSS MenuMaker</title>

    <body>

    <div id='cssmenu'>

    <ul>

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

    <li><a href="about.html">About</a></li>

    <li><a href="govinfo.html">Goverment info</a></li>

    <li><a href="Contact.html">Contact</a></li>

    <li><a href="resources.html">Resources</a>

    <ul class="fallback">

    <li><a href="video.html">Video</a></li>

    <li><a href="images.html">Image Gallery</a></li>

    <li><a href="sitemap.html">sitemap</a></li>

    </ul>

    </li>

    </nav>

    <section> <!--Slideshow section !-->

    <div class="bss-slides">

    <figure><img src="img/2F2B54699FFD786DF3CFC7798AB0E5B8.png" width="80%"

    /><figcaption> British value</figcaption></figure>

    <figure><img src="img/pexels-photo-1128558.jpeg" width="80%"

    /><figcaption> British value</figcaption></figure>

    <figure><img src="img/AE1E8500CBF5727B6E08E7D1C8462EA4.jpg" width="80%"

    /><figcaption> British value</figcaption></figure>

    </div>   

    </section>

    <section> <!--content 1 box 1 !-->

    <p>In a school, teaching British values means providing a curriculum which 'actively promote(s) the fundamental British values of democracy, the rule of law, individual liberty, and mutual respect and tolerance of those with different faiths and beliefs'.

    According to Ofsted, 'fundamental British values'are:</p>

    <ul>

    <li>democracy</li>

    <li>the rule of law</li>

    <li>individual liberty</li>

    <li>mutual respect for and tolerance of those with different faiths and beliefs and for those without faith.</li>

    </ul>

    </section>

    <section> <!--content 2 box2 !-->

    <p></p>

    </section>

    <footer>

    <script src="better-simple-slideshow.min.js"></script>

    <script>makeBSS('.bss-slides'); </script>

    </footer>

    </div>

    </body>

    </html>

    S
    seq3420Author
    Participant
    December 12, 2018

    my css

    @charset "utf-8";

    /* CSS Document */

    * { margin:0;

    padding:0;

    vertical-align:text-top;

    }

    *,

    *:before,

    *:after

    {

    box-sizing:border-box;}

    html

    {

    color: #000;

    font-size: 1em ;  

    line-height:1.4;

    }

    header, section, nav, footer{

    width:70%;

    display:inline-block;

    }

    /*********************Dropdown Nav Classes*****************************/

    /* HTML5 and jQuery Super Simple Nav by Todd Motto @toddmotto - toddmotto.com */

    /* =============================================================================

       Navigation Core Styles

       ========================================================================== */

      

    nav {background:#fff;}

    nav ul {text-align:center;}

    nav ul li {float:left;display:inline;position:relative;}

    nav ul li:hover {background:#fff;}

    nav ul li a {display:block;padding:5px 15px;color:#333;}

    nav ul li ul {position:absolute;top: 30px; width:110px;background:#fff;z-index:100;}

    nav ul li ul li {margin:0;padding:0;width:110px;}

    nav ul li ul li a {display:block;padding:5px 10px;color:#333;}

    nav ul li ul li:hover a {background:#F7F7F7;}

    nav ul li ul.fallback {display:none;}

    nav ul li:hover ul.fallback {display:block;}

    nav ul li {

    width:auto;

    display: inline-block;

    margin: 15px;

    padding: 0;

    text-decoration: none;

    border:1px solid #565656;

    text-align: center;

    }

    /* gallery and video tables code */

    .Table

        {

            display: table;

    width:100%;

        }

        .Row

        {

            display: table-row;

        }

        .Cell

        {

            display: table-cell;

            border: solid;

            border-width: thin;

    width:33%;

        }

    .googlemaps{

    width: 80%;

    }

    .image {

    width: 100%;

    }

    .wrapper

    {

    width: 70%;

    margin:0 auto;

    }

    .bss-slides{   position: relative;   display: block;     } .bss-slides:focus{  outline: 0; } .bss-slides figure{   position: absolute;   top: 0;   width: 100%; } .bss-slides figure:first-child{   position: relative; } .bss-slides figure img{   opacity: 0;   -webkit-transition: opacity 1.2s;   transition: opacity 1.2s;   -webkit-backface-visibility: hidden;   backface-visibility: hidden; } .bss-slides .bss-show{   z-index: 2; } .bss-slides .bss-show img{   opacity: 1;   -webkit-backface-visibility: hidden;   backface-visibility: hidden;   position: relative;  }  .bss-slides figcaption{   position: absolute;   font-family: sans-serif;   font-size: .8em;   bottom: .75em;   right: .35em;   padding: .25em;   color: #fff;   background: #000;   background: rgba(0,0,0, .25);   border-radius: 2px;   opacity: 0;   -webkit-transition: opacity 1.2s;   transition: opacity 1.2s; } .bss-slides .bss-show figcaption{   z-index: 3;   opacity: 1; } .bss-slides figcaption a{   color: #fff;     } .bss-next, .bss-prev{   color: #fff;   position: absolute;   background: #000;   background: rgba(0,0,0, .6);   top: 50%;   z-index: 4;   font-size: 2em;   margin-top: -1.2em;   opacity: .3;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none; } .bss-next:hover, .bss-prev:hover{   cursor: pointer;   opacity: 1; } .bss-next{   right: -1px;   padding: 10px 5px 15px 10px;   border-top-left-radius: 3px;   border-bottom-left-radius: 3px; } .bss-prev{   left: 0;   padding: 10px 10px 15px 5px;   border-top-right-radius: 3px;   border-bottom-right-radius: 3px; } .bss-fullscreen{   display: block;   width: 32px;   height: 32px;       background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png);    -webkit-background-size: contain;    background-size: contain;   position: absolute;   top: 5px;   left: 5px;      cursor: pointer;       opacity: .3; }  .bss-fullscreen:hover{   opacity: .8;    } :-webkit-full-screen .bss-fullscreen{     background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);     -webkit-background-size: contain;     background-size: contain; } :-moz-full-screen .bss-fullscreen{     background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);     background-size: contain; } :-ms-fullscreen .bss-fullscreen{     background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);     background-size: contain; } :full-screen .bss-fullscreen{     background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);     -webkit-background-size: contain;     background-size: contain; } :-webkit-full-screen .bss-fullscreen{     background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);     -webkit-background-size: contain;     background-size: contain; } :-moz-full-screen .bss-fullscreen{     background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);     background-size: contain; } :-ms-fullscreen .bss-fullscreen{     background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);     background-size: contain; } :fullscreen .bss-fullscreen{     background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);     -webkit-background-size: contain;     background-size: contain; }

    h1

    {

    font-family: 'Oswald', sans-serif;

    font-size: 30px;

    text-transform: uppercase;

    color: #216182;

    }

    /* Centres the page (this could be container)*/

    .body {

        display:block;

        margin:0 auto;

        width:576px;

        font-family: 'Muli', sans-serif;

        font-size: 16px;

        color: #999;

    }

    /* Labels are titles for the text fields. You can use a placeholder instead if you like*/

    label

    {

        display:block;

        margin-top:20px;

        letter-spacing:2px;

    }

    /* Centres the form within the page */

    form

    {

        margin:0 auto;

        width:459px;

    }

    /* Styles the text boxes */

    input, textarea, file {

    width:439px;

    height:27px;

    background-color:#efefef;

    border-radius:5px;

    -moz-border-radius:5px;

    -webkit-border-radius:5px;

    border:1px solid #dedede;

    padding:10px;

    margin-top:3px;

    font-size:0.9em;

    color:#3a3a3a;

    }

    input:focus, textarea:focus {

    border:1px solid #97d6eb;

    }

    /* Styles the text area boxes (message field) */

    textarea

    {

    height:213px;

    background-color: #efefef;

    }

    /* Styles the submit button */

    #submit {

    /* background:url(images/submit.png); */

    width:127px;

    height:48px;

    text-align: center;

    /* text-indent:-9999px; */

    border:none;

    margin-top:20px;

    cursor:pointer;

    }

    /* Styles the submit hover */

    #submit:hover {

    color:#fff;

    background-color: #216182;

    opacity:0.9;

    }

    /* Styles the cancel button*/

    #cancel {

    /* background:url(images/cancel.png); */

    width:127px;

    height:28px;

    text-align: center;

    /* text-indent:-9999px; */

    border:none;

    margin-top:20px;

    cursor:pointer;

    }

    /* Styles the cancel hover */

    #cancel:hover {

    color:#fff;

    background-color: #000;

    opacity:0.9;

    }

    #cssmenu,

    #cssmenu ul,

    #cssmenu ul li,

    #cssmenu ul li a {

      margin: 0;

      padding: 0;

      border: 0;

      list-style: none;

      line-height: 1;

      display: block;

      position: relative;

      -webkit-box-sizing: border-box;

      -moz-box-sizing: border-box;

      box-sizing: border-box;

    }

    #cssmenu:after,

    #cssmenu > ul:after {

      content: ".";

      display: block;

      clear: both;

      visibility: hidden;

      line-height: 0;

      height: 0;

    }

    #cssmenu {

      width: auto;

      border-bottom: 3px solid #47c9af;

      font-family: Raleway, sans-serif;

      line-height: 1;

    }

    #cssmenu ul {

      background: #ffffff;

    }

    #cssmenu > ul > li {

      float: left;

    }

    #cssmenu.align-center > ul {

      font-size: 0;

      text-align: center;

    }

    #cssmenu.align-center > ul > li {

      display: inline-block;

      float: none;

    }

    #cssmenu.align-right > ul > li {

      float: right;

    }

    #cssmenu.align-right > ul > li > a {

      margin-right: 0;

      margin-left: -4px;

    }

    #cssmenu > ul > li > a {

      z-index: 2;

      padding: 18px 25px 12px 25px;

      font-size: 15px;

      font-weight: 400;

      text-decoration: none;

      color: #444444;

      -webkit-transition: all .2s ease;

      -moz-transition: all .2s ease;

      -ms-transition: all .2s ease;

      -o-transition: all .2s ease;

      transition: all .2s ease;

      margin-right: -4px;

    }

    #cssmenu > ul > li.active > a,

    #cssmenu > ul > li:hover > a,

    #cssmenu > ul > li > a:hover {

      color: #ffffff;

    }

    #cssmenu > ul > li > a:after {

      position: absolute;

      left: 0;

      bottom: 0;

      right: 0;

      z-index: -1;

      width: 100%;

      height: 120%;

      border-top-left-radius: 8px;

      border-top-right-radius: 8px;

      content: "";

      -webkit-transition: all .2s ease;

      -o-transition: all .2s ease;

      transition: all .2s ease;

      -webkit-transform: perspective(5px) rotateX(2deg);

      -webkit-transform-origin: bottom;

      -moz-transform: perspective(5px) rotateX(2deg);

      -moz-transform-origin: bottom;

      transform: perspective(5px) rotateX(2deg);

      transform-origin: bottom;

    }

    #cssmenu > ul > li.active > a:after,

    #cssmenu > ul > li:hover > a:after,

    #cssmenu > ul > li > a:hover:after {

      background: #47c9af;

    }

    WolfShade
    WolfShade
    Legend
    December 12, 2018

    Well, for one thing you are declaring doctype and opening your HTML twice.  Remove the second instances.

    Also, you are running jQuery code on elements that haven't been loaded, yet.  You should put your jQuery code just before your closing </html> tag.

    Make these corrections, then put your code into an HTML validator, and see what it reports.

    HTH,

    ^ _ ^

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices