SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image for H1 text only?

    Is there a way with CSS to x-repeat an image of 25 px behind the H1 text and have it stop at the end of the text? The H1 text is inside of a main div that is much wider than the text, and the image continues to the end of the main div right now.

    I'm trying to avoid creating a div especially for all the H1 headers. I've searched around but can't find anything on this.

  2. #2
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try making it display:inline

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or set the width of the h1 (in ems to allow for text resize).

  4. #4
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Setting the width of the H1 only changes the text size.

    I already tried the Display: inline trick. That actually makes the background image invisible. Not sure why, but it completely disappears.

    Thanks for the suggestions. Maybe there actually is something that can't be done with CSS. Although I can still put it in it's own div and set width to auto.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Websiteguy View Post
    Setting the width of the H1 only changes the text size.
    Huh? How would that be possible? Setting the width only affects the "box" that surrounds the text - if it is too small, the text will wrap. You should be able to set the width to be just wide enough for the text to fit, which will then limit the length of the background mage.

  6. #6
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My mistake! I thought you were saying to set the text size in ems.

    However, this still doesn't solve my problem, because I have more than one H1 header on the index page. They all have a different length of text.

  7. #7
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you show us some code? using display:inline should work.

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Semantically, that is not a good idea - a h1 is a top level heading, so there should only be one..

    However, if they are in different places in the page, they may have different parent elements, and so can then be targeted individually in the css. They could be given individual class names and targeted that way as well.

    Another option is to float the h1's, which will cause their surrounding box to shrinkwrap, but this may lead to other layout issues as well.

  9. #9
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Floating the H1 did create the result I wanted, but caused the paragraphs to wrap.

    Here is the CSS for the #page, #textleft div element that contains the H1, and the H1. The html can be found in the view source on my signature.

    #page {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    font-style: normal;
    font-weight: normal;
    color: #660000;
    text-align: left;
    width: 960px;
    position: static;
    margin-right: auto;
    margin-left: auto;
    padding-top: 8px;
    white-space: normal;
    overflow: hidden;
    }

    #textleft {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    text-align: left;
    float: left;
    width: 562px;
    position: relative;
    padding-top: 30px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    }

    h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    font-style: normal;
    font-weight: bold;
    color: #af3e07;
    text-align: left;
    background-image: url(images/H1-opt.jpg);
    background-repeat: repeat-x;
    background-position: left;
    }

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bit hard to test fully, as the referenced image is not on your server yet...

    What about
    Code:
    #textleft h1 {
    background-image: url(images/H1-opt.jpg);
    background-repeat: repeat-x;
    background-position: left;
    float: left;
    }
    #textleft p, #textleft h2 {
    clear: left;
    }

  11. #11
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    That's definitely got me on the right track now. There isn't an h2 below each of the h1's, but I can certainly configure the clear now. But that definitely worked on the section with the h2 in it.

  12. #12
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooops!

    Just saw the edition of the #textleft p in the CSS code. I had just quickly added a float to my h2 to see if it worked.

    Perfect!!

  13. #13
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New problem!

    In FireFox, it of course works perfectly. But in IE7, it looks fine in the first paragraph, but then on the consecutive paragraphs, it deletes the extra spacing below the h1. It has no space at all, it just starts the text.

    Any clues as to maybe a IE hack that I could add to my clear or h1?

  14. #14
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On my system, the headings works perfectly in IE6 and IE7.

    FYI: In Firefox my user font setting is 9px as medium; so in my FF your H1 and H2 is not 16px but 9px.

  15. #15
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks erik.j

    The site as it is on the servor right now is correct. The changes with the float and clear is still on my hard drive and not yet uploaded to the server.

    I thought about doing a couple of screen shots, but hoped that the description of the problem will suffice. Sorry for the confusion.

  16. #16
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then you need to change the headings setting to px in your live site.

    And a happy new year!


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
  •