14 Dec
2009
14 Dec
'09
5:33 p.m.
On Mon, 14 Dec 2009 11:03:20 +0100
Hartmut Noack <zettberlin(a)linuxuse.de> wrote:
Done
-----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.…
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;" 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.