Library site, under construction- feedback please

[bobbyboulders]

Hey all,

I am currently building a library site for a college in Ireland. After some advice from the kind folks on this forum, I decided to ditch the tables and learn CSS.

So it's not finished yet but I would like as much feedback as posssible, in order to keep it moving in the right direction.

This is my first stab at CSS so any words, however harsh, are welcome, and hopefully I'll have enough time to incorporate any good ideas suggested.

The things I am most unsure about are;

1. The colour scheme. The powers that be are happy enough. They wanted something sober, easy on the eye... but I think it looks a bit washed out on some monitors.

2. The page doesn't stretch to fill the whole viewing port on some browsers. And when I use the "html, body{}" code it messes up my scalable font ems. Any suggestions?

3. I'd like for the user to be able to change the font size, (it's a good idea, no?) so I 've used ems, is this sensible?

4. The links along the side will lead to the ten main sections of the site. I would like to colour code these sections, i.e. the title of each these section will be uniquely coloured. (Clicking between the side links will demonstrate what I mean) The problem is that given the muted coulor sheme for the main navigation it's hard to pick 10 different colours that are sufficiently unique while not clashing with the main nav bar. Anybody know how to solve this?

5. I tested it on a Mac a while ago and the site blew up. It works better on Firefox now so hopefully it's not as messed up now, but I don't have access to a Mac now, but perhaps you do...

Sorry about the length of that, and I know I've asked a lot, but if anyone has any suggestions at all, be they related to the above points or not, I'd be grateful.

The webpage is being tested here http://www.patslibrary.somee.com/index.html at the mo, it's got an annoying advertisement which I think (/hope) is what seems to be moving the main content text about.

The CSS is here http://www.patslibrary.somee.com/patscssver1.css if anyone wants a gander.

Thanks.

[spufi]

In terms of the look of the site, I really like it. I have a really high resolution so the ad is actually out of the way for me. Is there some way you could move it via CSS? I think it's the only <table> tag you have, so maybe it's an option. The one thing I did notice is that you have A LOT of <div> tags. All the more so for what seems like a fairly simple layout. Is the following code going to make more sense at some point because it looks like overkill.

<div id="bannerbcg">
<div id="banner">
<div id="logo"> </div>
<!-- close logo -->
<div id="language"> <a href="#" title=" View site in Irish" >Irish Version</a>
</div>
<!-- close language -->
</div>
<!-- close banner -->
</div>
<!-- close bannerbcg -->

Another example.

<!-- close linklist -->
<div id="searchcontainer">
<div id="searchbcg">
<div id="search">
<p> Search this site: </p>

<p>&nbsp;</p>
</div>
<!-- close searchcontainer -->
</div>
<!-- close searchbcg -->
</div>
<!-- close search -->

You may also want to look into changing your horizontal menu so the spacing between the words when there is two in a link don't look so far apart.

[pmhauer]

The alignment of your main content's left margin always starts out flush against your left-hand navigation bar, but when I roll over the nav-bar, it gets properly spaced a few cm to the right. That was odd.

Really like the art-- particularly the softness and earthiness of the color tones. Just like a really ripe avocado.

[Sanim]

Really, really nice for your first shot at CSS.

[the tree]

A quick Google search for libararies shows that your competition is pretty weak so it's good to see that you've done this so well.
I'm not to sure about the way each page has a different coloured header, this might work well if more of the page changed with it.
Also, on your front page the filler text goes from brown to black to brown again, what's with that?

[Green-Beast]

Love the look. Hate the ad. Keep up the good work.

[bobbyboulders]

Ok folks, thanks a lot for the (positive) feedback.

The site has been moved onto a better server (without the ad), so if you wouldn't mind looking at it again.

The new address is...

http://www.spd.dcu.ie/testlib/newlib/libraryguide/libraryguide.html

I've added more colour changes (the links in the main text)to the different sections to match the headers as suggested.

I've also added an Exam Papers page which lets the user search our db for exam papers. It doesn't seem to work in Firefox though. The bottom 3 listboxes and submit button should be enabled after the first listbox is changed, and they do change in IE but they don't in Firefox, any general reasons for this being the case?

