On Mon, 14 Dec 2009 11:03:20 +0100 Hartmut Noack <zettberlin@xxxxxxxxxxx> 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@xxxxxxxxxxxxxxxxxxxx http://lists.linuxaudio.org/mailman/listinfo/linux-audio-user
