Images inline (next to) headings?

Discussion in 'CSS' started by Grand, Apr 23, 2007.

  1. #1
    Say I had a <h1> heading and I wanted an icon image next to it, how would I go about doing that? This might be embarrassingly obvious, but I've tried Googling it and nothing came up.
    Thanks!
     
    Grand, Apr 23, 2007 IP
  2. Mr Blonde

    Mr Blonde Guest

    Messages:
    142
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    1 way to do it is to add a background image to the h1, and use padding to push the heading text aside so the image will be visible and not behind the text
     
    Mr Blonde, Apr 24, 2007 IP
  3. Grand

    Grand Peon

    Messages:
    165
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks, are there any other ways? I kind of want it to the right of left aligned text, so that method wouldn't work too well.
     
    Grand, Apr 24, 2007 IP
  4. Mr Blonde

    Mr Blonde Guest

    Messages:
    142
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    you could float the image next to the text, and if you don't want the text wrapping underneath it just set a width on the paragraph or whatever contains the text
     
    Mr Blonde, Apr 24, 2007 IP
    Grand likes this.
  5. semantic7

    semantic7 Member

    Messages:
    92
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #5
    mr blonde's first method will work. All you need to do is to set the background to no repeat, right, top. You can change the distance between text and the image by increasing or decreasing the width of h1 element.
     
    semantic7, Apr 24, 2007 IP
  6. Grand

    Grand Peon

    Messages:
    165
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Oh right, thanks for that semantic7. I ended up using Mr Blondes second method. Cheers!
     
    Grand, Apr 24, 2007 IP