I previously asked in StackOverflow for help putting this together, and was told that I could improve the HTML and CSS.Could you help me?Here is my code, and the pictures I am using:Code<!DOCTYPE html><html class=no-js lang=en-us><head><link rel=dns-prefetch href=//analytics.google.com/><meta charset=utf-8><title>Berlin Airlift Veterans Association: News</title><meta http-equiv=X-UA-Compatible content=IE=edge><meta name=Berlin Airlift Veterans Association content=><meta name=viewport content=width=device-width,initial-scale=1><style>    #yellow{        width:100%;         height: 7px;         background-color:rgb(253,248,12);        position:relative;         display:block    }    #slider{        position:relative;        left:50%;        margin-left:-440px;        width:857px;        height:350px;        bottom: 0;    }    body{        border-top:6px solid rgb(211,5,24);        box-shadow: 0 5px 0 green;        background-color:black;        margin:0;        padding:0;        font-size:15px;    }    header{        background-color:white;        width:55%;        height:900px;        margin:0 auto;        border-left: 6px solid rgb(8,44,180)            }    nav{        background:white;        position:relative;        left:50%;        margin-left:-440px;        top: 0;        margin-bottom:0;        margin-top:0;        width:61%;    }    nav ul{margin:0; padding:0; width:875px    }    nav li{        display:inline;        margin: 0.0px    }    article{    }    fieldset{        border:0;    }    footer{        border-left:6px solid rgb(8,44,180);        width:55%;        margin:0 auto;        text-align:center;        background-color:white;    }    .addr *{        display:inline-block;        float:left;    }    .logo{        z-index:1;        position:absolute;        top: 5%;        left:17.5%;    }    .subscribe{        position:absolute;        right:0;        bottom:0;        color:white;        text-align:center;    }    .subscribe legend{        margin-bottom:300px;    }    .subscribe label:before{        content:'';        background-image:url('emailBomb.png');        background-size:cover;        height:300px;        width:150px;        position:absolute;        top:0;    }    .vh {        border: 0;        clip: rect(0000);        height: 1px;        overflow: hidden;        position: absolute;        width: 1px;        margin: -1px;        padding: 0;    }    .cf:before, .cf:after {        content:' ';        display: table;    }    .cf:after {        clear: both    }    .cf {        zoom: 1    }    .currentButton {        -moz-box-shadow:inset 0px 0px 0px 0px #d3051a;        -webkit-box-shadow:inset 0px 0px 0px 0px #d3051a;        box-shadow:inset 0px 0px 0px 0px #d3051a;        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );        background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');        background-color:#000000;        -webkit-border-top-left-radius:0px;        -moz-border-radius-topleft:0px;        border-top-left-radius:0px;        -webkit-border-top-right-radius:0px;        -moz-border-radius-topright:0px;        border-top-right-radius:0px;        -webkit-border-bottom-right-radius:20px;        -moz-border-radius-bottomright:20px;        border-bottom-right-radius:20px;        -webkit-border-bottom-left-radius:20px;        -moz-border-radius-bottomleft:20px;        border-bottom-left-radius:20px;        text-indent:0;        display:inline-block;        color:rgb(211,5,24);        font-family:Arial;        font-size:14px;        font-weight:bold;        font-style:normal;        height:33pxpx;        line-height:33px;        width:105px;        text-decoration:none;        text-align:center;}    .currentButton:hover {        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );        background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');        background-color:#000000;color:rgb(211,5,24);}    .currentutton:active {        position:relative;        top:1px;}    .button {        -moz-box-shadow:inset 0px 0px 0px 0px #d3051a;        -webkit-box-shadow:inset 0px 0px 0px 0px #d3051a;        box-shadow:inset 0px 0px 0px 0px #d3051a;        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );        background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');        background-color:#000000;        -webkit-border-top-left-radius:0px;        -moz-border-radius-topleft:0px;        border-top-left-radius:0px;        -webkit-border-top-right-radius:0px;        -moz-border-radius-topright:0px;        border-top-right-radius:0px;        -webkit-border-bottom-right-radius:20px;        -moz-border-radius-bottomright:20px;        border-bottom-right-radius:20px;        -webkit-border-bottom-left-radius:20px;        -moz-border-radius-bottomleft:20px;        border-bottom-left-radius:20px;        text-indent:0;        display:inline-block;        color:#fdf902;        font-family:Arial;        font-size:14px;        font-weight:bold;        font-style:normal;        height:33pxpx;        line-height:33px;        width:105px;        text-decoration:none;        text-align:center;}    .button:hover {        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );        background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');        background-color:#000000;color:rgb(211,5,24);}    .button:active {        position:relative;        top:1px;}</style>    <script>            var i = 0; var path = new Array();                 path[0] = 1.jpg;                 path[1] = 2.jpg;                 path[2] = 3.jpg;                 path[3] = 4.jpg;                path[4] = 5.jpg;                path[5] = 6.jpg;            function swapImage()                 {                     document.slide.src = path[i];                     if(i < path.length - 1) i++;                     else i = 0;                     setTimeout(swapImage(),5500);                 }             function GetClock(){                tzOffset = +2;                d = new Date();                dx = d.toGMTString();                dx = dx.substr(0,dx.length -3);                d.setTime(Date.parse(dx))                d.setHours(d.getHours() + tzOffset);                nday   = d.getDay();                nmonth = d.getMonth();                ndate  = d.getDate();                nyear = d.getYear();                nhour  = d.getHours();                nmin   = d.getMinutes();                if(nyear<1000) nyear=nyear+1900;                if(nmin <= 9){nmin=0+nmin}                document.getElementById('berlinClock').innerHTML=+(nmonth+1)+/+ndate+/+nyear+ +nhour+:+nmin+;                setTimeout(GetClock(), 1000);                }            window.onload = function() { swapImage(); GetClock(); };    </script><body>        <div id=yellow></div>    <header role=banner>        <a href=/ accesskey=h tabindex=1 title=Return Home>            <img class=logo src=BAVA.png width=150 height=150 alt=Logo>            <h1 class=vh>First Level Heading</h1>        </a>        <div id=slider>            <img name=slide width=875 height=350><!-- I'm not sure this is the best approach, but I'll just use what you have -->        </div>        <nav role=navigation>                <ul>                    <li><a href=index.htm class=currentButton>NEWS</a></li>                    <li><a href=aboutbava.htm class=button>ABOUT BAVA</a></li>                    <li><a href=history.htm class=button>HISTORY</a></li>                    <li><a href=biographies.htm class=button>BIOGRAPHIES</a></li>                    <li><a href=calendar.htm class=button>CALENDAR</a></li>                    <li><a href=contact.htm class=button>CONTACT</a></li>                    <li><a href=links.htm class=button>LINKS</a></li>                    <li><a href=donate.htm class=button>DONATE</a></li>                </ul>        </nav>    </header>    <main role=main>        <article role=article>        </article>    </main>    <aside class=subscribe role=complimentary>        <form action=demo_form.asp method=GET novalidate>            <fieldset>                <legend>Sign Up for Email Updates</legend>                <div>                    <label for=email>Email</label>                    <input type=email tabindex=9 id=email name=email placeholder=kevin.d.rankin@gmail.com>                </div>                <div>                    <button type=submit tabindex=10>Submit</button>                </div>            </fieldset>        </form>        <div id=berlinClock></div>    </aside>    <footer role=contentinfo>        <div class=adr cf>             <span class=street-address>15 N. College Ave</span>,             <span class=locality>Newton</span>,             <span class=region>NC</span>             <span class=postal-code>28658</span> |              <span class=country-name vh>U.S.A.</span>             <a class=tel href=tel:+8284663410 tabindex=11 accesskey=p title=phone>(828) 466-3410</a>        </div>    </footer>PicturesHere are my pictures.Logo:emailBomb:slideshow pictures 1-6:
Getting topyellow, topred, slider, and navbar divs stacked
html;css
There are a few things here that definitely can be improved/optimized. I'm not sure what your levels of support are but...I'd do something along these lines, This doesn't take into account mobile devices, and it was just thrown together really quickly, but you can take from it what you need and run with it.Hopefully you can see how to simplify things from it, if not, just let me know and I'll update with more comments and explanation. EDIT: I've updated the code.removed the HTML5 elements so you don't have to include and HTML5Shiv (for browsers that lack HTML5 element support).I placed the nav/banner in the header and applied a few wrappers for more styling ability.I added some spacing for the header and applied a few commentsI put classes on the elements to make the styling more scalable. you can use them interchangeably where as only a single ID is allowed. This helps with Scalability on larger applications. I must get back to work, I'll update with more comments later today.I'll also put up a few links for you to read through so you can get a better understanding of some of these methods.<!DOCTYPE html><html class=no-js lang=en-us><head><link rel=dns-prefetch href=//analytics.google.com/><!-- if you're using google analytics, prefetch the url --><meta charset=utf-8><title>Title</title><meta http-equiv=X-UA-Compatible content=IE=edge><meta name=description content=><meta name=viewport content=width=device-width,initial-scale=1><style>    body{        border-top:5px solid red; /* red line on top */        background-color:black;        margin:0;        padding:0;        font-size:15px;    }    .masthead{        border-top:5px solid yellow; /* yellow line below top red line */    }    /** navigation        -----------------------        navigation container */    .navbar{        margin:10px auto 0; /* center navigation by giving left/right margin auto */    }    /* navigation individual button/link styles */    .navbar a{        background-color:black;        border-radius: 0 0 25px 25px; /* only round bottom edges - this is the shorthand code for broder-radius */         padding:10px 15px;        text-decoration:none; /* remove underline */        text-transform:uppercase; /* make all text uppercase */        font-weight:700; /* bold the font */    }    .banner{        background-color:white;        width:875px;        height:900px;        margin:0 auto;        padding: 5px 5px 0;        border-left:5px solid blue;    }    /* hide fieldset default values */    fieldset{        border:0;        padding:0;        margin:0;    }    /* use this to style fieldset */    div.fieldset{        padding:0 10px;    }    .colophon{        border-left:5px solid blue;        width:875px;        padding:0 5px; /* add padding to make border and left/right edges line up with main area */        margin:0 auto;        text-align:center;        background-color:white;    }    .logo{        position:absolute;        left:50%;        margin-left:-480px;    }    .subscribe{        position:absolute;        right:0;        bottom:0;        color:white;        text-align:center;    }    /* use this to style email heading, hide legend with hidden class*/    .subscribe h2{        font-size:18px;        margin-bottom:350px;/* give emailBomb image space under the legend */    }    /* placed emailBomb image in CSS as it's not really content it's more of a support image */    .subscribe label:before{        content:''; /* :before must have content in order to display */        background-image:url('emailBomb.png');        background-size:100% 100%; /* stretch the image to fit area */        background-position:center;        height:300px; /*actual image size*/        width:150px; /* actual image site*/        position:absolute;        top:50px; /*  give room for h2 heading */    }    /* visually hidden helper utility class */    .vh {        border: 0;        clip: rect(0000);        height: 1px;        overflow: hidden;        position: absolute;        width: 1px;        margin: -1px;        padding: 0;    }    /* clearfix helper utility class to clear floats */    .cf:before, .cf:after {        content:' ';        display: table;    }    .cf:after {        clear: both    }    .cf {        zoom: 1    }</style>    <script>            var i = 0; var path = new Array();                 path[0] = 1.jpg;                 path[1] = 2.jpg;                 path[2] = 3.jpg;                 path[3] = 4.jpg;                path[4] = 5.jpg;                path[5] = 6.jpg;            function swapImage()                 {                     document.slide.src = path[i];                     if(i < path.length - 1) i++;                     else i = 0;                     setTimeout(swapImage(),5500);                 }             function GetClock(){                tzOffset = +2;                d = new Date();                dx = d.toGMTString();                dx = dx.substr(0,dx.length -3);                d.setTime(Date.parse(dx))                d.setHours(d.getHours() + tzOffset);                nday   = d.getDay();                nmonth = d.getMonth();                ndate  = d.getDate();                nyear = d.getYear();                nhour  = d.getHours();                nmin   = d.getMinutes();                if(nyear<1000) nyear=nyear+1900;                if(nmin <= 9){nmin=0+nmin}                document.getElementById('berlinClock').innerHTML=+(nmonth+1)+/+ndate+/+nyear+ +nhour+:+nmin+;                setTimeout(GetClock(), 1000);                }            window.onload = function() { swapImage(); GetClock(); };    </script><body>    <div role=banner class=masthead>        <div class=inner-masthead>            <a href=/ accesskey=h tabindex=1 title=Return Home>                <img class=logo src=BAVA.png width=150 height=150 alt=Logo>                <h1 class=vh>First Level Heading</h1>            </a>            <div role=section class=banner>                <div class=slider>                    <img name=slide width=875 height=350><!-- I'm not sure this is the best approach, but I'll just use what you have -->                </div>                <div role=navigation class=navbar><!-- removed unordered list as accessibility for screen readers is difficult with ul > li -->                    <a href=# accesskey=n title=News tabindex=1 class=active>News</a>                    <a href=# accesskey=a title=About me tabindex=2>About BAVA</a>                    <a href=# accesskey=h title=History tabindex=3>History</a>                    <a href=# accesskey=b title=Biographies tabindex=4>Biographies</a>                    <a href=# accesskey=h title=Calendar tabindex=5>Calender</a>                    <a href=# accesskey=c title=Contact tabindex=6>Contact</a>                    <a href=# accesskey=l title=Links tabindex=7>Links</a>                    <a href=# accesskey=d title=Donate tabindex=8>Donate</a>                </div>            </div>        </div>    </div>    <div role=main class=main>        <div class=inner-main>        </div>    </div>    <div class=subscribe role=section>        <form action=demo_form.asp method=GET novalidate>            <div class=fieldset>                <fieldset>                    <legend class=vh>Sign Up for Email Updates</legend> <!-- visually hide as <legend> is difficult to style -->                    <h2>Sign Up for Email Updates</h2>                    <div>                        <label for=email>Email</label>                        <input type=email tabindex=9 id=email name=email placeholder=email@address.com>                    </div>                    <div>                        <button type=submit tabindex=10>Submit</button>                    </div>                </fieldset>            </div>        </form>        <div id=berlinClock></div>    </div>    <div role=contentinfo class=colophon>        <div class=inner-colophon>            <div class=adr cf><!-- use hcard format for better semantics, applied clearfix class to remove floats -->                 <span class=street-address>15 N. College Ave</span>,                 <!--div class=extended-address></div--> <!-- use this for apartment number if required -->                 <span class=locality>Newton</span>,                 <span class=region>NC</span>                 <span class=postal-code>28658</span> |                  <span class=country-name vh>U.S.A.</span>                 <a class=tel href=tel:+8284663410 tabindex=11 accesskey=p title=phone>(828) 466-3410</a>            </div>        </div>    </div>