CODEWITHSUNDEEP
htmlcss
kacalapy
kacalapy

Reputation: 10134

How to style a list of links with CSS?

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>

Upvotes: 2

Views: 31142

Answers (5)

vol7ron
vol7ron

Reputation: 42109

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;
        }
<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>


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;
       }
<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>

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

Upvotes: 6

Shiv Deepak
Shiv Deepak

Reputation: 3116

put all these links into a class

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

and css style sheet will have

<style type="text/css">
ul.stylelinks {
color: #666666; /*do your desired styling*/
}
</style>

More effects can be added using:

ul.stylelinks a:hover {

}
ul.stylelinks a:active {

}
ul.stylelinks a:link {

}
ul.stylelinks a:visited {

}

Upvotes: -1

DwB
DwB

Reputation: 38300

A different, simple answer


#related_links span
{
  display: block
}

Then wrap your links (anchor tag) in spans. For example:


<div id="related_links">
<span><a ... stuff .. >some text</a></span>
<span><a ... different stuff .. >different text text</a></span>
</div>

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

They key is to style the A tags and to "de-style" the list.

#related_links ul, #related_links li {
   list-style-type:none;
   margin:0;
   padding:0
}

/* this is for a horizontal menu if you want one */
#related_links li {
   float:left;
}

#related_links a {
   display:block;
   background-color:#202020;
   color:#ffffff;
   padding:5px;
   margin-right:2px;
   margin-bottom:2px;
}

Upvotes: 1

skyfoot
skyfoot

Reputation: 20769

You can go about this in so many ways.

To seperate your related links from any other links on the site do the following:

#related_links a {

}

remember to add hover and linked styles as well:

  #related_links a:hover {

   }

  #related_links a:link {

    }

Upvotes: 0

Related Questions