Good thing your entering this all yourself because if you had to sit and explain to a none-technical person the reason they need to include alt and title text when entering images you would most likely get a blank stare followed by useless if any at all alt or title information. Even worst when consuming data from an external source.
Also, I don't mean to go deathshadow on you or anything but using divs for a list is not semantic. That is what that will be – a list of articles with titles and teasers. Also, there is probably very little reason to be using so many divisions considering your writing all the HTML and CSS yourself. All you really need is probably a heading tag followed by a list element depending on whether order has any significance.
HTML Code:
<h2>Small-Business Articles</h2>
<ul>
<li>
<h3><a href="#">Postage Meters Can Save You Money</a></h3>
<img src="da_image_src" alt="whatever">
</li>
</ul>
Maybe also wrapping it in a div but that depends on the context which it is used – by itself or with other lists.
HTML Code:
<div class="small-business-articles">
<h2>Small-Business Articles</h2>
<ul>
<li>
<h3><a href="#">Postage Meters Can Save You Money</a></h3>
<img src="da_image_src" alt="whatever">
</li>
</ul>
</div>
if you want people to be able to click on the image and go to the article I would handle that with JavaScript using progressive enhancement. You could even do it for the entire list item.
This is also something else to think about will all images be the same orientation and size? If you work in the real world probably not. If that is the case you can apply the image as a background to a div and use the handy backgrounds-size: contain; property/value to have the browser constrain ANY size image to the area allocated by the div. Especially useful when mixing different orientation types.
HTML Code:
<div class="small-business-articles">
<h2>Small-Business Articles</h2>
<ul>
<li>
<h3><a href="#">Postage Meters Can Save You Money</a></h3>
<img src="da_image_src" alt="whatever"> <!-- hide this with CSS -->
<div style="background-image: url(da_image_url);"></div>
</li>
</ul>
</div>
For the low cost of creating an extra div you can have *most* browsers these days take care of fitting the image within a specified area using background-size: contain. There is an additional downfall considering the inline style but you can't have everything. So with those two sacrifices the browser can take care of partially resizing the image… well most modern browsers. In theory you could show the normal image for browsers unable to resize and the div for those that are. I might get slapped for mentioning this but I think it is way to powerful to ignore. Designs always cater to a consistent dimension/proportion of image and when dealing with user input rarely is that desired image dimension used. So when someone enters a vertical image that would throw the entire layout off without some wacky JavaScript. This way it all just works and without an JS!!! Additionally if you use background-size: center center; the image will be centered in the allocated space made up by the div.
Reply With Quote
Originally Posted by ralph.m
Bookmarks