I am building this in a bit of a vacuum, so all feedback is greatly appreciated.

[Green-Beast]

I love it. One thing that you might want to address is the <p class="maintext"></p> I see. I would suggest applying the style to <p></p> within the appropriate div, not to <p></p> itself -- without the class. That way you can stick to a better markup.

This...

#maintext p {
Color: #5E4E31;
font: normal 1.2em verdana, geneva, arial, sans-serif;
Height: 100%;
line-height: 1.4em;
letter-spacing: normal;
word-spacing: 0.3em;
width:94%;
margin-left:20px;
z-index: 1;
}

Used with...

<div id="maintext">
<p></p>
<p></p>
<p></p>
</div>

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

Instead of the class...

.maintext {
Color: #5E4E31;
font: normal 1.2em verdana, geneva, arial, sans-serif;
Height: 100%;
line-height: 1.4em;
letter-spacing: normal;
word-spacing: 0.3em;
width:94%;
margin-left:20px;
z-index: 1;
}

Used with...

<div>
<p class="maintext"></p>
<p class="maintext"></p>
<p class="maintext"></p>
</div>

Mike

[bobbyboulders]

Cheers Green-Beast, I'll look into that. I am still getting to grips with that kind of distinction, so that's very helpful.

[speedbird]

Good advice from Green-Beast there, making use of descendant selectors - frees up the other standard tags...and helps with trouble shooting too. ;)
My offering:-

<?xml version="1.0" encoding="iso-8859-1"?>

This is called the prolog. Because of a bug in Internet Explorer putting in the prolog will also force IE into quirks mode causing much hair tearing. You can safely omit the prolog. Your code will still validate.

For XHTML, this section

<style type="text/css" media="all"> @import url(../CSS/PatsCsslibraryGuide.css);</style>
<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="screen"> @import url(../PatsCssVer1.css);</style>

Should be:-

<style type="text/css" media="all">
/*<![CDATA[*/
@import url(../CSS/PatsCsslibraryGuide.css);
/*]]>*/
</style><!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" media="print" href="
print.css" />

<style type="text/css" media="screen">
/*<![CDATA[*/
@import url(../PatsCssVer1.css);
/*]]>*/
</style>

This section:

<!-- Search Google -->

<form method="get" action="http://www.google.com/u/spd" id="searchForm">
<label for="inputField"/>Search this site:
<input type="text" size="10" id="inputField" name="q" maxlength="255" value=""/>
<input type="submit" id="button" name="sa" size="5" value="Go!"/>
<a href="http://www.google.com/"><img src="../images/poweredByGoogle.gif" alt="Google" border="0"/></a>
</form>

Should be:-

!-- Search Google -->
<form method="get" action="
http://www.google.com/u/spd" id="searchForm" name="
searchForm">
Search this site: <input type="text" size="10"
id="inputField" name="q" maxlength="255" value="
" /> <input type="submit" id="button" name="sa"
size="5" value="Go!" /> <a href="
http://www.google.com/"><img src="
../images/poweredByGoogle.gif" alt="Google"
border="0" /></a>
</form>

Gotta love that Web Developer extension on Firefox, with HTML Tidy.

I thought that there may have been some accessibility problems with the subtle colour scheme, but checking on IE with the Accessiblity Toolbar, http://www.nils.org.au/ais/ it looks fine for colour blindness, but maybe a little dicey for reduced contrast at the higher end.

Beautiful design though, congratulations. :)

[jmaresca2005]

remember to think about what you are trying to accomplish when designing. who is your audience? what is the sole purpose of the application. if this is an internal site and is to be used by students then stay with the tables. css is something you would implement for a client to stay upto date with standards. you have to think about the users and the target audience when you design. if you are consultant working on an app that will be maintained by their in house team then go with include files (headers and footes), external stle sheets, external javascript, because the client wants this site to be easily maintainable once you go into production. with this being said, think about if the projects completion is more important then you learning css at this time.