Re: [LAU] Under construction

On Mon, 14 Dec 2009 11:03:20 +0100
Hartmut Noack <zettberlin@email-addr-hidden> 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.
_______________________________________________
Linux-audio-user mailing list
Linux-audio-user@email-addr-hidden
http://lists.linuxaudio.org/mailman/listinfo/linux-audio-user