SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2003
    Location
    san antonio tx
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I make this possible?

    Hi everyone,

    I'm currently designing my blog, and am running into a problem that I am unsure of how to execute with CSS.

    In the attached image, I took a screenshot of a portion of my blog footer design. What I'm wanting to do is place a thing brown rule under each link. Easy enough, but I want the rule to be a certain width, not just match the same width of the line of text. Also, the rule is obviously a different color than the link.

    Is this at all possible with CSS?

    Thanks!
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Why not just use a border bottom on the anchor.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    h2{
        margin:0 0 .5em;
        text-transform:uppercase;
    }
    ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    ul.test1{
        width:200px;
        background:#271611;
        color:#fff;
        padding:15px;
        float:left;
    }
    ul li a{
        color:#cbeaf9;/* text color*/
        border-bottom:1px solid #77401d;/* underline color*/
        text-decoration:none;
        display:block;
        padding:0 0 2px 0;
        font-size:115&#37;;
    }
    .outer{
        float:left;
        padding:10px;
    }
    </style>
    </head>
    <body>
    <div class="outer">
        <ul class="test1">
            <li>
                <h2>Categories</h2>
                <ul>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Illustration</a></li>
                    <li><a href="#">Icon</a></li>
                    <li><a href="#">Inspiration</a></li>
                </ul>
            </li>
        </ul>
    <ul class="test1">
            <li>
                <h2>Categories</h2>
                <ul>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Illustration</a></li>
                    <li><a href="#">Icon</a></li>
                    <li><a href="#">Inspiration</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Dec 2003
    Location
    san antonio tx
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you! that worked perfectly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •