2

I am trying to assigned the main-content section in my base.html file so that the skip-to-main-content global link works on every page.

<section class="main" aria-label="main-content">

This is the opening tag placed as the start of the main content region and it works as it is correctly placed, but I am having trouble placing the </section> end tag in the correct place in the template where it will correctly close off the main content area. Right now, when I put the </section> in the place I believe appropriate, my pages render as if the main content area ends at the bottom of the page, and this destroys formatting of my 2-column page with all includes and asides falsely being inside of this long content area.

Please note that I am visually impaired using a screen reader. Could someone take the full code of my base.html file below and help me close the main content area so that content of actual pages in Craft are restricted to the correct area in the base.html template and thus, do not affect the other content. Scroll down to the following opening wsection tag:

<section class="main" aria-label="main-content">

{% if activeNav is not defined %}
{% set activeNav = "home" %}
<!DOCTYPE html>
{% endif %}
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xmlns:fb="http://ogp.me/ns/fb#">
<html lang="en">
<head>
  <meta charset="utf-8">

  {{ craft.sproutSeo.optimize() }}

  <link rel="stylesheet" href="/assets/css/00-reset.css?v=1">
  <link rel="stylesheet" href="/assets/css/01-layout.css">
  <link rel="stylesheet" href="/assets/css/02-general.css">
  <link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>

  <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

    <div id="skip-link">
      <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>
    </div>

   {% set bannerImage = homePage.showcaseImage.first() %}


  <style type="text/css">
    nav.footer {
      font-size: 12px;
      text-transform: uppercase;
    }
    nav.footer a {
      color: #ccc;
      display: inline-block;
      padding: 0 3px;
      text-decoration: none;
    }
    nav.footer a:hover {
      text-decoration: underline;
    }
  </style>

  <style>
    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, nav a {
      font-family: 'Lato', sans-serif;
      font-weight: 900;
    }

    h1, .h1,
    h2, .h2 {
      color: #444;
    }

    .brand h1 {
      color: #fafafa;
      font-size: 3em;
      text-transform: uppercase;
      line-height: 1;
    }

    .brand h1 span {
      display: block;
      font-weight: 300;
      font-size: 80%;
      text-transform: none;
    }

    header.primary 
    header.primary:before {
      background: rgba(70,70,70,0.7);
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      content: " ";
      left: 0;
      top: 0;
    }

    .banner {
      background-color #36454f;

    }

    header {
      margin-bottom: 0;
    }

    header.primary .brand {

      {% if craft.request.getSegment(1) == "" %}
      padding-top: 150px;
      padding-bottom: 100px;
      {% else %}
      padding-top: 60px;
      padding-bottom: 20px;
      {% endif %}
    }

    header.primary nav {
      background: transparent;
    }

    header.primary nav.main {
      padding: 0;
      margin: 0 0 20px 0;
    }

    header.primary nav.top {
      height: inherit;
      overflow: hidden;
      padding: 0;
    }

    header.primary nav ul {
      overflow: hidden;
    }

    header.primary nav.top li {
      float: left;
    }

    header.primary nav li a {
      border-bottom: none;
      display: block;
    }

    header.primary nav li.active a,
    header.primary nav li a:hover {
      background: rgba(255, 255, 255, 0.1);
      border: none;
    }

    header.primary nav.main li.active a {
      background: rgba(10, 10, 10, 0.7);
    }

    header.primary nav.main li a:hover {
      background: rgba(10, 10, 10, 0.5);
    }

    header.primary nav.main ul {
      display: table;
      width: 100%;
    }

    header.primary nav.main li {
      display: table-cell;
      line-height: 1;
    }

    header.primary nav.main li a {
      vertical-align: top;
      text-align: center;
      border-bottom: 0 solid transparent;
      color: #bfbfbf;
      font-weight: bold;  
      text-decoration: none;
      padding: 5px 7px;
      line-height: 1;
      display: block;
      margin: 0 10px;
      -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
              border-radius: 3px;

      -webkit-transition: background ease 0.2s;
         -moz-transition: background ease 0.2s;
           -o-transition: background ease 0.2s;
              transition: background ease 0.2s;
    }

    header.primary nav.main li.first a {
      margin-left: 0; 
    }

    header.primary nav.main li.last a {
      margin-right: 0;  
    }

    header.primary nav.main li.active a,
    header.primary nav.main li a:hover {
      border: 0px solid transparent;
    }

    .wrapper-top {
      background: rgba(10, 10, 10, 0.5);
      z-index: 10;
      position: relative;
    }

    body {
      background: #f5f5f5;
      color: #666;
      font-family: Lora, Georgia, "Times New Roman", Times, serif;
    }
    .divider {
      display: none;
    }

    footer.container {
      padding: 70px 0 40px;
    }

    nav.footer a {
      color: #777;
    }

    select {
      max-width: 310px;
    }

    div.col.sixteen {
      padding-top: 30px;
    }

    .col.two-thirds {
      padding-top: 30px;
      padding-right: 15px;
      margin-right: -1px;
      border-right: 1px solid #ddd;
    }

    .col.one-third {
      padding: 30px 0 20px 25px;
      margin-left: 0;
      border-left: 1px solid #ddd;
      width: 279px;     
    }

    form {
      border: 1px solid #ddd;

      -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
              border-radius: 3px;


      background: #eee;

      margin: 0 -10px 20px;
      padding:14px 9px;
    }

    .newsletter input[type="text"] {
      width: 160px;
    }


    .divider620 {
      background: #ddd;
      height: 1px;
    }

    .gallery figure {
      background: transparent;
      overflow: hidden;
    }

    .gallery figure img {
      margin: 0;
    }

    a:focus, a:hover {
      color: #4c777a;
    }

  /*  Accent Color   */

    h3, .h3,
    a, a:visited {
      color: #345254;
    }

    .btn {
      background-color: #345254;
    }
  </style>

  <!--[if lt IE 9]>
    <script src="/assets/js/libraries/modernizr-html5.js?v={{ craft.config.cacheBustValue }}"></script>
  <![endif]-->
