Wiki page for country - web page markup and styling now available for review

[Al Thomas]

----- Original Message ----
> From: Sijis Aviles <sijis at fedoraproject.org>
> Sent: Sun, 1 August, 2010 1:04:18
> 
> I've made  several updates to the current template using a few examples
> provided on your  website.
> 
> http://www.fedoracommunity.org/template.html.
> 
> I did  use dt tags instead of li tags for the community links.. but i
> may go to that  after all.
> 


Nice work and thanks for taking the time to look more closely at the way I've 
marked up and styled the page. I know how much time this stuff takes, I go for 
one way of doing things and then it doesn't quite work out so have to try 
another way. 


I've looked over the page and code and I hope you don't mind if I make a number 
of comments to help clarify a few things.

1. DOCTYPE
Basic decision, is it HTML4.01 or XHTML were working in? Personally I always use 



HTML4.01 as I see XHTML as a dead end, especially with HTML5 seeming to be on 
its way. I tend to go for HTML4.01 transitional, just in case someone decides to 



drop in some deprecated tags, but strict is fine by me.

2. <title> and <meta name="description"> tags
Fairly trivial, but I find it's best to get them out of the way early or they 
never get done! Although not greatly relevant to human browsers, the indexing 
machines do use them in search results.

3. Removing a few divs by using multiple classes
For example:
Could

<div class="grid_6">
<div id="site-nav">
<ul>

simply become

<ul id="site-nav" class="grid_6">

Also 

<div class="clear">&nbsp;</div>
<div class="prefix_2 grid_6">
<div class="community-sites-asia community-sites-last">

could just be

<div class="prefix_2 grid_6 clear community-sites-asia community-sites-last">

If this works then there is quite a lot of room to remove unnecessary divs.

4. Back to top
Move <img src="static/images/arrow_up.png"/> into the top-link class as a CSS 
background image in some right padding.  Ultimately these small icons could be 
placed in a single CSS sprite file which is then downloaded once and cached for 
the duration of the users visit and used across the whole site. Starting this 
practice now would make that easier later on.

5. Increase size of clickable area
The in page navigation bar has a hover effect, but is not actually a link so 
could well be confusing. The actual clickable area is only the text which is 
quite small. To make the whole area clickable I made the A element display as a 
block then styled that.

Hope that's of some help for now.

I'm pleased you've used the separated atlas image, hatched background and 
allowed the text to be marked up for the introduction paragraphs. This is now 
much more accessible than having the text as part of the image.

All the best,

Al