[sword-devel] Re: OSIS Web tool -Side bar

[Don A. Elbourne Jr.]

I worked a bit on the 3 divs of the left side bar this morning.

1. Search box - I did not really style this yet, but I tweaked the HTML a
bit by labeling each form with the more symanticlly rich <ledgand> tag
instead of just a <p>. I also added a title atribute to each of the buttons.
In most browsers this will show up as a tool tip.

2. External Links -  This is the section formerly known as "Tools and
Things." I took the liberty of changing the title as suggested by Andrew.
Troy, if you object, we can change it back. And since these are different
kinds of links than all the other links, I gave them a different look,
somewhat akin to the cnn.com sidebar. I added the title atrabute to these
links as well.

3. OSIS Library - I changed the markup here a bit. Instead of placing an
image tag inside of each list item, I gave it a class name, either "open" or
"closed." (Is there a more conventional designation?)  I then set the icons
as background images. I created an arrow for the children list items. Giving
each link a display:block allows the icon and the link itself to be
clickable. This is important for accessibility. A 10X10px icon is hard to
click on for some users. It would also be good to add title tags for these
links as well. I did not do it here in the mock-up.


I also gave each of these divs a unique ID. This ought to help in
organization.

Here is the result so far:
http://elbourne.org/sword/osisweb/sidebar.html

I have not taken the time to make changes to the jsp files that generate the
data yet. I'm only working with a mockup static page at the moment.

That's all I have time for this morning. Please let me know what you think.

by grace alone,

Don A. Elbourne Jr.
http://elbourne.org