<div dir="ltr">Here is one resource that might help you get up to speed on css layout:<div><a href="http://learnlayout.com/">http://learnlayout.com/</a><br></div><div><br></div><div>I used to like image maps a too, but sadly (or happily) the web platform has left them behind and has a bunch of options for laying out interesting sites for a wide variety of user and device capabilities.</div><div><br></div><div>Personally, I would work this problem in several stages. </div><div><br></div><div>1: Start with a blank page and mock everything up in simple html and content only with no images. Use paragraphs <p>, unordered lists <ul>, links <a> and headers <h1> - <h7> as needed. This gives you accessibility, but not much design. </div><div><br></div><div>2: Use block-level elements to group your content into meaningful sections as necessary. Use semantic markup like <nav>, <header>, <footer>, <section>, and <aside> to keep your content organized logically. </div><div><br></div><div>3: Use CSS to handle layout, position and alignment of your major content groups and to style content within these groups.</div><div><br></div><div>4: Use background images (without text) to visually enhance the page for those who are fortunate enough to be able to enjoy visual elements of a page, and without leaving out people who are not. </div><div><br></div><div>5: Consider using interesting, but easy to read, fonts to achieve the text styling you want without breaking accessibility. </div><div><br></div><div>6: Add images <img> as needed to enhance your content, and don't forget the alt attribute (alt="alt text here").</div><div><br></div><div>Hope this helps!</div><div><br></div><div>Cheers,</div><div>Bill Barron</div><div><br></div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Tue, Feb 23, 2016 at 1:09 PM, <span dir="ltr"><<a href="mailto:darxus@chaosreigns.com" target="_blank">darxus@chaosreigns.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">I have this page: <a href="http://www.chaosreigns.com/" rel="noreferrer" target="_blank">http://www.chaosreigns.com/</a><br>
It's one big imagemap. My problem is handling the text in the image that<br>
is not links (usability for the blind / text browsers). The obvious<br>
solution seems like it would be areas with alt attributes and no href<br>
attribute. The spec says I can have areas without hrefs, but:<br>
<br>
"If the area element has no href attribute, then the area represented by<br>
the element cannot be selected, and the alt attribute must be omitted."<br>
<a href="https://html.spec.whatwg.org/#the-area-element" rel="noreferrer" target="_blank">https://html.spec.whatwg.org/#the-area-element</a><br>
<br>
Could the spec be changed, to allow an area with an alt and no href?<br>
<br>
<br>
I've also tried it with image slicing and a table:<br>
<a href="http://www.chaosreigns.com/index.slice.html" rel="noreferrer" target="_blank">http://www.chaosreigns.com/index.slice.html</a><br>
It works, but seems more problematic (chrome glitches while zooming, at<br>
least). And everybody says tables are terrible for layout, but I haven't<br>
figured out how to do this without tables:<br>
<br>
<Darxus> Is there some kind of guide to do this with a sliced image, and<br>
CSS instead of a table?<br>
<preaction> no, since that's really not the point of CSS<br>
- #css on freenode (which I realize is far from authoritative)<br>
<br>
<br>
Also, the links to the web page for this mailing list, both from its own<br>
welcome message, and <a href="https://about.validator.nu/#reporting-bugs" rel="noreferrer" target="_blank">https://about.validator.nu/#reporting-bugs</a> are broken.<br>
A usable URL is <a href="https://whatwg.org/mailing-list" rel="noreferrer" target="_blank">https://whatwg.org/mailing-list</a><br>
<br>
On 02/21, <a href="mailto:help-request@lists.whatwg.org">help-request@lists.whatwg.org</a> wrote:<br>
> Welcome to the <a href="mailto:Help@lists.whatwg.org">Help@lists.whatwg.org</a> mailing list! You can feel free<br>
...<br>
> <a href="http://lists.whatwg.org/listinfo.cgi/help-whatwg.org" rel="noreferrer" target="_blank">http://lists.whatwg.org/listinfo.cgi/help-whatwg.org</a><br>
_______________________________________________<br>
Help mailing list<br>
<a href="mailto:Help@lists.whatwg.org">Help@lists.whatwg.org</a><br>
<a href="http://lists.whatwg.org/listinfo.cgi/help-whatwg.org" rel="noreferrer" target="_blank">http://lists.whatwg.org/listinfo.cgi/help-whatwg.org</a><br>
</blockquote></div><br></div>