Forums

peroyomas

I want to put an image floating at the left of a heading and its content beneath. The image is a thumbnail so I want people can access to the full version by clicking on it. Due to aesthetics, I prefer to put the image between the heading tag, because it don't look nice after it and don't make much sense before it. Does it hurt semantics doing that? If so, is there a workaround?

<h3><a href="image-fullsize.png"><img src="image.png" alt="" height="120" width="150" style="float: left"></a>Heading</h3>

TheDoc

I would definitely keep it outside of the actual heading tag.

traq

Is the image part of the heading? Honestly, it doesn't seem to make much sense to have the image link to a bigger version of itself.

If the image is part of the heading, I would expect the link to point at the content that the heading is for (or maybe a "permalink" page).

If it's more like a "preview image," I would put it outside of the heading entirely.

peroyomas

My issue is that I want the image to be completely at the left of the whole section—short of if I use a table row with two cells , one for the image and the other for the rest of the content (like in this site), yet I suppose that's better suited for CSS workarounds. If I put the image after the heading, the image floats after the heading and there is a little space at the left of the heading. I'm not sure how to solve that in a more or less clean way.

<style type="text/css">
.thumblinks {
padding-left:140px;
overflow: hidden;
}
img.alignleft {
float: left;
margin-right: 10px;
margin-bottom: 10px;
margin-left: -140px;
}
ol {
margin-left: 24px;
}
</style>
<!--[...]-->
<!--Example 1-->
<div class="thumblinks">
<h3><a href="#"><img src="image.png" width="124" height="124" alt="" class="alignleft"></a>This is a heading</h3>
<p>This is text.</p>
<ol>
<li>A list Item</li>
<li>Another list item</a></li>
<li><a href="#">Another list item with a link</a></li>
</ol>
</div>
<!--Example 2-->
<div class="thumblinks">
<h3>This is a heading</h3>
<p><a href="#"><img src="image.png" width="124" height="124" alt="" class="alignleft"></a></p>
<p>This is text.</p>
<ol>
<li>A list Item</li>
<li>Another list item</a></li>
<li><a href="#">Another list item with a link</a></li>
</ol>
</div>

traq

position the image absolutely*.


<style type="text/css">
/* Your CSS */
ol { margin-left: 24px; }

/* My CSS */
.my-thumblinks{ position: relative; }
.my-thumblinks-image{ position: absolute; top: 0; left: 0; }
.my-thumblinks-content{ padding-left: 140px; }
</style>
<!--[...]-->
<!--My Example-->
<div class="my-thumblinks">
    <a href="#" class="my-thumblinks-image"><img src="image.png" width="124" height="124" alt="example image"></a>
    <div class="my-thumblinks-content">
        <h3>This is my heading</h3>
        <p>This is text.</p>
        <ol>
            <li>A list Item</li>
            <li>Another list item</a></li>
            <li><a href="#">Another list item with a link</a></li>
        </ol>
    </div>
</div>

*works fine if all your images are the same width.
If they're not necessarily the same, I'd use floats (but with the same markup):

.my-thumblinks-image{ float: left; padding-right: 1em; padding-bottom 1em; }
.my-thumblinks-content{  }

the disadvantage is that margins (like the margin on your ol) will collapse with this approach; also, if the content is taller than the image it will wrap (which may or may not bother you).

TheDoc

I don't know why this can't be accomplished without floats? Can you post an exactly screenshot of what you're trying to do?

peroyomas

Image of what I wanted to do: http://i.imgur.com/LUODu.png I finally managed to do it with floats. There are a series of images which share the same width but not necessarily the same height so it may be a bit complicated with positioning. I noticed the videos section of this very site does something similar with definition lists, but that seems a bit awkward, so I tried something similar, but with HTML5 markup instead.

#content .thumblinks {
padding-left: 160px;
overflow: hidden;
}
#content .thumblinks img.alignleft{
	margin-left: -160px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

<section class="thumblinks">
<figure><a href="fullsize.png"><img class="alignleft" src="image.png" alt="" height="120" width="150"></a></figure>
<h3>Title</h3>
<p>Text</p>
<ul>
<li>List item</li>
<li>List item 2</li>
</ul>
</section>

treehouse : what would you like to learn today?

Forums

Is orthodox to put an image with a full size link between an heading tag?