named anchor?

@CarolWJan 12.2005

I’ve heard of something called a “named anchor” – is that restricted to tables? I’m having a bit of trouble with captions for pictures, using CSS, which I’m trying to stick to exclusively.

Waaah; I don’t want to have a table on my site!

I’ve finished one project (consistency, preparation for my next project – make the layout better).

Learning “float” – but am only halfway there, if that!

To see what I want to get under control, try my home page, caption for the picture of me with dog. In IE, I have trouble; in Netscape, FireFox and my favorite, and default, Opera, I can snuggle the caption up to the image – but if I do that, then in IE, the caption runs to the left side of the page, and doesn’t go down below the image. I have a class that aligns the caption to the right side of the page, and I’m not sure that’s how I should do it. Again, if you follow me! (I hardly follow myself!)

~~[url]~~http://www.islandnet.com/~cwhitney/[/url]

my power is browning out – big winds – I’ll rush to send this before my computer gives up.

Wed, 12 Jan 2005 14:41:37 (PST)

to post a comment

CSS

7 Comments(s) _↴

@Robert_WellockJan 13.2005 — #Are you wanting a http://www.w3.org/TR/REC-html40/intro/intro.html#h-2.1.2 # neither are restricted to tables maybe you mean CSS classes: <a href="" class="skip">

Normally I'd place both the image and caption within an aligned <div> thus they'll stay sitting together.

@KDLAJan 13.2005 — #I have found this approach very useful:

<div style="float: right; width: 50px; padding: 4px;">

<img src="photo.jpg" width="50px" height="50px" alt="photo"/>

<div align="center"><p style="margin-top: .5em;">Text for caption.</p>

</div>

</div>

This works for Firefox, IE, and Netscape.

You can increase/decrease the margins and padding as needed.

Good Luck -

@CarolWauthorJan 14.2005 — #Hi Robert,

Thanks for your reply!

[i]Originally posted by Robert Wellock [/i]

[B]Are you wanting a http://www.w3.org/TR/REC-html40/intro/intro.html#h-2.1.2 # neither are restricted to tables maybe you mean CSS classes: <a href="" class="skip">

Normally I'd place both the image and caption within an aligned <div> thus they'll stay sitting together. [/B][/QUOTE]

I'll look carefully at how I have the <div> set up. I know I've done something wrong there. When I tried to fix it, though, I failed <g>. I'm just too new to all of this - don't yet know what I'm doing <g>.

Very briefly, I did the following:

First, I went to the w3c site you gave, and it looks really helpful for me; it explains things I don't yet know about, so I'll study there. That should help!

Next, I went to your web site; looks really interesting! I'll take a closer look after a time. I won't myself try to work with XHTML for some time to come <g>. For now, I'm sticking to HTML and CSS, in order to learn the ropes as thoroughly as I can.

I must say, though, I am just thrilled that I made what seems to be a useful decision; that is, I stopped using WYSIWIG tools, because I knew if I wanted to understand or control my pages, I'd have to write the code myself. But the WYSIWYG tools did give me a start of sorts. (The Geocities ones are about the worst I have seen in my life, and the results they produce are sickening!)

Seems to me highly worth taking the study time!

Also, I find your comments helpful - thanks!

Fri, 14 Jan 2005 10:56:41 (PST)

@CarolWauthorJan 14.2005 — #Dear KDLA,

I see you are newer to the forums than I am, but wow; your contribution is great!

[i]Originally posted by KDLA [/i]

[B]I have found this approach very useful:

<div style="float: right; width: 50px; padding: 4px;">

<img src="photo.jpg" width="50px" height="50px" alt="photo"/>

<div align="center"><p style="margin-top: .5em;">Text for caption.</p>

</div>

</div>

This works for Firefox, IE, and Netscape.

You can increase/decrease the margins and padding as needed.

Good Luck - [/B][/QUOTE]

Oh, lovely, lovely! I'll play with your suggestions; sounds very much like exactly the sort of thing I need! Combining that with following Robert's leads should take me another step up in my studies!

My site will remain unregistered and closed to the public till I reach whatever stage of development satisfies me for opening, whatever that is!

Between you and Robert, I have material for at least a week's study! Maybe lots more. It still astounds me that I can make a web page at all. I couldn't do it without your help, people. Which is why I link to HTML Goodies and these forums on my site (webinfo page).

Incidentally, I am a rather silly person, and get a huge charge out of ridiculous-looking stuff, so I put up illustrations of two of my errors on my site.

You can find them from my tests page; they're called something like "headers that follow you like a dog," and my new one, resulting from my current question, "collapsing boxes" (visible only in Netscape or Firefox - bad layout visible in IE, and no problems visible in Opera, which must go into Quirks mode or something like that when it encounters my ignorances <g>).

http://www.islandnet.com/~cwhitney/tests.htm

But, then, many of you will have seen such stuff while you learned; who knows! (Some learn without making such errors.)

Thanks, KDLA! I'm very grateful!

Fri, 14 Jan 2005 11:07:29 (PST)

@tonyhJan 14.2005 — #If your creating a gallery for thumbnails I don't understand why tables are taboo. Tables are designed to show organized information, thus they should apply to images as well. For as long as the images in question are not meant for layout.

The question comes becomes are the headers and footers really necessary for accessibility?

Otherwise using floated divs as a container works fine as posted by KDLA.

Or something like this:

<div style="float:left">

<img src="#" alt="image" />< /br>

<span>Your comment here.</span>

</div>

Should work as well, I may have the syntax slightly wrong, but something like that should work.

@CarolWauthorJan 14.2005 — #Dear Tonyh,

[i]Originally posted by tonyh [/i]

[B]If your creating a gallery for thumbnails I don't understand why tables are taboo. Tables are designed to show organized information, thus they should apply to images as well. For as long as the images in question are not meant for layout.

The question comes becomes are the headers and footers really necessary for accessibility?

Otherwise using floated divs as a container works fine as posted by KDLA.

Or something like this:

<div style="float:left">

<img src="#" alt="image" />< /br>

<span>Your comment here.</span>

</div>

Should work as well, I may have the syntax slightly wrong, but something like that should work. [/B][/QUOTE]

I'm not sure why the suggestion to use CSS instead of tables, though I understand there are several advantages to the CSS approach. It does seem a sensible idea that tables would display organized information. My understanding is that they slow things down loading, and might be difficult to manipulate or control. Whether that applies to a user resizing a browser window, I have no idea! But last night, for the first time <duhh!> I had a look at my site and resized some windows. Interesting. Till then, I'd only looked at the pages with my browser windows maximized.

I'm not sure I understand your remark on headers and footers, but maybe I do; I think I just caught on. Are you saying they're extraneous for looking at a larger version of a photo? If so, I wholeheartedly agree with that <g>.

But I'm a huge photo buff, and also, I always like extra information with photos, so I handled the thing differently; that is, I used the large-version of the photo as an excuse to "add an extra page" to my site, concerning the larger version photo displayed (if you follow me).

Is that bad web-design? Probably it's not what people expect, and maybe I should say something about that on the thumbnails pages!

On the other hand, the extra elements in the larger-photo-version page probably don't slow things down too much (I hope?) or take too many system resources (more than a user might expect within reason), when compared with the loading of a larger photo. The extra elements, then, are, as you seem to be pointing out, the graphic headers and footers; it's not the text that would be a problem. But since all the headers and footers are the same image, page-to-page within a gallery, loading time for all pages after the first in a gallery would be reduced by caching? Am I making any sense?

(Geez, for an un-computer person like me, that's amazing language!)

Fri, 14 Jan 2005 11:42:32 (PST)

@tonyhJan 15.2005 — #[i]Originally posted by CarolW [/i]

I'm not sure I understand your remark on headers and footers, but maybe I do; I think I just caught on. Are you saying they're extraneous for looking at a larger version of a photo? If so, I wholeheartedly agree with that <g>.[/QUOTE]
I think this is a miscommunication on my part. I'm not entirely sure what it is that you are trying to find a solution for. I initially thought that you were trying to create an image gallery, then I took a look at your site and re-read your first post.

Let me clarify - when generating an accessible table [URL=http://www.w3schools.com/tags/tag_thead.asp]headers[/URL] are required, it's not clear on [URL=http://www.w3schools.com/tags/tag_tfoot.asp]footers[/URL]:
[i]excerpt of Section 508[/i]

g. Row and column headers shall be identified for data tables.

h. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.[/QUOTE]
When looking at your site and reading your first post, I thought you were asking how to align your captions with your images. And when I say [URL=http://www.w3schools.com/tags/tag_caption.asp]caption[/URL], I mean the descriptive text you have below the image. That is why I provided the syntax above. Looking at your code I see you are already utilizing both 'alt' and 'title' within the img tag, which is good, so is the caption below the image truly necessary? Obviously, it doesn't hurt, except screen readers and text based browsers will present the same line twice. The first for your 'alt' and then again for your caption. But, unless the user actually mouses over the image the title is never seen. So, ultimately it's your choice.

Then again, we may not have a choice after all:
[i]excerpt of Section 508[/i]

a. A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

k. text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.[/QUOTE]

Also in #CSS _↴

add css code inside while loop <tr>Z-index & CSS DropDown affecting Content Div Context menu not on Top

Success!

Help @CarolW spread the word by sharing this article on Twitter...

Tweet This

named anchor?

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

named anchor?

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