[LAU] Under construction

[Hartmut Noack]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Hello Will,

Folderol schrieb:
> Some sleepless nights, and grotty weather finally pushed me into
> thinking about redesigning my website.
> 
> I have a trial page up that I would be grateful if some of you would
> look at with different browsers. Because of the way it uses javascript I
> suspect there may be problems with text readers - but again I would
> like to know if there are.

I have checked the site with js disabeled and it is still usable and
looks OK. Unfortuantely it is not that good without css. With styles
disabeled the tracks are not visible anymore.




> You should see a dark blue background with some pale yellow text at
> the top, followed by 4 lines of buttons. A title, two downloads and a
> play.
> 
> Hovering over the title should display some text underneath, that
> should be clear of this button, and the one below.

It works so far but you break the XHTML-Rules with the code:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.musically.me.uk%2Ftestmanager.html

and the errors are not needed here at all.You can get the same page
rendered with perfectly valid code:

body bgcolor="#000080"

this is not a big issue, simply replace bgcolor="#000080" with
style="background-color:#000080;"

this looks exactly the same and helps to make a more modern site.


A much bigger problem is this:

<div id="title">
...
<div id="title">

A value you give for id must be unique inside a document. Apart from
being bad coding this multiple use of "title" for id can indeed cause
real problems for apps using DOM to find elements on your site e.g.
AJAX-stuff etc.

I know that the hover-show-hidden-text effect on the page only works in
all given browsers, if you use id to point to the elements, you want to
hide/show but you can easily use id title just one time to enclose
multiple buttons that you want to show via span:hover. LIke this:

<div id="homenavig">
<a href="progs.html" style="text-decoration:none;" >Program  <span
class="tipp" style="text-decoration:none; font-size:12px;">
<strong>hidden text to show...</strong>
               </span></a>
<br />
<a href="inst.html" style="text-decoration:none;" >Installation <span
class="tipp" style="text-decoration:none; font-size:12px;">
<strong>hidden text to show.</strong>
               </span> </a>
<br />
<a href="basis.html" style="text-decoration:none;" >Third
<span class="tipp" style="text-decoration:none; font-size:12px;">
<strong>more hidden text to show.</strong>
               </span>
</a>
</div>

This one is perfectly valid XHTML, works in any browser and shows
tooltipps right to links as the link is hover.
It uses this CSS:

	#homenavig {
   font-weight:bolder;
   }									
							
	#homenavig  a:hover span.tipp {
		position: absolute;
		top: 125px;
		left:330px;
		width: 370px;
		padding: 2px 10px 2px 4px;
      		border-top: 1px solid #696969;
		border-right: 4px solid black;
		border-bottom: 3px solid black;
		border-left: 1px solid #696969;
		color: black;
		background-color:white;
		display: block;	
         }						

	#homenavig a span.tipp {
		display: none;
    		}


BTW: I dont think, that the hiding of the captions is needed and I would
not recommend it. Also: the frames for the track names make them look
like buttons that can be pressed to do something. Such design should be
used for elements like links only, that really do so.Otherwise you risk
to distract/disappoint the user for no reason.


best regs

HZN

> 
> Hovering over the download links should make their centres turn pale
> yellow and display 'ogg' and 'mp3' respectively.
> 
> Hovering over the play should make it's centre turn pale yellow
> 
> Clicking on the downloads should offer the respective file type for
> download.
> 
> Clicking on play should make it turn into the pause icon and start
> playing the track (via flash).
> 
> The pause button should turn back into play when the track finishes or
> if another track is selected.
> 
> Almost forgot! The url is:
> 
> http://www.musically.me.uk/testmanager.html
> 

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.9 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org

iEYEARECAAYFAksmDWgACgkQ1Aecwva1SWNEvgCgjo3LVErhzhnPsEHo+luXApIo
9ZgAmgK0BLWbWdcBhkUyo/D/MNHNPi08
=ywbB
-----END PGP SIGNATURE-----