1
\$\begingroup\$

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="[email protected]">
                </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>

Pictures

Here are my pictures.

Logo: enter image description here

emailBomb: enter image description here

slideshow pictures 1-6:

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

\$\endgroup\$
4
  • \$\begingroup\$ Welcome to Code Review! Unfortunately, this doesn't appear to be the right place to ask your question, if the layout is not behaving the way you expect it to. (Here, we help improve code that already works correctly.) You may wish to try asking on Stack Overflow instead. \$\endgroup\$
    – 200_success
    Commented Jun 22, 2014 at 10:41
  • \$\begingroup\$ Go ahead and change your title. The point was to get feedback on how to improve your HTML/CSS. @200_success doesn't know that you already asked the question on SO regarding the issue with the layout, or that your HTML/CSS works, but several people suggested that it needs some cleaning up which would not be appropriate in the answer to your SO question. \$\endgroup\$
    – jme11
    Commented Jun 22, 2014 at 12:54
  • \$\begingroup\$ What are the levels of support here? Do you require IE6-8 support? Do you want to target mobile devices? \$\endgroup\$
    – darcher
    Commented Jun 22, 2014 at 17:00
  • 2
    \$\begingroup\$ A demo (see: jsfiddle.net or codepen.io) is worth 1000 words. \$\endgroup\$
    – cimmanon
    Commented Jun 22, 2014 at 23:03

1 Answer 1

Reset to default
3
\$\begingroup\$

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 comments

    • I 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 protected]">
                    </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>
\$\endgroup\$
8
  • \$\begingroup\$ You know when you look at what I had I was troubleshooting to the best of my abilities. I was adding things and removing things. I remember adding "float:center"... This is the first page I have really made and I am learning a lot. A quick glance at your code and I can tell its superior to mine. I will take some time to figure out what all of your code means and figure out why you placed what wherever you placed it. Seriously though, thank you! You look like you took some time and effort into my project. I really appreciate your support man. \$\endgroup\$
    – user3756283
    Commented Jun 23, 2014 at 2:19
  • 1
    \$\begingroup\$ I'll add more comments after work today, I'll explain everything as best I can. this way you know exactly what all is going on and have a place to reference it. \$\endgroup\$
    – darcher
    Commented Jun 23, 2014 at 10:36
  • \$\begingroup\$ When I got your code it was a lot better but there were some design discrepancies with what I had. The whitespace on the one your code hugged the left and right borders of the slider. I wanted to have a little bit of space on the left and right of the slider. Those buttons that you used, I didn't know how to style them so I reverted back to the old buttons. I really like how you use the meta tags. Also your level of writing code is more advanced than what I am used to. I plan on uploading this to wix and then using wordpress so the organization can add content. I'm going to make sure \$\endgroup\$
    – user3756283
    Commented Jun 23, 2014 at 13:04
  • \$\begingroup\$ you get credit for all of your contribution. It will be on the first news feed update! I seriously couldnt have done this without you and its obvious you put a lot of effort into helping. The website when completed will be berlinairliftveterans.org \$\endgroup\$
    – user3756283
    Commented Jun 23, 2014 at 13:05
  • 1
    \$\begingroup\$ I updated the code slightly. Added a few comments, will update further later today. \$\endgroup\$
    – darcher
    Commented Jun 23, 2014 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.