CSS Background Images in Divs vs Image Elements in HTML document

Hi

I decided, while updating my portfolio site, to take ‘separation of structure and appearance’ a step further by taking my image tags (inside my nav links <a> tags) out of my HTML document and using background images in CSS instead. This works fine, but now what do I do about alt tags? surely putting image elements in the HTML is moving backwards in terms of seperation of appearance and structure? I want the site to have different interchangeable style sheets in the same way that CSS zen garden does, so i want to keep images in background in CSS. But what about alt tags (for accessibility)? What should I do?

Thanks so much

I mistook on the intermediate border, please correct like this:
(“on” by default in p1, p2, “off” by explicit “frameBorder=0” in p3, p4).

Sorry. Versailles, Mon 28 Jun 2010 01:02:50 +0200

As a tiny example, in my writing (instructions as condensed and inline as possible), the whole source of p4 is visible in one glance in a Notepad++ half-window, with another (say p0) in the “Other View”, enabling direct, instant, safe and reliable comparison; in your “new-fashioned code” (one single instruction by line, making the source more vertical) this is impossible…

No. I (sometimes) use a real text editor. It’s called vim. It has this cool function in it called :diffs where it will highlight differences between two or more documents, and you can tell it whether to care about newlines or not (by default, it ignores them). Apparently some of the lesser graphical editors do this too : ) As you scroll one file, the other file autoscrolls (again seems default in my vim… you can also turn this off). So a little scrolling doesn’t hurt, plus it’s possible my screen is taller than yours (I can see both our codes in a half-window either way).

I don’t mind HTML all done in one big long line for serving on the web, but if it’s code I’m maintaining or using to show someone something, I’ll use my usual indentation and newlines etc. Not that I found your code unreadable, it was fine.

which IMO is one of the reasons why, contradicting the “(with NO border)”, you inadvertently dropped the “frameBorder=0”.

It wasn’t inadvertent. When I had done the rewritten version, I removed presentational markup from the code, because it causes global epidemics of Mad Cow disease and Kenny G music. Instead, I used CSS. iframe {border: 0;} works, or in the case of the updated code,


#navext {
  display: block;
  width: 200px; 
  height: 300px; 
  margin: 0 8px 8px 0; 
  padding: 5px;
[b]  border: 0;[/b]
}

Since your borders are part of a demo and are sometimes there and sometimes not, I’d prolly do it as a class that specifically existed for borders/no borders instead of the id since all the iframes have the id… but I only did a redo of #4, Aeronautics.

