CODEWITHSUNDEEP
htmlcsslistinline
isolatedhowl
isolatedhowl

Reputation: 191

Having trouble getting the navigation list to display inline

Okay so here is the link to the page I'm working on:

http://students.thenet.ca/jlandon/

As you can see, the list is still displaying vertically instead of horizontally.

CSS:

li              {   display:inline;
                list-style-type:none;
            }
#nav            {   background-color:#c6c7c3;
                height:50px;
                margin-top:120px;
                z-index:2;
            }

HTML

<div id="nav">
<ul>
<li><a href="index.php"><h2>Home</h2></a></li> <li><a href="about.php"><h2>About</h2></a></li> <li><a href="school.php"><h2>School</h2></a></li> <li><a href="workshop"><h2>Workshop</h2></a></li> <li><a href="contact.php"><h2>Contact</h2></a></li>
</ul>
</div>

Okay now I see why that wasn't working (H1-6 are blocks) so here is the specifics of what I want the navigation to look like (please help me): site design http://students.thenet.ca/jlandon/images/sitedesign.png

Upvotes: 0

Views: 94

Answers (4)

Kianosh
Kianosh

Reputation: 179

You should consider using semantic classes instead of using block elements like h2 in your navigation. If by using the h2 element, you want a bold font with a certain size then you should consider this:

.nav-text, #nav li a {
  font-size: 1.25em;
  font-weight: bold; }

#nav {
  background-color: #c6c7c3;
  height: 50px;
  margin-top: 120px;
  z-index: 2; }

Also notice that I use em instead of pixels. This will help in responsive design if you decide in the future to extend the page to mobile sites.

Your html will something like this:

<div id="nav">
  <ul>
    <li><a href="index.php">Home</a></li> 
    <li><a href="about.php">About</a></li> 
    <li><a href="school.php">School</a></li> 
    <li><a href="workshop">Workshop</a></li> 
    <li><a href="contact.php">Contact</a></li>
  </ul>
</div>

Upvotes: 0

Jacco
Jacco

Reputation: 3271

I think a float: left would fix this:

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

Upvotes: 1

hunterloftis
hunterloftis

Reputation: 13799

h2 is a block element by default, which is what's breaking your lines.

You can fix it by either setting display: inline on the h2s (probably not a great idea) or by replacing the h2s with something else (like just styling the a tag to be the size and font etc you want).

Upvotes: 3

oomlaut
oomlaut

Reputation: 773

Why are you using H2 for the navigation elements?

Change them to also display inline, or use an inline element.

Upvotes: 3

Related Questions