SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Style Issue

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Style Issue

    Hello,

    On my web page: http://eastcoasttechwriter.ca/wordpress/
    In the left column, I have a few hyperlinks, which I have applied a style to.
    However, I can't figure out how to have the background of the link
    expand the entire width of the column (width is 160px).

    I wanted the background of the link to be:
    - 30px high
    - 150px width
    with a background color of say, Silver.

    Can someone please show me how to do this?

    a:link.MenuLeft, a:active.MenuLeft, a:visited.MenuLeft, a:hover.MenuLeft
    {
    color: blue;
    text-decoration: none;
    font-weight: semi-bold;
    line-height: 35px;
    width: 150px;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Give ti display:block; so it can allow widths .

    Also your supposed to do

    a.classname:hover

    Not
    a:hover.classname
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Jan 2006
    Location
    UK
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the following:

    a:link.MenuLeft, a:active.MenuLeft, a:visited.MenuLeft, a:hover.MenuLeft
    {
    color: blue;
    text-decoration: none;
    font-weight: semi-bold;
    line-height: 35px;
    width: 150px;
    background:silver;
    display:block;
    height:30px;

    }

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nisco View Post
    Try the following:

    a:link.MenuLeft, a:active.MenuLeft, a:visited.MenuLeft, a:hover.MenuLeft
    {
    color: blue;
    text-decoration: none;
    font-weight: semi-bold;
    line-height: 35px;
    width: 150px;
    background:silver;
    display:block;
    height:30px;

    }
    Make the width 160px as he mentions his column width is 160px width (or just remove the width altogether
    font-weight:semi-bold isn't a value, and your final result should be osmething like this.

    Oh, and it has to be in this order-:link :visited :hover :active
    Code:
    a.MenuLeft:link, a.MenuLeft:visited,  a.MenuLeft:hover, a.MenuLeft:active
    {
    color: blue;
    text-decoration: none;
    font-weight: semi-bold;
    line-height: 35px;
    /*width: 150px; unless you need it-remove it*/
    background:silver;/*background since you said you wanted one*/
    display:block;/*allow it to expand entire width*/
    }
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •