[LAU] Under construction

[Folderol]

On Mon, 14 Dec 2009 11:03:20 +0100
Hartmut Noack <zettberlin at linuxuse.de> wrote:

> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
> 
> Hello Will,
> 
> 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.

Corrected! 

> > 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;"

Done

> 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.

Hiding the byline text until you hover over the title gives a page that
looks far more 'open' with more whitespace. I think the fact that when
you do so, the relevant text immediately appears gives a clue to the
user. I may however change the colour of the graphic to make this more
obvious.

Thanks for your detailed thoughts. All good stuff, and the test page is
already improved.

-- 
Will J Godfrey
http://www.musically.me.uk
Say you have a poem and I have a tune.
Exchange them and we can both have a poem, a tune, and a song.