SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css styling on header tag: Underline running into photos

    Hello.

    Please see the link below. Notice how the line under my headers is running behind the photos? How can I cut them off where the text starts to wrap?

    http://steelcitycreative.com/aufman/about-us/



    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    You can't really stop those lines going full width. You could fake it, though, by putting a border around the image that's the same color as the body background. E.g.

    Code:
    .alignright {
      border-width: 15px 0 15px 15px;
      border-color: #DFDCC4;
      border-style: solid;
      padding: 0;
      margin: 15px 0 10px 10px;
    }

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I'd just apply the body background color to your image's background so that the lines don't show through. And if you'd like even more distance, then you can add some padding to the image which will further separate the lines from the image.

    Code CSS:
    .alignright {
    /* add the below to your existing declarations */
     background: #dfdcc4;
     padding: 10px;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Yes, padding and background color is a nice alternative to border.


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
  •