3 Replies Latest reply: Jun 10, 2014 4:25 AM by osgood_ RSS

    Problem making links {title edited by moderator}

    Aeryn of Kent

      I'm trying to create links in a navigation structure that I created. The problem is when I try to link the text with any page I've created the text moves from the structure to a different side of the page and changes color. When I undo the link the text returns to its original position and appearance.

      I'm including the code and screenshots of the before and after the link is created  in the hopes that someone can look at and point out what the issue is. I've followed the instructions in my text book and I'm doing it right but something just isn't working.

       

      Before:          After:

       

       

      Here's the code:

       

      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <!-- TemplateBeginEditable name="doctitle" -->
      <title>Untitled Document</title>
      <!-- TemplateEndEditable -->
      <style type="text/css">
      <!--
      body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background-color: #fff;
          margin: 0;
          padding: 0;
          color: #000;
          height: 100px;
      }
      /* ~~ Element/tag selectors ~~ */
      ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
      }
      h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
          padding-right: 15px;
          padding-left: 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
          text-align: left;
      }
      a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
      }
      /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
      a:link {
          color: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
      }
      a:visited {
          color: #6E6C64;
          text-decoration: underline;
      }
      a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
      }
      /* ~~ This fixed width container surrounds all other blocks ~~ */
      .container {
          width: 960px;
          background-color: #FFFFFF;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
      }
      /* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
      header {
          background-color: #fff;
          background-image: url(../Images/constitutiondaypic.jpg);
          height: 100px;
          background-repeat: no-repeat;
      }
      /* ~~ These are the columns for the layout. ~~

       

      1) Padding is only placed on the top and/or bottom of the block elements. The elements within these blocks have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the block itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the block element and place a second block element within it with no width and the padding necessary for your design.

       

      2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a block set to float right). Many times, padding can be used instead. For blocks where this rule must be broken, you should add a "display:inline" declaration to the block element's rule to tame a bug where some versions of Internet Explorer double the margin.

       

      3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar blocks could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.

       

      4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the blocks around in the HTML source.

       

      */
      .sidebar1 {
          float: left;
          width: 180px;
          background-color: #EADCAE;
          padding-bottom: 10px;
      }
      .content {
          padding: 10px 0;
          width: 780px;
          float: right;
      }

       

      /* ~~ This grouped selector gives the lists in the .content area space ~~ */
      .content ul, .content ol {
          padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
      }

       

      /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
      nav ul{
          list-style: none; /* this removes the list marker */
          border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 15px; /* this creates the space between the navigation on the content below */
      }
      nav li {
          border-bottom: 1px solid #666; /* this creates the button separation */
      }
      nav a, nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 5px 5px 5px 15px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
          text-decoration: none;
          background-color: #090;
      }
      nav a:hover, nav a:active, nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background-color: #ADB96E;
          color: #FFF;
      }

       

      /* ~~ The footer ~~ */
      footer {
          padding: 10px 0;
          background-color: blue;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
          color: #fff;
      }

       

      /*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
      header, section, footer, aside, article, figure {
          display: block;
          background-repeat: no-repeat;
          text-align: left;
      }
      .header-nav {
          font-size: 90%;
          font-weight: bold;
          color: blue;
          background-color: red;
          text-align: right;
          padding-top: 5px;
          padding-right: 20px;
          padding-bottom: 5px;
          border-top: 2px solid red;
      }
      .header_nav {
          float: right;
          text-align: right;
          background-color: red;
          padding-top: 5px;
          padding-right: 20px;
          padding-bottom: 5px;
          border-bottom-color: #fff;
          border-bottom-style: solid;
          border-spacing: 0px 0px;
          color: blue;
          width: 960px;
      }
      -->
      </style><!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      <!-- TemplateBeginEditable name="head" -->
      <!-- TemplateEndEditable -->
      </head>

       

      <body>

       

      <div class="container">
        <header></header>
        <nav class="header_nav"><strong><a href="freedomfirstpage.html">Home</a> | About Us | Contact Us | Submit an Essay</strong></nav>
      <div class="sidebar1">
          <nav>
          <ul>
            <li><a href="../constitution.html">The Constitution</a></li>
            <li><a href="../FederalistList.html">Federalist Papers</a></li>
            <li><a href="#">Essays</a></li>
            <li></li>
            <li><a href="#">Links</a></li>
          </ul>
          </nav>
          <aside>
            <p><a name="preamble">We the People </a> of   the United States, in Order to form a more perfect Union, establish   Justice, insure domestic Tranquility, provide for the common defence,   promote the general Welfare, and secure the Blessings of Liberty to   ourselves and our Posterity, do ordain and establish this Constitution   for the United States of America.</p>
          </aside>
        <!-- end .sidebar1 --></div>
        <article class="content">
          <h1><!-- TemplateBeginEditable name="Header" --><strong>Welcome to Freedom Rings</strong><!-- TemplateEndEditable --></h1>
          <section>
           <h2> </h2>
          </section>
          <!-- TemplateBeginEditable name="MainContent" -->
          <section>
            <p>This site is about going back to the basics of the United  States Constitution.  It is our belief  that our forefathers came to this country with a brand new idea, freedom for  all.  That basic theme has been around since  the beginning of early Greek civilization in a format called Democracy.  We continue to hear that cry today as many  countries shed old ideologies that haven&rsquo;t worked for centuries.</p>
            <p>In our society today we all share a common thread that of a  Democratic society.  During the beginning  of this great country our forefathers brought with them the idea of a free  capitalistic society based on sound Judeo Christian principles and since then  we as a nation have been spreading Liberty around the world.</p>
            <p>Since the beginning our country has been the hope for many  peoples.  That hope can best be expressed  by the Statue of Liberty and Ellis Island in New York.  It was here that people came from all walks  of life seeking new opportunities.  It  was a great beginning because they were the ones fleeing famine and poor  working conditions, seeking personal freedom or relief from political and  religious persecution.</p>
            <p>Because of our Democratic institutions all who come to this  country are free to create their own opportunities while being free from  oppression.  Opportunities abounded for  young and old, entrepreneurs, and anyone who had a good idea and wanted to  thrive in a country whose institutions had been built on the principal that  government should be by the people and for the people.</p>
            <p>Some two hundred years later, we who are descendants of  these early settlers are able to share in so many of the freedoms that were  established early in the development of this great country, the United States  of America.  Our wealth today is  unsurpassed by any country in the world.   Our living standards are far above most of the developed world.  We as a nation have been very successful in convincing  the world that living in a Democratic country where all men are created equal  is a good idea for mankind and all who come can participate freely.  </p>
            <p>As a nation we share in the wealth primarily because of our  checks and balances created under the Constitution of the United States.  These are made up of the executive, legislative and judicial branches.  It is these  checks and balances that ensure that not too much power is held by either  group.  Our Leaders are elected by the  people and these Leaders represent our liberties throughout the world in all  kinds of scenarios.  Keeping us safe and  prosperous for years to come is their main objective while at the same time  protecting our liberties worldwide.</p>
            <p>However, in recent years our elected officials seem to have  gotten off track with what their objectives should be as established in the  Constitution.  It is our belief that our  representatives in these branches of government should get back to the basics  of the Constitution, that document which sets our nation on solid ground making  us once again a formidable force in the world in a Democratic and Capitalistic society.  To accomplish these goals we need you to  support us in many ways to identify where Congress is failing and get them to  get back to the basics established under the Constitution.  The future is now.<a name="_GoBack"></a></p>
            <h2> </h2>
          </section>
          <!-- TemplateEndEditable -->
          <section>
          </section>
          <!-- end .content --></article>
        <footer>
          <p>  </p>
        </footer>
        <!-- end .container --></div>
      </body>
      </html>

        • 1. Re: Problem making links {title edited by moderator}
          Nancy O. CommunityMVP

          Which links are you struggling with -- sidebar nav or header-nav?

          Can you post the URL to your online page so we can see it in our browsers?

           

           

          Nancy O.

          • 2. Re: Problem making links {title edited by moderator}
            Aeryn of Kent Community Member

            It's the header_nav. I don't have the site posted yet so I can't send the link. I tried sending screenshots but the forum doesn't seem to allow it. Is there any other way I can illustrate the issue?

            • 3. Re: Problem making links {title edited by moderator}
              osgood_ CommunityMVP

              The links in the red bar are taking onboard the 'nav' anchor css styling as they are enclosed in a <nav></nav> container.

               

               

              The best way around this is to give your 2 navigation areas <nav></nav> an individual css class:

               

              <nav class="sideNav">

                  <ul>

                    <li><a href="../constitution.html">The Constitution</a></li>

                    <li><a href="../FederalistList.html">Federalist Papers</a></li>

                    <li><a href="#">Essays</a></li>

                    <li></li>

                    <li><a href="#">Links</a></li>

                  </ul>

                  </nav>

               

               

              Then add .sideNav infront of ALL the css selectors as below:

               

              /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */

              nav.sideNav ul{

                  list-style: none; /* this removes the list marker */

                  border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */

                  margin-bottom: 15px; /* this creates the space between the navigation on the content below */

              }

              nav.sideNav li {

                  border-bottom: 1px solid #666; /* this creates the button separation */

              }

              nav.sideNav a, nav.sideNav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */

                  padding: 5px 5px 5px 15px;

                  display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */

                  width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */

                  text-decoration: none;

                  background-color: #090;

              }

              nav.sideNav a:hover, nav.sideNav a:active, nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */

                  background-color: #ADB96E;

                  color: #FFF;

              }

               

               

               

              You already have a css class associated with the top navigation container <nav></nav> - 'header_nav' - so to style the links within that area use:

               

              .header_nav a {

              color: #fff;

              text-decoration: none;

              }

               

              .header_nav a:hover {

              color: #000;

              }