Results 1 to 8 of 8
  1. #1
    Join Date
    Jun 2001
    Location
    Gilroy CA.
    Posts
    466

    CSS Tricks Needed

    Ok - here's what I need to do. I want to design a style (class) so that when I use the style it follows whatever text I put in with a graphic. What I want is the text to be underlined - but instead of a solid bar of some color - I want to use a gif image bar.

    Here's the site and what it's supposed to look like:

    http://www.churchofreality.org

    So - is there a way to define a style that does this? I already have <hr> defined to do the rainbow bar.
    Marc Perkel
    /root
    http://www.junkemailfilter.com
    [email protected]

  2. #2
    Join Date
    May 2004
    Location
    madison, wi
    Posts
    839
    <div style="margin: 5px; padding: 10px; float: right;">

    Might want to give that a try. was playing around with that on a holder site of mine... http://www.jjwcustomjeweler.com/

  3. #3
    Join Date
    Feb 2005
    Location
    Northern VA
    Posts
    1,582
    So you want to figure out a way to give the underline itself a class that is associated with an image? In the example site you provided, you like the fact that the hr is a gif and you figured out how to do that but you want the underline property itself to be a gif.

    I was tinkering around with the property of the u tag and the only thing I could think of attaching was a background image to the tag but it didn't seem to work. I'd be curious to see if somebody knows this. If you don't get an answer in this forum and figure it out somewhere else please come back and let us know.
    Rich
    WebsiteMaven - Web Hosting Reviews, Guides, and Advice to Build and Promote your Web Site

  4. #4
    Join Date
    May 2004
    Location
    madison, wi
    Posts
    839
    div tags with the float style set are your friend...

  5. #5
    Join Date
    Dec 2004
    Location
    Fort Lauderdale, Florida
    Posts
    481
    h1 { background: url(hrimage.jpg) 0px 10px no-repeat; color: blue; font-size: medium; }

    Try that out, and in the HTML you can put:

    <h1>Hello</h1>

    And, the image you want under the text should be hrimage.jpg, or something else of your choice. Make sure to put it in the same relative location as the css file unless otherwise specified.

    If you need anymore help, let us know

    Cheers,
    Josh
    Voxxit - Accessible Web Design & Secure, Affordable Web Hosting
    Now offering 501(c)3 non-profit discounts!
    Ruby on Rails included with every hosting account! - Save up to 80% bandwidth on all plans with mod_deflate!
    Visit our services page to see how Voxxit can help you today!

  6. #6
    Join Date
    Jun 2001
    Location
    Gilroy CA.
    Posts
    466
    That's really close. I thied it and it sort of works - but the text overlaps the image. How do I get the text to be ABOVE the image?

    And - thanks for your help.
    Marc Perkel
    /root
    http://www.junkemailfilter.com
    [email protected]

  7. #7
    Join Date
    Dec 2004
    Location
    Fort Lauderdale, Florida
    Posts
    481
    Can you give us a link? I can test out directly from the web using Firefox, and paste you the final result.

    Thanks!

    Josh
    Voxxit - Accessible Web Design & Secure, Affordable Web Hosting
    Now offering 501(c)3 non-profit discounts!
    Ruby on Rails included with every hosting account! - Save up to 80% bandwidth on all plans with mod_deflate!
    Visit our services page to see how Voxxit can help you today!

  8. #8
    Join Date
    Jun 2001
    Location
    Gilroy CA.
    Posts
    466
    I got it to work - thanks. Here's what I did:

    .contentheading {
    background: url(/rbline.gif) 0px 24px
    no-repeat;
    background-position: bottom center;
    font-size: 16px;
    font-weight: bold;
    color: #4020C0;
    padding-bottom: 10px;
    padding-top: 4px;
    }
    Marc Perkel
    /root
    http://www.junkemailfilter.com
    [email protected]

Posting Permissions

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