Grow your CSS skills. Land your dream job.

displaying images next to headings

  • # May 30, 2013 at 9:59 am

    Hi,

    I’m editing a site.. and on it there is a toggle where a heading is something like..

    Herbal Medicine

    My client wants an image next to the heading on the left… but I’m not sure on the cleanest way to do that.

    Is placing an img tag inside a heading ok?

    Herbal Medicine

    Placing the img outside of the heading will place them on different lines..

    Thoughts? or best practice comments?

    thanks.

    ps. I notice the code is actually rendering.. not sure how to display just the code. The “code” tag does not seem to work.

    # May 30, 2013 at 10:22 am

    Although you can technically do it, I think you would run into formatting / layout issue.

    I’d be more inclined to go with a pseudo element: http://codepen.io/Paulie-D/pen/mhDrH

    It also has the virtue of being more semantic.

    # May 30, 2013 at 10:58 am

    Do something like [this.](http://codepen.io/alex13/pen/kjGhc “”)

    # May 30, 2013 at 11:01 am

    Paulie, why the pseudo element? just put it in the h4 background and be done.

    @magician11, is this image important to the content or just design/decoration? if the latter, then definitely use a background image.

    # May 30, 2013 at 11:08 am

    >Paulie, why the pseudo element? just put it in the h4 background and be done.

    Good point…I overthought it. :)

    @codegrapics This is why not…

    >is this image important to the content or just design/decoration? if the latter, then definitely use a background image.

    # May 30, 2013 at 11:14 am

    How about adding a left padding to the H tag and using the image as a background in that space? It would help as it means you’re not dirtying your H’s with image ALTs and can be easily restyled for a responsive design

    # May 30, 2013 at 11:23 am

    @trooperbill

    >just put it in the h4 background and be done.

    Just as @wolfcry911 suggested.

    # May 30, 2013 at 11:39 am

    Just follow my code. Very simple. No need of going around finding a solution to this simple stuff. Just float the image left and give it a right margin. Simple.

    # May 30, 2013 at 12:02 pm

    >Just follow my code. Very simple. No need of going around finding a solution to this simple stuff. Just float the image left and give it a right margin. Simple.

    Simple but not semantic.

    If the image is just styling (as it would appear to be) then it doesn’t belong in the HTML, it belongs in the CSS…hence the bg image is probably the best solution

    # May 30, 2013 at 12:08 pm

    No sir. Making the image a background is not the best option. Let him just add the image naturally with image tag in html doc. This is just issue of floating. There is no point bringing the image in through css.

    # May 30, 2013 at 12:12 pm

    >Making the image a background is not the best option. Let him just add the image naturally with image tag in html doc. This is just issue of floating. There is no point bringing the image in through css.

    You misunderstand.

    If the image is **styling** (like a list bullet) and has **no relation** to the heading then it shouldn’t be in the html.

    If the image was related to the contents of the heading (or even a paragraph following the h4) then, yes, by all means have it in the HTML and float it or whatever.

    Otherwise. it adds nothing and should be kept out of the document.

    Even in this case, where you could vaguely relate a flower image to the “Herbal Medicine” content you have to ask yourself “What would this add for a screen reader?”.

    Your way it would read something like “Flower Image – Herbal Medicine”…my way it would read just “Herbal Medicine”.

    That’s a simplistic way of stating this case but I hope you see where i am coming from.

    # May 31, 2013 at 4:47 pm

    Hi everyone.

    Thank you for the detailed answers.

    So it seems I need to be more specific…

    Have a look at this page
    http://www.mynaturopathchristos.com/services/

    As you can see there are many toggles on it. The flower next to the title is a placeholder image for now. Inside every toggle is an image. My client wants that image to appear next to the heading to make the page appear more aesthetically interesting.

    So it seems the solution is to have the image in the HTML as suggested by @CodeGraphics ?

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".