How to style a list of links with CSS?


Tags: html,css

Problem :

any tips on how i can use CSS to style these links in a small side widget to look hot using css? (here is my html code)

i would love a clean and simple layout

    <div id="related_links">
   <ul>
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database.aspx">SQL Services</a></li>
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database/MSSQLServerPerformanceTuning.aspx">Performance Tuning</a></li>
    <li><a alt="SQL Server Audit Service" title="SQL Server Audit Service" href="/Database/SQLServerAuditService.aspx">SQL Auditing</a></li>
    <li><a alt="Upgrade to Microsoft SQL 2008" title="Upgrade to Microsoft SQL 2008" href="/Database/SQLServer2008.aspx">SQL 2008</a></li>
   </ul>
</div>


Solution :

I think A List Apart already covered this many years ago: http://www.alistapart.com/articles/taminglists/

Vertical

(credit: A List Apart)

#related_links {
    width: 12em;
    border-right: 1px solid #000;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: 'Trebuchet MS', 'Lucida Grande',
    Verdana, Lucida, Geneva, Helvetica, 
    Arial, sans-serif;
    background-color: #90bade;
    color: #333;
    }

#related_links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }

#related_links li {
    border-bottom: 1px solid #90bade;
    margin: 0;
    }

#related_links li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }

html>body #related_links li a {
    width: auto;
    }

#related_links li a:hover {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }


Horizontal

Here's almost the same example that I've touched up with a few formatting changes.

#related_links {
    background-color  : #90bade;
    color             : #333;
    font-family       : Tahoma;
    font-size         : .7em;
    padding           : 1em;
    }

#related_links li {
    border-bottom     : 1px solid #90bade;
    list-style-type   : none;
    display           : inline-block;
    }

#related_links li a {
    background-color  : #2175bc;
    color             : #fff;
    border-left       : 10px solid #1958b7;
    border-right      : 10px solid #508fc4;
    font-weight       : bold;
    padding           : .5em;
    text-decoration   : none;
    }

#related_links li a:hover {
    background-color  : #2586d7;
    color             : #fff;
    border-left       : 10px solid #1c64d1;
    border-right      : 10px solid #5ba3e0;
    }

If you don't want the background spanning the whole screen

#related_links, #related_links ul{
   display            : inline;
   }

How to remove spaces

To remove spaces between the items, you'll have to either float the list items, or remove the whitespace between the end of one and the beginning of another: From:

<ul>
   <li>1</li>   
   <li>2</li>   
   <li>3</li>
<ul>

To:

<ul>
      <li>1</li
     ><li>2</li><!--   
   --><li>3</li>
<ul>

Notice: the method after 1 does not ends the list tag until the next line, not allowing whitespace between the two list items. Method 2 is similar, it uses a comment, though, to ignore any whitespace between the second and third list items.

Again, you could always just float the li in the CSS


    CSS Howto..

    How to add a custom CSS file in ExtJs 5?

    How do i hide html until its processed with javascript?

    Having 2 css code blocks in html files how to make only one work using JS?

    CSS: how to make label appear right of the radio?

    How do I make a absolute positioned div have a width equal to it's parent minus some margin

    how to apply css to extjs grid emptytext?

    how do you create tags like stackoverflow with text styling

    How do I get my textboxes to align properly once triggered? - jQuery/CSS

    How to center inside divs in a 1140px fluid responsive framework?

    How to include a custom CSS file in TYPO3

    How to do a full bleed background image that scales with resolution in css/javascript? [duplicate]

    How can I resize images that are loaded onto a page?

    How to read minified CSS?

    How to apply CSS correctly to iFrame?

    How to change menu from on hover to on click

    how to really include html codes inside php

    How can I set a height, or allow a div to extend to the height of absolutely position elements within?

    How to create an href that opens a div on screen? [closed]

    Foundation CSS Framework, how to change triangle on accodion

    How to add a background to text only?

    How to style an asp.net menu with CSS

    How do I make punch-through transparent text in HTML/CSS?

    CSS: how to style on character height versus line height

    How to order rows (or divs) vertically using blueprint css?

    css divs display:none reseting and showing divs when function is called

    How do I insert a “close” link in this list

    How to style 2 vertical jQuery UI Slider handles?

    How to change class named active into link's active attribute in javascript

    Not sure how to use css selectors

    How to align multiple images in a table cell vertically?