CODEWITHSUNDEEP
htmlcss
Christian Antfeld
Christian Antfeld

Reputation: 17

Why are my <a> elements not displaying?

I am building a navbar and I had everything working yesterday. My computer lost power last night and I don't have the code from yesterday anymore apparently. Anyways, my css is:

ul {
  float: right;
  background-color: black;
  width: 600px;
}

a {

  display: inline-block;
  color: white;
  text-decoration: none;

}

a:link {
  text-decoration-color: none;
}

a:hover {
background-color: blue;
}

li {
  float: left;
  color: white;
  list-style: none;
  display: inline;
  padding: 20px 40px 20px 40px; 
}

body {
  background-color: #f0f0f5;
}

And the html is:

<!DOCTYPE html>
<head>
    <title>Practice Site</title>
    <link href=main.css rel=text/css type=stylesheet/>
</head>

<body>
    <ul>
        <li><a href=#></a>Home</li>
        <li><a href=#></a>Home</li>
        <li><a href=#></a>Home</li>
        <li><a href=#></a>Home</li>
    </ul>
    <!--Sign up form-->
    <form>
        <p>First Name</p>
        <input type="text" name="First Name" size="20" maxlength="30" />
    </form>
</body>

Also, I don't quite understand how I can indent all of the code that I have to display in my questions without using control+v to copy the required indent. I already read the advanced help and did not see how to do this there.

Upvotes: 0

Views: 68

Answers (3)

vishnu
vishnu

Reputation: 2948

See this code:

ul {
  float: right;
  background-color: black;
  width: 600px;
}

a {

  display: inline-block;
  color: white;
  text-decoration: none;
padding: 20px 40px 20px 40px; 
}

a:link {
  text-decoration-color: none;
}

a:hover {
background-color: blue;
}

li {
  float: left;
  color: white;
  list-style: none;
  display: inline;
}

body {
  background-color: #f0f0f5;
}
<ul>
  <li><a href=#>Home</a></li>
  <li><a href=#>Home</a></li>
  <li><a href=#>Home</a></li>
  <li><a href=#>Home</a></li>
</ul>
<!--Sign up form-->
<form>
<p>First Name</p>
<input type="text" name="First Name" size="20" maxlength="30" />
</form>

Upvotes: 0

Quentin
Quentin

Reputation: 943537

Because they have:

  • No content that would give them a height/width
  • No CSS that would given them a height/width despite having no content

Put the text inside the link instead of after it.

Upvotes: 2

Asaph
Asaph

Reputation: 162791

Your <a> elements have no content in them. Move the text inside the <a> element and you'll see the links.

Change

<li><a href=#></a>Home</li>

to

<li><a href=#>Home</a></li>

Upvotes: 3

Related Questions