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

CSS Framework Basics Prototyping with Bootstrap Adding a Dropdown Menu and Glyphicons

Posted by Maties Alzina Soler
Maties Alzina Soler
2,307 Points

[Bootstrap] The ul element is not displayed well!

Hi,

Sorry, but I opened a post a few minutes ago, but I wrote a code so extensive (bootstrap css) that now I can't open the page (it's too slow and crashes).

My problem is that the ul element of my navbar is not displayed well. The list items are displayed together (without spaces or margins between the li elements) and without effects when the elements are hovered.... Could you tell me why?

This is my html code:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<link rel="stylesheet" type="text/css" href="css/main.css">

  </head>

  <body>

    <div class="container-fluid">
      <div class="navbar navbar-default">
        <div class="container">
          <a class="navbar-brand" href="http://www.backfit.es"><img id="logo-img" src="img/logo_color_inline_text.gif"></a>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                  <li class="active">Inici</li>
                  <li>Sobre nosaltres</li>
                  <li>Serveis</li>
                  <li>Productes</li>
                  <li>Contacte</li>
            </ul> 
          </div>
        </div>
      </div>

      <div class="container">
        <div class="jumbotron row">
          <div class="col-lg-8">
            <h1>Take a look into your back.</h1>
            <p class="lead">Apren a cuidar de la teva esquena, i així millorar considerablement la teva salut. Nosaltres t'ajudem!</p>
          </div>

          <div class="col-lg-4">
            <img class="center-block" src="img/dark.png">
          </div>

        </div>

        <div class="row">
          <div class="col-md-4">
            <h2>Delete photo &amp; video based on a timer</h2>
            <p>Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct."</p>
          </div>

          <div class="col-md-4">
            <h2>Build an easily managed friends list</h2>
            <p>Learn what Parse.com offers as a "backend-as-a-service" platform. Explore the user account management APIs provided by Parse.com and write the code to create and save a new user in a Parse.com data store.</p>
         </div>

          <div class="col-md-4">
            <h2>Store &amp; retrieve data using cloud servers</h2>
            <p>We'll teach you how to upload images, video files, and messages to Parse.com's cloud servers. Then learn how to retrieve the data by setting up custom queries that download and display them in the app.</p>
          </div>
        </div>
      </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

  </body>



</html>

And this is my css (main.css):

.container-fluid {
    background-color: lightgrey;
}

#logo-img {
    width: 200px;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.navbar {
    background: #404038;
}

I'm sorry because two users had answered my question, but now i can't view their answers.

Thanks!

Maties Alzina Soler
Maties Alzina Soler
2,307 Points

My ul is displayed horitzontally, but there is no margins between the li elements, and when I hover there is no change. It looks like simple text.

It's strange, because the rest fo the elements are working well. The jumbotron is working, and the grud system of bootstrap is also working well.

1 Answer

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

I think It's because you don't have

<a>

links inside the li items.

Maties Alzina Soler
Maties Alzina Soler
2,307 Points

That's the error! Thanks, now it's working fine! :)

Laurie Gray
Laurie Gray
23,119 Points
Laurie Gray
Laurie Gray
23,119 Points

Absolutely spot on Jesus! :) Thank you