On 15 Mar, 11:49, slater...@googlemail.com wrote:
Firstly, the navigation bar (Home, About Us, Training, etc.) looks
fine on a full screen browser but when I decrease the size of the
screen the tabs roll onto the next line. Is there anyway I can make
this navbar static?
Not really. How do you fit a quart into a pint pot? If your problem
is "How do I make a big nav bar fit into a small space", then you can
either force it to always be smaller than the space, or you can cause
it to wrap / scroll / fold / spindle or mutilate in some other way.
Usability wise we could tell you how to shrink the nav bar, but that's
a bad idea. It soon becomes simply too small to be usable. So instead,
just live with it wrapping when absolutely necessary.
You can improve how it looks by not setting the position property (on
the other elements). Just leave it as the default of "static". Don't
set position unless you need to, you understand how to, you set it
consistently between siblings and you can deal with the side-effects
you're seeing here when re-sizing a page. Using position: absolute; in
particular is a recipe for pages that look great on your particular
display, but bad when re-sized.
You might also find it simpler to use a few more <divas containers,
especially if you're trying to make it work with just
position:static; Rather than a number of image blocks down the RHS,
put one <divthere and put the existing image blocks inside it. CSS
positioning works pretty well, and much more simply, when you nest
things like this. You replace tricky "alignment" problems with default
action based on containment.
As another suggestion, reduce the number of entries on it (7 is
traditional top limit) and use a second menu if necessary. Always take
a user-centred design approach: give users what they're looking for,
rather than what you think you need to offer. "Training", "Homecare"
etc. want to be on the top menu. "Contact Us", "About", "Links" and
"Home" could go on a single secondary menu; maybe beneath, maybe on
the LHS. You might have one of these on the main menu, but all three
of them is burning a lot of valuable real-estate for not much
benefit.
Breadcrumbs can be good too, as they offer many of the "upward" links
in a context-sensitive manner. Users seem to understand tree-
navigation quite easily.
Secondly, I have designed my page mainly using Firefox and everything
looks fine. In Internet Explorer though, my .png's don't show
correctly and the transparent tables are opaque.
Search on this. IE has transparency issues with PNGs.
This is my first CSS page so go easy on me
It's looking pretty good so far -- it's certainly heading in all the
right directions.
Take a look at code validity - fixing this (easy, with good tools)
makes problems of browser consistency (hard, you're on your own)
easier to solve. Choosing HTML 4.01 Strict is good, but watch out for
the XML empty tags that have crept in.
Get some better contrast between text and background! Text is
black!! Set your background colour too.
Fix the font size. Fonts go at 1em!!! (search the archives)
Use more em units rather than pixels. They encourage a "fluid
design" (good search term to look for in the archive)
Ditch the @import and the media="screen" from the stylesheet <link>.
Doing it the simple way works fine. I'd also lose the split-file CSS
and jsut do it in one. It's not a hugely complex site that needs to
look at modularising its CSS.
I'm not a fan of textured backgrounds, as they can only make reading
harder. Solid colour blocks over them (like your LHS) are good, and at
least your background has very low contrast so isn't distracting.
Read Joe Clark's excellent on-like book about usability. If you're any
sort of community project, you should take this seriously (so shoudl
we all, but you especially)
