[thelist] (css) site check

Natalie Downe nat at natbat.co.uk
Wed Nov 26 05:44:34 CST 2003


Hiya, 

Its a nice start, I love the use of the grey and orange, and the stylised image
of the mountain works well as a main image.

I have put screenshots of tests in Firebird 0.6.1 and IE 5.5 (I’m at work so
that’s all I have here) at:

http://code.natbat.co.uk/screenshots/mountainTop_Firebird-0.6.1.bmp
http://code.natbat.co.uk/screenshots/mountainTop_IE-5.5.bmp

There are just a few points to notice perhaps, you may observe the background in
the screenshots to be a different colour to what you expected (ie=pink,
firebird=blue) this is due to the fact that I have the default background colour
 in the browsers set to something other than white. This can be neutralised by
setting a background colour of white on the body tag.

A quick thing to mention perhaps is your use of the span tag, particularly in
the  comment form:

	<span class="formText">adres</span>	
	<br />
	<input type="text" name="foo" value="">
	<br />

perhaps a better way to approach this issue would be to use a label tag
instead?, for example:

<div>
<label for="comment">comment:</label>
<input type="text" name="comment" id="comment" value="" />
</div>

The label tag then gives meaning to the text and connects it directly to the
input box. This has more than accessibility impact too, it can make the form
more usable as when the label is clicked on the related input box / radio box /
text area etc is selected.

The label tag can be styled like everything else using CSS, see the following
article in a list apart for more tips on styling forms:
  http://www.alistapart.com/articles/practicalcss/

One last thing and then ill stop i promise ;)

Again relating to the use of spans ... you do not need to put spans around your
navigation links:

<div id="navContainer">
	<span class="navLink"><a class="nav" href="#">diary</a></span>
	<span class="navLink"><a class="nav" href="#">archives</a></span>
	<span class="navLink"><a class="nav" href="#">contact me</a></span>
	<span class="navLink"><a class="nav" href="#">about this site</a></span>
</div>

As far as I can see you don't use either the id 'navLink' or the class 'nav'
anywhere else in the page, you could quite easily reduce the following to: 

<div id="navContainer">
	<a href="#">diary</a>
	<a href="#">archives</a>
	<a href="#">contact me</a>
	<a href="#">about this site</a>
</div>

and then any styles needed to the following selector:

div#navContainer a {
    ...
}


Kind Regards

Natalie x
-- 
http://www.natbat.co.uk/



Quoting Jellle Desramaults <jelle at chong.be>:

> Hey list, 
> 
> <blabla>
> My name is Jelle Desramaults, i'm a belgian webdesigner and new to the list,
> nice to be here.
> 
> i"ll start off with a bit of a selfish post, 
> </blabla>
> 
> iv'e set up my basic css layout on : 
> http://www.chong.be/mountaintop/index2.html
> 
> first try on the non-table approach
> 
> my setup is winXP, IE 6.0, opera 7.23, mozilla 1.5 
> 
> hopefully my css stands strong in the face of older versions :)
> 
> 
> 
> tia,
> 
> 
> <tip>
> 
> lotsa possibilities  for cross browser & cross platform site testing,
> 
> http://www.vmware.com/products/desktop/ws_features.html
> 
> "VMware Workstation allows us to simultaneously run several operating systems
> on a single PC. The ability to handle multiple functions ... blabla"
> 
> 
> </tip>
> 
> Jelle   Desramaults
> http://www.chong.be
> --
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
> 


More information about the thelist mailing list