Thanks a lot Stomme poes 12:10 (GMT) for having uploaded my 5 files, unaltered, on your site, thus allowing others to instantly use my demo (just click any of the 5 [URL=“http://stommepoes.nl/p0_Contents.htm”]p0_Contents - [URL=“http://stommepoes.nl/p1_Paris.htm”]p1_Paris - [URL=“http://stommepoes.nl/p2_Skiing.htm”]p2_Skiing - [URL=“http://stommepoes.nl/p3_Wine.htm”]p3_Wine - [URL=“http://stommepoes.nl/p4_Aeronautics.htm”]p4_Aeronautics links, then continue trying).

Thx also for suggesting your “new-fashioned code”. As you noticed I sometimes prefer the old way. Yes I know, I used a lot of different systems, OSes, languages when I wrote entire big applications since 1977, so I saw much evolutions; of course I appreciated most of them, but they can’t be all successes and in some limited cases I do prefer the old ones. As a tiny example, in my writing (instructions as condensed and inline as possible), the whole source of p4 is visible in one glance in a Notepad++ half-window, with another (say p0) in the “Other View”, enabling direct, instant, safe and reliable comparison; in your “new-fashioned code” (one single instruction by line, making the source more vertical) this is impossible, which IMO is one of the reasons why, contradicting the “(with NO border)”, you inadvertently dropped the “frameBorder=0”.

Versailles, Sun 27 Jun 2010 17:03:50 +0200

Got it.
uploaded:
p0_Contents.htm
p1_Paris.htm
p2_Skiing.htm
p3_Wine.htm
p4_Aeronautics.htm

Since I don’t like old-fashioned code, I’ve updated it:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>p4: Aeronautics (Back-Frame Navigation Test)</title>
  <meta content="MSHTML 6.00.2900.5969" name="GENERATOR">
<style type="text/css">
body {
  color: #000;
  font: 10pt arial, sans-serif;
  background: #fff;
}

div {
  float: left;
}

#navext {
  display: block;
  width: 200px; 
  height: 300px; 
  margin: 0 8px 8px 0; 
  padding: 5px;
  border: 0;
}

p {
  margin: 0 0 5px;
}

address {
  clear: both;
  font: italic 8pt arial, sans-serif; 
}
</style>
</head>

<body>
<!-- ©Michel Merlin Sun 28 Feb 2010 -->
  <div><iframe id="navext" src="p0_Contents.htm"></iframe></div>
  <h1>France</h1>
  <h2>p4: Aeronautics</h2>
  <p>This is the "Aeronautics" page....</p>
  <p>(with NO border)</p>
  <address>Back-Frame Navigation Test<br> 
©Michel Merlin Feb 2010</address>
</body>
</html>

iframes bring up errors in a strict doctype, but whatever, someone who cares would make this Transitional. It works in JAWS though I’d prolly change the content to make it make more sense when listening. And I hear the “France” in the frame is heading level 4, so that also would get changed (like the other headers). But the links sound like links, and they go in the order of document source, I know when I exit the frame as I move through the page… pretty normal.

Stomme poes, I don’t see how “got only text” could happen. I did however, upon your request, register at MegaUpload and I uploaded the file (with slightly improved source formatting), Back-Frame Navigation ©Michel Merlin Feb 2010. After a couple minutes saying “The file you are trying to access is temporarily unavailable” it is now available.

Versailles, Sun 27 Jun 2010 13:14:40 +0200

I’ve got only text, nothing to click on.

Can you just throw it up on a server somewhere?

Yes I did notice that question, and didn’t go further, so I don’t know if it can be done simply enough for the solution to be really useful (I also agree with the rest of your post).

By me, it still shows me “Attachments Pending Approval”, but, even if I logout, I can download it, and the downloaded file, while named “untitled.zip”, does have the right size (3,593 Bytes) and contents (my 5 .HTM files). On SitePoint forum, inconsistencies are not only rare, but sometimes helpful :wink:

Versailles, Sun 27 Jun 2010 11:29:00 +0200

That’s not the only thing that doomed frames. They’re inaccessible, they have universal design (usability) issues. And those are just the secondary issues that web professionals look at.

So long as a user of a linear user agent can get from out of the frame to into the frame to back out again, they are not inaccessible per se. With a screen reader, framed sites are not in and of themselves unnavigatable (I’ve gone through both framed banking sites and my web-based email (lycos) in JAWS with minimal fuss).

Because Michel’s pages are all unique and are only calling the repeated stuff in frames (navigation bars) they are bookmarkable.

Now, if you have a server I don’t really see the point of Michel’s setup but I suppose it could be nice if you cannot do includes yourself. Question though, for when you want a highlighted nav tab to represent the current page… the frame doesn’t know the current page it’s in? Without seeing the code, I also can’t tell if the main page is set up in framesets or not (since the zip is not available yet)… some user agents do not support framesets, which could make the page inaccessible… but if this frame is just an iFrame, it’s doable.

Thanks to anyone who would read, try and think before answering, instead of recklessly “replying” with NIH or other [URL=“http://en.wikipedia.org/wiki/Appeal_to_tradition”]resistance to change syndromes (notice, just an example, that bookmarks, Back, Forth, with Left or Right clicks, and more, work perfect in my “right” frames - oppositely to the “wrong” frames some are blindly sticking to).

Versailles, Sat 26 Jun 2010 22:16:20 +0200

That’s what the longdesc attribute on images is supposed to be for - a link to a separate page of HTML that provides a full description of the what the image is all about.

[Back-Frame Navigation

Leaving aside for now the question in your title (CSS Background Images in Divs vs Image Elements in HTML document), I think your aim was to write only once the infos about navigation. This, while done millions times daily by myriads sites, can also be done by using frames the “right” way, as opposite to the “wrong” one that doomed frames for navigation.

I mean, putting the contents table in the main page and all the stuff pages in the frame, was so awkward that of course it backfired to death. Now by doing it the other way around (which I am calling “Back-Frame Navigation”), you put the real stuff in the main page, and the contents table in the frame, using the target=_parent attribute to get the right page. This works in all usual moves (Left-Click, Right-Click and chose New Window or New Tab, Dragging the link to another browser window), in all pages (p0 to p4, i.e. when clicking directly in the Contents Table page as well as when clicking in the frame in the 4 calling pages), and in Chrome 5 and IE6 (and probably in other browsers). I am uploading the 5 test files; download all 5 of them into the same folder, then double-click any of the 5, and try all sorts of clicks and drags.

Versailles, Sat 26 Jun 2010 19:11:20 +0200

That’s not the only thing that doomed frames. They’re inaccessible, they have universal design (usability) issues. And those are just the secondary issues that web professionals look at.

When I was a young developer, I spent a lot of time trying every possible way back, front, and sideways to build a frame based navbar. In each case, there was no way to successfully bookmark pages, and much of the functionality of the back button was destroyed as well. That’s why I pitched frame and accepted that I’d have to start learning a more advanced server side method to template and create DRY code.

[B]Back-Frame Navigation: borders[/B]

Let’s try to NOT divert too much from the real subject of our discussion: [Back-Frame Navigation and its [URL=“http://www.sitepoint.com/forums/showthread.php?threadid=676555#post4631009”]Demo. I do reply however to a few of your points this time.

See my [URL=“http://www.sitepoint.com/forums/showthread.php?t=450442&page=3#post3264441”]Thu 1 Feb 2007 13:45 GMT reply about VIM, and [URL=“http://sourceforge.net/projects/npp-plugins/files/ComparePlugin”]Notepad++ Compare about one of [URL=“http://sourceforge.net/projects/notepad-plus”]Notepad++'s [URL=“http://www.google.com/search?q=Diff+Tools”]Diff Tools.

NPPP does too (as most others): NPPP > View > Synchronize Vertical Scrolling.

I am sorry I forgot to mention mine: 1280×800px ([URL=“http://www.uniwill.com/products/mobility/223ei0/tour/main.htm”]Uniwill 223ei0](http://www.sitepoint.com/forums/showthread.php?threadid=676555#post4630551) bought Feb 2006).

I deeply agree with you on this: in all these presentation issues, what is really important is to fit the writer’s personal preferences; no way is good or bad as soon as it is easily readable by everyone, and even pleasantly by the writer.

As my test (or demo) showed as clearly as possible, there are 3 main possible borders around an IFRAME:

  1. an internal border (“navint” in my p0)
  2. an intermediate (and somewhat intrinsic) frameBorder (“on” by default in p1, p2, p3, “off” by explicit “frameBorder=0” in p4)
  3. an external border (“navbord-lime” in p2, “navbord-orange” in p3, absent in p1 and p4).

Your “border: 0” in “navext” changes nothing (the external border was already zero by default); what you did in p4 is essentially restoring the here-unwanted intermediate border (by removing the “frameBorder=0”) - which (as long as borders are concerned) defeats the demo.

Yes they were part of a demo, but a demo of Back-Frame Navigation, and accessorily of what borders can be therein. Doing it through classes or any other mean is not of 1st importance here as soon as it is clear enough to the reader of the demo, and doesn’t overshadow the subject: Back-Frame Navigation.

Versailles, Sun 27 Jun 2010 22:20:40 +0200

http://stommepoes.nl/notclickable.png
If I hadn’t hit PrtSc my cursor would look like an I cursor as when it sits over text.

The MEGAUPLOAD is still saying temporarily unavailable but I will keep refreshing it.

True, perhaps something clever could be done with z-index and an extra element to overlay the background image onto the text (with no negative indent) to achieve the effect. Just thinking aloud of course but I have always wondered about more semantic alternative content than a line or so of alt attribute text. :slight_smile:

To be fair, you can be semantic yet achieve exactly what you were asking with background images. I would have (for example) a text heading with the text itself offset using negative indents and a background image filling in the place. That way you would have something accessible (in that screen readers can see the content), it’s search friendly (in that the content exists within the headings as appropriate) and the flourish of the background component is provided just as an added aesthetic bonus (the text is there for style unavailability). Though I would only use this model for if you’re portraying an image which contains text-equivalents (such as having a custom typeface). For general images you’re best to use the IMG element as that’s what it exists for. :slight_smile:

That way you would have something accessible (in that screen readers can see the content)

But inaccessible to those with CSS on and either images off, or connection is so slow that your images don’t get around to loading.

Negative text-indent is my Moby Dick.

On-topic: orangedog was using the images for navigation elements… it’s ok to have images with alt text in navigation, but it’s also fine to take them out and let the regular anchor text do the talking and move the images to CSS (plus now you can slide the images around on :hover and :focus).

Thanks everyone that answers my question.

First of all, there is no <alt> tag in HTML or XHTML. I assume you mean the alt attribute (text equivalent) which is required for <img> tags.

If your image conveys information it should be part of the content (as an <img> or <object> tag), not a background image. Backgrounds are just styling; they don’t convey any information and thus don’t need any text equivalents.