My first tableless site using CSS for styling

  Red Devil 10:33 08 Sep 06
Locked

Hi all,

Inspired by some of the work I've done on my other sites and by some of the things I've been reading on website design, I've made my first attempt at a tableless website. All the styling is done by CSS and there is no - I believe - presentational code in the HTML. The site can be found at:-

click here

The website itself is supposed to give the impression of being on an old railway station. Hence the header is styled as a station sign and is placed on a styled wooden roof canopy background. The site itself is on a green background - as these were the colours both that British Railways used in the 50s/60s and Southern Railways used in the Grouping era. The links are styled as railway destination boards and there is a pic of a steam train watermarked into the text area. So what do you think? Have a I got even remotely close to the "feel" I was trying to create?

Cheers.

  gibbs1984 13:49 08 Sep 06

On your first div id="header" you have some styling, why don't you put that in your external style sheet?

Personal I'm not sure about the top image but the rest of the site looks good to me.

Steve

  Red Devil 13:54 08 Sep 06

Hi Steve,

That's something I'm looking at doing. Cheers fot that.

  ade.h 17:09 08 Sep 06

I know someone who is very in to the preserved railway thing, so your site will certainly be passed on to him. I'll let you know what he things from a fan's perspective.

From a web design perspective, I find it a little garish; maybe you could tone down the greens a little. Colours and themes are one of the hardest parts of good web design.

Your chosen font is a bit uncomfortable to scan over in the big blocks of text. With the large quantities of text, a sans-serif font works better I think. Also your links are a bit too thin and too close together; they might look better and be easier to use if the backgrounds were a bit deeper.

Content is jumping around! Go from Latest News to Forum and you'll see what I mean.

External links: I think they should be seperate from your own navigation; positioned below for example. I was expecting a page on your site about each railway, not each railway's own site.

Now that you're using CSS, you could maybe move on to XHTML; not anywhere near as hard as you might think. At least your HTML 4.01 Trans validates, so well done for that. I didn't check your CSS files.

All in all, a good start, though!

  Red Devil 17:27 08 Sep 06

Re external links - this site is still in development and the plan is for each page to have a page on each railway with a link back to the railway's website which is what you would expect. I've already got 4 of the pages in the process of being written up. That would mean no external links in the list of links at all once the site is fully written.

Re the content jumping around - not having used CSS before for layout - btw, the CSS file can be found at click here if you want to have a look at it - is something I've not got my head around as yet. Seems to be to do with the amount of content on the text area and, once I add content to each page it should resolve itself.

Re the colour - I wanted to use a colour that was close to BR Green or SR Green but I may have a play around and try and find one less "garish" and see if it still gives the impression I want.

Re the links themselves - I could make them a little bigger and less close together but I was concerned that the list of links would be never ending as I still have plenty of railways still to add!

Re the font - I use Georgia as it's a font I like but you're not the first person to comment on my choice of font in the negative. Any suggestions on one that would be more pleasing to the eye?

Thanks for all the feedback so far.

  ade.h 17:57 08 Sep 06

I quite like Georgia as well, but it has to be used in the right context and screen quality makes a difference. I'm currently viewing your site on an old CRT as one of my TFTs is being replaced; this particular monitor doesn't display text as smoothly as I have become used to. For example, one of my websites uses Palatino, which looks nice on a good monitor, but poor on this one. Play around with them and get other people to view each font on their screens.

Your jumpy layout will not be solely down to the lack of content; it depends on what type of positioning you use and how consistent you are with it. Where possible, place common code into a site.css file and place code that is unique to each page into a seperate file, or embed it if there is only a small amount of code. If any bit of CSS is needed more than once, you can be economical with it which means quicker page loading times and less work for you.

  ade.h 18:00 08 Sep 06

I see that you have used absolute positioning for the text area, but relied on a top margin for the navigation. I would suggest adding some positioning for your navigation. Again, play around with it.

If you don't yet have any books on CSS, have a look at the Sitepoint books. click here

  Red Devil 18:13 08 Sep 06

I did have the navigation done using absolute positioning and the result is how it is now when using IE. The navigation overlaps the text area. Maybe I didn't play around enough with it but the only way I could get it to work the way I wanted was to use margins on the navigation.

I have got a book on CSS. Don't know if it's any good but it's the one I used - the Sams teach yourself CSS in 24 hours.

Cheers for the comments so far.

  ade.h 18:43 08 Sep 06

You could try variations on float or relative positioning.

  Red Devil 19:01 08 Sep 06

I'll have a read up on float and relative positioning but I thought there was a problem with IE and relative positioning. Or have I got that wrong?

  PurplePenny 23:08 08 Sep 06

I like it: I like it a lot. I like the green and it passes the colour contrast test (meaning that it is legible for low vision users) and I love the header with the old weather board background.

I also like Georgia and I, personally, find it very easy to read; but a serif font is not considered good accessibility practice as some people find it hard to read (on the other hand some dyslexics find a serif easier to read because it forms a line across the page).

You could use Georgia for the headings and a non-serif for blocks of text.

There is a problem with your use of headings: they should be used semantically, not for styling: thus the first heading should always be an h1 and any subsequent sub-headings h2; subdivisions of the h2 would be h3 and so on.

There is some argument about whether the name of the site should be the h1 on every page: those that argue this case suggest wrapping a header image in H1 tags. Others say that it is the title of the page that should be the h1 (which then leads to an argument for the case for two h1s on a page if there is also a site name header in text as opposed to a logo or banner).

You have used h3 for your page title/heading: change it to h1 then apply the appropriate styling in CSS.

You also have an h6 without any intervening h4 and h5. That too is a no-no: h6 can only be a sub heading of an h5.

This thread is now locked and can not be replied to.

Best phone camera 2016/2017: Galaxy S7 vs iPhone 7 vs Google Pixel vs HTC 10 Evo vs OnePlus 3T vs…

1995-2015: How technology has changed the world in 20 years

The Pantone Colour of the Year 2017 is Green

Super Mario Run preview | Hands-on first impressions of Super Mario Run: Mario's iPhone & iPad…