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 show “next”, “previous” buttons on an image (on mouseover)?

    How do I make the mobile view of my website not show certain elements?

    How to fit image into table cell by height with CSS (where the height is not defined explicitly)

    how to implement “blog” page in HTML/CSS? [closed]

    How to arrange subchild in the horizontal menu

    UI Challenge - how to draw “connectors” between elements?

    how to avoid css jitters while applying css border with hover pseudo class

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails

    How to line up items of varied length in a resizable space in CSS?

    How can I get text to be vertically-aligned to the bottom and fill the empty space above it as needed?

    How to keep the HTML element aligned when clicked/focused?

    How to selectively pass mouse events to underlying svg elements

    How to bring up a div box while hovering over a span tag in a section?

    How to change css properties on hover parent element?

    how to set word break in table th or td, when column and table-layout auto using CSS

    CSS Flexbox: how to change the width of the element

    How to create cube with only HTML and CSS?

    How to maintain an icon font from SVG files

    How do I overlay text on an image who's size is to be set?

    How do I create a margins on Google maps? [closed]

    How to center CSS Navigation Menu

    How can I select an nth element without knowing the element in CSS?

    How to control multiple images for a single background definition

    How to stretch items in menu (from right to left) - HTML and CSS

    how to specify a different image in css depending if the user visits on a desktop or a mobile browser

    CSS/HTML How to align these elements for a mobile view?

    How to check if two elements are toggled using Jquery?

    show image in aspect ratio and all image size same height and width

    how to get attribute value using selenium and css

    CSS: How to ignore an element so parent's padding will accomodate to other elements?