Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Amandeep Dindral
Amandeep Dindral
8,915 Points

Problem with ordered lists

Hi,

So I added <ol> </ol> to my html and it numbers the items but for some reason. the text shows up on the left side of the page where it is suppose to and the numbering for the text shows up all the way on the right side rather than next to the text like its suppose to be.

For example:

it should look like this: 1. Lake Tahoe

but it looks like this: Lake Tahoe ( Lake Tahoe shows ups on the left side but the number 1 is all the way on the right side of the page ) 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Amandeep Dindral</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/responsive.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Amandeep Dindral</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ol>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ol>
      </nav>
    </header>
    <div id="LakeTahoe">
      <section>
        <ol>
          <a href="LakeTahoe/LakeTahoe.html"><li>Lake Tahoe</li> </a>
        </ol>
        </section>
      <footer class="footer">
        <a href="http://twitter.com/amandeepdindral"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://linkedin.com/pub/amandeep-dindral/60/6aa/8ab"><img src="img/LinkedIn.png" alt="LinkedIn Logo" class="social-icon"></a>
        <p>&copy; 2015 Amandeep Dindral.</p>
      </footer>
        </div>
      </body>
      </html>

/**********************
GENERAL
***********************/


a {
text-decoration:none;
}


body{
  font-family: 'Open Sans', sans-serif;
  }

#wrapper{
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

img{
  max-width: 100%;
  }


h3{
  margin: 0 0 1em 0;
  }


/**********************
HEADING
***********************/

header{
  float:left;
  margin:0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
  }



#logo {
  text-align: center;
  margin: 0;
}

h1{
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}


h2{
  font-size: 0.75em;
  margin:5px 0 0;
  font-weight: normal;
  }



/**********************
NAVIGATION
***********************/

nav{
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0 
  }

nav ul {
  padding: 0;
  list-style:none;
  margin: 0 10px;
  }

nav li {
  display:inline-block;
}

nav a {
  font-weight:800;
  padding: 15px 10px;
  }

/**********************
FOOTER
***********************/

footer{
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color:#ccc;
}


.social-icon{
  width:20px;
  height:20px;
  margin:0 5px;
}

/**********************
PAGE: PORTFOLIO
***********************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
    }


#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
  }

#gallery li a p {

  margin: 0;
  padding: 5%;
  font-size: 1em;
  color: #bdc3c7;
  text-align:center;
    }

/**********************
PAGE: ABOUT
***********************/

.profile-picture {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
  }

/**********************
PAGE: CONTACT
***********************/

.contact-info{
  list-style: none;
  padding: 0;
  margin:0;
  font-size: 0.9em;
}


.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
    }


.contact-info li.phone a {
  background-image: url('../img/phone.png');
}


.contact-info li.mail a {
  background-image: url('../img/mail.png');
}


.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

/**********************
COLORS
***********************/


/*links*/
a {
  color: #6ab47b;
}


/*green header*/
header{
  background:#6ab47b;
  border-color:#599a68;
}

/*logo text*/


h1, h2{
  color: #fff
  }


/*nav background on mobile devices*/


nav{
  background-color:#599a68;
  }

/*nav link*/


nav a, nav a:visited{
color: #fff;
}

/*selected nav link*/


nav a.selected, nav a:hover {
  color:#32673f;
}


/*site body*/


body{
  background-color:#fff;
  color:#999
    }

/**********************
LAKE TAHOE PAGE
***********************/

.footer {
  margin-top:200px;
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color:#ccc;
}

#LakeTahoe {
  list-style:none;
}

4 Answers

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You have:

<ol>
    <a href="LakeTahoe/LakeTahoe.html"><li>Lake Tahoe</li> </a>
</ol>

When using lists, anchors and other tag pairings need to go inside of the li tags, like this:

<ol>
    <li><a href="LakeTahoe/LakeTahoe.html">Lake Tahoe</a></li>
</ol>

Btw, ol is the abbreviation for ordered list, not organized list.

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points 
<section>
        <ol>
          <li><a href="LakeTahoe/LakeTahoe.html">Lake Tahoe </a></li>
        </ol>
        </section>
Amandeep Dindral
Amandeep Dindral
8,915 Points
Amandeep Dindral
Amandeep Dindral
8,915 Points

Appreciate the response guys. Just changed the tags. Still having the same issue. Any other suggestions?

 <section>
        <ol>
          <li><a href="LakeTahoe/LakeTahoe.html">Lake Tahoe</a></li>
        </ol>
        </section>
Clinton George
Clinton George
5,220 Points
Clinton George
Clinton George
5,220 Points

It looks like your "ol" section is wrapped in a div with an idea of "LakeTahoe". Then that "id" is later called to in the CSS with a "list-style: none". 

<div id="LakeTahoe">
      <section>
        <ol>
          <li><a href="LakeTahoe/LakeTahoe.html">Lake Tahoe</a></li>
        </ol>
        </section>

#LakeTahoe {
   list-style:none;
}

Try removing the "list-style: none;" to actually have a numbered list, or to remove the numbers be more specific with your selectors. 

#LakeTahoe ol li{
   list-style:none;
}