CSS Layout Site Check

[MrBelfry]

Hey there

ig you've nothing better to do over the holiday period the please come and criticise my site. This is the first time I've ever attempted a total page layout using CSS and NOT tables and I would some of your excellent opinions. I've tested it using winxp, ie6 and opera and mozilla on my home pc (at 1024px) amd am particular interested in how it ports to 'nix or macs.

Thanks in advance: url is

http://www.mrbelfry.co.uk

MrBelfry

 

[philote]

Looks good. I checked it on Mozilla 1.5/WinXP @ 1024x768 and Mozilla 1.2.1/Linux(RH9) @ 800x600.

 

[ChrisHunt]

Looks OK on Windoze IE5.5 (I know... I know...) except that the "Contact" and "Email Me" links are slightly displaced to the right, meaning that the dotted line at the bottom wraps round to the following line. I think it would look better anyway if they appeared in the main menu bar (actually, just put in the "Contact" link, it's not necessary to have an email in there as well)

Otherwise, I think you rather over-use those dotted lines and underlines - but otherwise a good, if rather content-free at this stage, site.

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[wbochar]

Arounf the Q and A you might want to use a bit more padding and maybe a border.

The smaller sidebar text it way too small. People with large monitors will be squinting too much.

You also might want to try out the Full Justification option on your paragraphs

Your menu bar at the top of the page might benefit from using some CSS that takes advantage of the hover states in the <A HREFS>.

#tabnav
{
height: 20px;
margin: 0;
padding-left: 0px;
align-text:center;
}

#tabnav li
{
margin: 0;
padding: 1;
display: inline;
list-style-type: none;
}


#tabnav a:link, #tabnav a:visited
{
float: right;
background: #B3CED4;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin: 1px;
border: 1px solid #016F4A;
text-decoration: none;
color: #016F4A;
}


#tabnav a:link.active, #tabnav a:visited.active
{
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}


#tabnav a:hover
{
background: #fff;
}


--------------------

HTML below

<ul id=&quot;tabnav&quot;>
<li><A HREF=&quot;#&quot;>Button1</a></li>
<li><A HREF=&quot;#&quot;>Button2</a></li>
<li><A HREF=&quot;#&quot;>Button3</a></li>
<li><A HREF=&quot;#&quot;>Button4</a></li>
<li><A HREF=&quot;#&quot;>Button5</a></li>
</ul>


---------------------


Try that segment out and experiment. Enjoy

wbochar