Unordered Lists and Displaying Inline

[Jsheffers]

I have a list I am trying to display inline.

Here is the code.

 

Frames

 

By OSWM

 

DOS

 

By Richard O Robinson

 

Gears Of War

 

By Richard O Robinson

 

The Greener Side

 

By Shane Jeffers

 

Moment of Zen

 

By One|Te Productions

 

Add To The Garden

 

 

 

It should have two lines of text for each link, and I want it to be horizontal.

 

Here is my css for it.

 

#navlist a {

color: green;

}

 

#navlist {

list-style-type: none;

}

 

#navlist li{

display: inline;

 

}

 

Thanks for any help.

[newseed]

Try this:

 

The HTML:

></pre>
<ul id="navlist">
Frames
By OSWM

DOS
By Richard O Robinson

Gears Of War
By Richard O Robinson

The Greener Side
By Shane Jeffers

Moment of Zen
By One|Te Productions

Add To The Garden

 

The only thing I did to the above code is remove the

tags. Don't need if you set the to display block because you are defining an for each line you want.

 

 

The CSS:

#navlist {
   list-style: none;
}
#navlist li {
   display: inline;
   float: left;
}
#navlist li a {
   color: green;
   display: block;
   padding: 3px 15px;
       margin: 0;
}
#navlist li a:hover {
   text-decoration: none;
}

 

Two important elements here is that I added float: left to the #navlist li and display: block to #navlist a. Of course I've added a bit of padding/margins to give it a nice look.

[Jsheffers]

Try this:

 

The HTML:

></pre>
<ul>
Frames
By OSWM

DOS
By Richard O Robinson

Gears Of War
By Richard O Robinson

The Greener Side
By Shane Jeffers

Moment of Zen
By One|Te Productions

Add To The Garden

 

The only thing I did to the above code is remove the

tags. Don't need if you set the to display block because you are defining an for each line you want.

 

 

The CSS:

#navlist {
   list-style: none;
}
#navlist li {
   display: inline;
   float: left;
}
#navlist li a {
   color: green;
   display: block;
   padding: 3px 15px;
       margin: 0;
}
#navlist li a:hover {
   text-decoration: none;
}

 

Two important elements here is that I added float: left to the #navlist li and display: block to #navlist a. Of course I've added a bit of padding/margins to give it a nice look.

 

You are a life saver my friend. That also helps me understand CSS a little bit more. What exactly does display: block do?

[falkencreative]

This has a good description, just below the chart at the top of the page:

 

http://www.quirksmode.org/css/display.html

 

this might be useful as well:

 

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.3