[nzlug] CSS/XHTML experiments: looking for tidier solutions...

[Simon Bridge]

I've been having lots of fun changing my websites over to a different
standard. The XHTML/CSS path is especiallpy neat because it lets me use
effects that I previously thought needed javascript.

I've been trying out different link effects - I got all my ideas to work
"OK" but I think some things need tidying up.

In particular - I've done the thing with a link-bar, and deployed it.
http://www.hbclinux.net.nz/hbclug.html

I was reading that it is a bad idea to put text information in graphics
- which is what I was doing for graphical buttons. The feedback liked
the menu bar I had before, so I looked for a way to impliment it by
writing the text over the bar. This has a huge advantage in that the png
files to draw the bar are now only three, and very small.

The things I've noticed:
1. If the window size is too small, it gets ugly - some way of fixing
the dimensions so the bar runs off the side of the browser window would
fix that. I could put it in a table...

(I am still using tables for layout - because they are conceptually easy
- though I have seen how to get the same effect without. Is there an
advantage to avoiding tables?)

2. hovering the mouse nudges all the other entries to the right (to
accommodate the inset-border). I'd like to keep the inset-on-hover
effect without the nudge.

3. each menu item is centered in it's own set-width space. This means
that the space *between* items varies. I'd prefer te fix the space
between. However - I'd settle for having a seperator "|" between them.
But if I add one, the text shunts down a line.

Here's the CSS:
<code>
/* Horizontal Menu Bar for HBCLUG*/
ul.tbar {float:left; width:80%; padding:3px; margin:0px;
	list-style-type:none; background-image:url(images/bars/bar-back.png); 
	background-repeat:repeat-x}
ul.tbar a {float:left; display:block; width:128px; height:18px; 
	padding:2px; text-align:center;
	text-decoration:none; color:darkslategrey; 
	background-color:none; border:none; margin:2px;}
ul.tbar a:hover {color:moccasin; background-color:darkslategrey;
	border:1px; border-style:inset;}
ul.tbar li {display:inline;}
</code>

Here's the xhtml:
<code>
<img style="float:left" src="images/bars/bar-left.png" />
<ul class="tbar">

<li><a href="hbclinux.html" title="Hibiscus Coast Linux Support
Services">Support</a></li>
<li><a href="hbclug-links.html" title="Useful references to get you
started">Links</a></li>
<li><a href="mailto:<obfusticated email>"
  title="e-mail me for free registration">Join</a></li>
<li><a href="opensuse.html" title="openSUSE Post-install
tips">openSUSE</a></li>
<li><a href="ubuntu.html" title="Ubuntu Post-install
tips">Ubuntu</a></li>
</ul>
<img src="images/bars/bar-right.png" />
</code>

I've had a look at other websites to see how they do it, and it seems
that they all use javascript.

I have two experiments concerning fancy links and <sigh> forms.
http://homepages.ihug.co.nz/~corwin/form.html
http://homepages.ihug.co.nz/~corwin/links.html

My homepage has no access to CGI, but I read that a mailto can be used
in a form if it is handled properly. As you can see, the form does not
work right. It may be that I just have to host the form on a page that
does allow me CGI.

The links test mostly works.
The "menu" links I'd like to be able to have the border go to two pixels
on hover - related to the main question above.

The opac link is perfect.

The nav link actually does everything I want - but it works by swapping
link backgrounds, and will only display at all if I write some invisible
text between the anchor tags.

html is:
<a class="nav" href="#test2" style=""><span>.      .</span></a> nav<br>

css is:
a.nav:link {background:url(images/bullet.png);
background-repeat:no-repeat; 
	font-size:50px;	text-decoration:none; border:none}
a.nav:visited {background:url(images/bullet.png);
background-repeat:no-repeat; 
	font-size:50px;	text-decoration:none; border:none}
a.nav:active {background:url(images/bullet.png);
background-repeat:no-repeat;
	font-size:50px;	text-decoration:none; border:none}
a.nav:hover {background:url(images/bullet-u.png);
background-repeat:no-repeat; 
	font-size:50px;	text-decoration:none; border:none}
a.nav span {filter:alpha(opacity=00); opacity:0.0;}

(I should probably just use "visibility:hidden" instead of opacity:0.0.)

The special link kinda works - it uses visible/invisible attributes and
position relative to draw the distorted image over the original. Trouble
is, just try approaching the image from the top: see? The hover dosn't
activate until close to the bottom of the image. This appears associated
with the text size... I could define the text size at 50px for the
image?

html is:
<div class="norm"><img src="images/bullet.png" /></div>
<div class="look"><a href="#test3"><img src="images/bullet-w.png" /></a>
special</div>

css is:
div.norm {position:relative; z-index:1;}
div.look {position:relative; top:-50px; z-index:2}
div.look a:link img { border:none; visibility:hidden;}
div.look a:visited img {border:none; visibility:hidden;}
div.look a:active img {border:none; visibility:visible;}
div.look a:hover img {border:none; visibility:visible;}

... you can see why I like this one.

Which leaves only a couple of niggles... 

how to put a (graphical) border around the pale-yellow area? Like a
picture frame or a shadow? Most people actually draw two whole
backgrounds or put the border-bits in a table.

how to get fully opaque text on a semi-opaque background.

I am certain that these have standard, elegant, solutions - but I cannot
seem to find them.