SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2002
    Location
    Dubai
    Posts
    714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    h1 image appearing above h1 text

    I want to have a small inage next to my h1 text and want to use css for the same. I did not want to use a code like <a href="http://"><img src = "image.jpg"></a><h1>heading</h1>

    I used the following code in my css file.
    Code:
    h1#newrepl {
        padding-top: 40px; /* height of the replacement image */
        height: 40px;
        width: 550px;
        font-family: Brush Script MT;
        font-size: 36px;
        text-align: center;
        overflow: hidden;
        background: transparent url("h1Image.jpg") no-repeat;
    }
    and am writing this code in my files.
    Code:
    <h1 id="newrepl">h1 text goes here</h1>
    My text is appearing below the image and not next to the image. Where am I going wrong.
    My site|My blog
    The real failure is not the one who doesn't get his goals but
    the one who gives up.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The code you have there doesn't seem to match your intention. If you want a small image next to your H1 text (say on the left) then give the H1 some left padding and place the image as a background image on the H1 and position it inside the left padding area.

    E.g.

    Code:
    h1 {
      padding-left: 40px;
      background: url(image.gif) no-repeat 0 50%;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru
    Join Date
    Nov 2002
    Location
    Dubai
    Posts
    714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, Ralph. I am getting exactly what I want now. I also aligned the text to the lleft in my code and now the h1 text is aligned right next to the image. As I newbie, I had just copied the code from one of the tutorials and was trying to tweak it to suit me.
    My site|My blog
    The real failure is not the one who doesn't get his goals but
    the one who gives up.


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
  •