</head>
<body>
  <header class="primary">
    <div class="wrapper-top">
      <div class="container">
        <nav class="top" aria-label="Utility Links"> <ul>
            {% for item in navigation.secondaryNavigation %}
              <li {% if craft.request.getSegment(1) == item.url|replace({'/':''}) %} class="active"{% endif %}>
              <a href="{{ item.url }}" title="{{ item.title }}">{{ item.navitem }}</a>
              </li>
            {% endfor %}
          </ul></nav></div>
    </div>
    <div class="banner">
      <div class="container">
        <div class="brand">
          <img src="/assets/images/Accessibility-Agent.png">
        </div>
        <nav class="main" aria-label="main site links">
<ul>
            {% for item in navigation.primaryNavigation %}
              <li class="{% if loop.first %}first{% elseif loop.last %}last{% endif %}{% if craft.request.getSegment(1) == item.url|replace({'/':''}) %}active{% endif %}">
                <a href="{{ item.url }}" title="{{ item.title }}">{{ item.navitem }}</a>
              </li>
            {% endfor %}
          </ul></div>

      <!-- end .container -->
    </div>
  </header> <section class="main" aria-label="main-content">

  {# Notify the user the form has errors and didn't submit #}
  {% if (errors is defined) and errors %}
    <div class="container">
      <div class="row">
        <div class="col" style="width:960px;">
            <div class="alert error fade in">
              <strong>Submission Error</strong>: The form you submitted has errors. Please scroll down to correct these errors and submit the form again.
            </div>
        </div>
      </div>
    </div>
  {% endif %}</section>

  {{ layout }}

  <footer class="container" style="text-align: center;">
    <div class="divider"></div>
    <nav class="footer" aria-label="Main site links repeated">  {% for item in navigation.primaryNavigation %}
        {% if item.url != "/" %}
          <a href="{{ item.url }}" title="{{ item.title }}">{{ item.navitem }}</a>
        {% endif %}
      {% endfor %}
      <br/>
      <a href="/">Home</a>
      {% for item in navigation.secondaryNavigation %}
        {% if item.url != "/" %}
          <a href="{{ item.url }}" title="{{ item.title }}">{{ item.navitem }}</a>
        {% endif %}
      {% endfor %}
    </nav></div>
    <strong<p>>Barriers can only exist if one chooses to acknowledge them. Here at Accessibility Agent, we acknowledge no barriers to achieving accessibility. we have made it our mission to help create a world where all digital technology is accessible to everyone.</p></strong>

<p>&copy; {{ now|date('Y') }} <strong>Accessibility Agent LLC</strong></p>



</footer>

  {#  Javascript at the bottom for fast page loading  #}
  {#  Grab Google CDN's jQuery. fall back to local if necessary  #}
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="/assets/js/libraries/jquery.js"%3E%3C/script%3E'))</script>

  {# Google Analytics Code - only display on live site #}
  {% if craft.config.env == 'live' %}
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-40824598-1', 'mabspeaks.com');
      ga('send', 'pageview');
    </script>
  {% endif %}
</body>
</html>
3

Difficult to be a 100% sure, but I believe the following should be correct – I put the </section> closing tag after the {{ layout }} variable, which I assume contains your content.

I also fixed some other other markup errors – specifically, a couple of unclosed tags, which are often the real source of layout issues – in addition to improving indentation in a couple of spots.

Click here to see a full diff report on all changes I made to the markup.

Also, here's a tool which can help you identify unclosed tags.

{% if activeNav is not defined %}
    {% set activeNav = "home" %}
{% endif %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xmlns:fb="http://ogp.me/ns/fb#">
<html lang="en">
<head>
    <meta charset="utf-8">

    {{ craft.sproutSeo.optimize() }}

    <link rel="stylesheet" href="/assets/css/00-reset.css?v=1">
    <link rel="stylesheet" href="/assets/css/01-layout.css">
    <link rel="stylesheet" href="/assets/css/02-general.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

    <div id="skip-link">
      <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>
    </div>

     {% set bannerImage = homePage.showcaseImage.first() %}


    <style type="text/css">
        nav.footer {
            font-size: 12px;
            text-transform: uppercase;
        }
        nav.footer a {
            color: #ccc;
            display: inline-block;
            padding: 0 3px;
            text-decoration: none;
        }
        nav.footer a:hover {
            text-decoration: underline;
        }
    </style>

    <style>
        h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, nav a {
          font-family: 'Lato', sans-serif;
          font-weight: 900;
        }

        h1, .h1,
        h2, .h2 {
            color: #444;
        }

        .brand h1 {
            color: #fafafa;
            font-size: 3em;
            text-transform: uppercase;
            line-height: 1;
        }

        .brand h1 span {
            display: block;
            font-weight: 300;
            font-size: 80%;
            text-transform: none;
        }

        header.primary 
        header.primary:before {
            background: rgba(70,70,70,0.7);
            position: absolute;
            width: 100%;
            height: 100%;
            display: block;
            content: " ";
            left: 0;
            top: 0;
        }

        .banner {
            background-color #36454f;

        }

        header {
            margin-bottom: 0;
        }

        header.primary .brand {

            {% if craft.request.getSegment(1) == "" %}
            padding-top: 150px;
            padding-bottom: 100px;
            {% else %}
            padding-top: 60px;
            padding-bottom: 20px;
            {% endif %}
        }

        header.primary nav {
            background: transparent;
        }

        header.primary nav.main {
            padding: 0;
            margin: 0 0 20px 0;
        }

        header.primary nav.top {
            height: inherit;
            overflow: hidden;
            padding: 0;
        }

        header.primary nav ul {
            overflow: hidden;
        }

        header.primary nav.top li {
            float: left;
        }

        header.primary nav li a {
            border-bottom: none;
            display: block;
        }

        header.primary nav li.active a,
        header.primary nav li a:hover {
            background: rgba(255, 255, 255, 0.1);
            border: none;
        }

        header.primary nav.main li.active a {
            background: rgba(10, 10, 10, 0.7);
        }

        header.primary nav.main li a:hover {
            background: rgba(10, 10, 10, 0.5);
        }

        header.primary nav.main ul {
            display: table;
            width: 100%;
        }

        header.primary nav.main li {
            display: table-cell;
            line-height: 1;
        }

        header.primary nav.main li a {
            vertical-align: top;
            text-align: center;
            border-bottom: 0 solid transparent;
            color: #bfbfbf;
            font-weight: bold;  
            text-decoration: none;
            padding: 5px 7px;
            line-height: 1;
            display: block;
            margin: 0 10px;
            -webkit-border-radius: 3px;
               -moz-border-radius: 3px;
                    border-radius: 3px;

            -webkit-transition: background ease 0.2s;
               -moz-transition: background ease 0.2s;
                 -o-transition: background ease 0.2s;
                    transition: background ease 0.2s;
        }

        header.primary nav.main li.first a {
            margin-left: 0; 
        }

        header.primary nav.main li.last a {
            margin-right: 0;    
        }

        header.primary nav.main li.active a,
        header.primary nav.main li a:hover {
            border: 0px solid transparent;
        }

        .wrapper-top {
            background: rgba(10, 10, 10, 0.5);
            z-index: 10;
            position: relative;
        }

        body {
            background: #f5f5f5;
            color: #666;
            font-family: Lora, Georgia, "Times New Roman", Times, serif;
        }
        .divider {
            display: none;
        }

        footer.container {
            padding: 70px 0 40px;
        }

        nav.footer a {
            color: #777;
        }

        select {
            max-width: 310px;
        }

        div.col.sixteen {
            padding-top: 30px;
        }

        .col.two-thirds {
            padding-top: 30px;
            padding-right: 15px;
            margin-right: -1px;
            border-right: 1px solid #ddd;
        }

        .col.one-third {
            padding: 30px 0 20px 25px;
            margin-left: 0;
            border-left: 1px solid #ddd;
            width: 279px;           
        }

        form {
            border: 1px solid #ddd;

            -webkit-border-radius: 3px;
               -moz-border-radius: 3px;
                    border-radius: 3px;


            background: #eee;

            margin: 0 -10px 20px;
            padding:14px 9px;
        }

        .newsletter input[type="text"] {
            width: 160px;
        }


        .divider620 {
            background: #ddd;
            height: 1px;
        }

        .gallery figure {
            background: transparent;
            overflow: hidden;
        }

        .gallery figure img {
            margin: 0;
        }

        a:focus, a:hover {
            color: #4c777a;
        }

    /*  Accent Color     */

        h3, .h3,
        a, a:visited {
            color: #345254;
        }

        .btn {
            background-color: #345254;
        }
    </style>

    <!--[if lt IE 9]>
        <script src="/assets/js/libraries/modernizr-html5.js?v={{ craft.config.cacheBustValue }}"></script>
    <![endif]-->
</head>
<body>
    <header class="primary">
        <div class="wrapper-top">
            <div class="container">
                <nav class="top" aria-label="Utility Links">
                    <ul>
                        {% for item in navigation.secondaryNavigation %}
                            <li {% if craft.request.getSegment(1) == item.url|replace({'/':''}) %} class="active"{% endif %}>
                            <a href="{{ item.url }}" title="{{ item.title }}">{{ item.navitem }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>
        </div>
        <div class="banner">
            <div class="container">
                <div class="brand">
                    <img src="/assets/images/Accessibility-Agent.png">
                </div>
                <nav class="main" aria-label="main site links">
                    <ul>
                        {% for item in navigation.primaryNavigation %}
                            <li class="{% if loop.first %}first{% elseif loop.last %}last{% endif %}{% if craft.request.getSegment(1) == item.url|replace({'/':''}) %}active{% endif %}">
                                <a href="{{ item.url }}" title="{{ item.title }}">{{ item.navitem }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>
            <!-- end .container -->
        </div>
    </header>

    <section class="main" aria-label="main-content">

        {# Notify the user the form has errors and didn't submit #}
        {% if (errors is defined) and errors %}
            <div class="container">
                <div class="row">
                    <div class="col" style="width:960px;">
                            <div class="alert error fade in">
                                <strong>Submission Error</strong>: The form you submitted has errors. Please scroll down to correct these errors and submit the form again.
                            </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {{ layout }}

    </section>
    <!-- end .main -->

    <footer class="container" style="text-align: center;">
        <div class="divider"></div>
        <nav class="footer" aria-label="Main site links repeated">  {% for item in navigation.primaryNavigation %}
                {% if item.url != "/" %}
                    <a href="{{ item.url }}" title="{{ item.title }}">{{ item.navitem }}</a>
                {% endif %}
            {% endfor %}
            <br/>
            <a href="/">Home</a>
            {% for item in navigation.secondaryNavigation %}
                {% if item.url != "/" %}
                    <a href="{{ item.url }}" title="{{ item.title }}">{{ item.navitem }}</a>
                {% endif %}
            {% endfor %}
        </nav>

        </div>
        <strong<p>>Barriers can only exist if one chooses to acknowledge them. Here at Accessibility Agent, we acknowledge no barriers to achieving accessibility. we have made it our mission to help create a world where all digital technology is accessible to everyone.</p></strong>

        <p>&copy; {{ now|date('Y') }} <strong>Accessibility Agent LLC</strong></p>

    </footer>

    {#  Javascript at the bottom for fast page loading  #}
    {#  Grab Google CDN's jQuery. fall back to local if necessary  #}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>!window.jQuery && document.write(unescape('%3Cscript src="/assets/js/libraries/jquery.js"%3E%3C/script%3E'))</script>

    {# Google Analytics Code - only display on live site #}
    {% if craft.config.env == 'live' %}
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-40824598-1', 'mabspeaks.com');
            ga('send', 'pageview');
        </script>
    {% endif %}
</body>
</html>

In closing, instead of printing variables (i.e. your layout variable), you might want to check out Twig's extends tag, which lets you embed content in a "layout" or base template using a special {% block %} tag. It's by far a more flexible and robust way to use "base" templates.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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