+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / image and bottom border in header tags? how?

image and bottom border in header tags? how?

7 posts, 2 answered
  1. Michael Waters
    Michael Waters avatar
    32 posts
    Registered:
    22 Mar 2010
    07 Nov 2010
    Link to this post
    I was watching the Sitefinity 4.0 Beta Release Candidate video and noticed the Telerik University h1 tags.
    There is some css style rules that make those headers have a small image to the left of the words and  bottom border (see image)...

    How does one accomplish that sort of thing, please?

    thanks!

  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    08 Nov 2010
    Link to this post
    Probably something like this...set a background image, then move the text to the left and give it all a border.

    background: url(image.png) no-repeat 0 0; /* edit positioning */
    padding-left: 40px;
    border-bottom: 1px solid #666666;
    Answered
  3. Michael Waters
    Michael Waters avatar
    32 posts
    Registered:
    22 Mar 2010
    08 Nov 2010
    Link to this post
    Steve,

    Thanks for replying...

    I tried your suggestion.. this is what I have in my code:

    css:

    h2
    {
        font-weight:bold;
        font-size: 1.3em;
        padding:15px 0 15px 0;
        color:Red;
        background: url(Images/testh2.gif) no-repeat 0 0;
        border-bottom: solid 1px gray;
    }

    see the image for what this does...

    Can you help me figure out exactly how I move the text over to the right  as in the first image I had in the first post?

    Thanks,
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    08 Nov 2010
    Link to this post
    You want left padding

    Here's an example

    fyi You can also move the background image around by changing the 0 0 after the no-repeat.  So try "0 -5px" for example

    (if it doesn't mvoe anything there might be another style overriding it, try putting !important after the padding so "padding-left: 40px !important")
  5. Michael Waters
    Michael Waters avatar
    32 posts
    Registered:
    22 Mar 2010
    08 Nov 2010
    Link to this post
    I tried your suggestion but could not get it to react to the padding:

    css used
    h2
    {
        font-weight:bold;
        font-size: 1.3em;
        padding:15px 0 15px 20px;
        color:Red;
        background: url(Images/testh2.gif) no-repeat left;
        border-bottom: solid 1px gray;
          
    }


    source code from site
    <h2>Welcome to <strong>WATERSTRUCK.COM</strong></h2>

    see image attached


    any suggestions?

    thanks
  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    08 Nov 2010
    Link to this post
    Try adding !important to it

    padding:15px 0 15px 20px !important;
    Answered
  7. Michael Waters
    Michael Waters avatar
    32 posts
    Registered:
    22 Mar 2010
    08 Nov 2010
    Link to this post
    well, that made it react to it!  Thanks!

    Im just now reading where you had said try this in the first post!  Sorry... guess I should have finished reading all the way through!


    Thanks again!

Register for webinar
7 posts, 2 answered