SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi-Line Button Unequal Line Width

    Hi

    I want to use only CSS and I want a button to appear on 2 lines as:

    Please add to
    Mailing List

    My problem is that I want the background colour on the second line to be the same width as the background colour on the longer first line. At the moment, the background colour on the second line stops at the end of "List".

    I (hopefully) have attached an image of what I am after

    Any help would be appreciated

    .mailing-list a:link,
    .mailing-list a:visited,
    .mailing-list a:hover,
    .mailing-list a:active {
    background-color: #663300;
    color: #FFFFFF;
    font: "Courier New", monospace;
    text-decoration: underline;
    }

    <div class="mailing-list">
    <a href="mail_list.htm"> Please add to</br> Mailing List </a>
    </div>
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    9 Post(s)
    Tagged
    0 Thread(s)
    Hi, that's because as an inline element, it doesn't generate a block and since it's an inline element it will only wrap around the content inside it..Give the anchor display:inline-block to make it a block (there are many other ways this can be fixed )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for prompt reply.
    It worked!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    9 Post(s)
    Tagged
    0 Thread(s)
    You're welcome . Glad to help.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

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
  •