help/suggestions on redesigning this

Associate
Joined
19 Jul 2006
Posts
1,847
How do i make this look better? the subject area is quite poor, its for educational work.
i took the colour scheam from the other officaial NLN site, some of the links on the bottom level dont work but thats not my problem, just the design.
TIA
Matt
 
Change the font for a start , I can hardly read it.

I think iCraig is the person for this.

Mark
 
Last edited:
dump the tables and images as links, use css & divs for the layout and to style the links. you'll also need to reconsider the background as when the content stretches to be longer than the image it flows off the bottom (in firefox). and as mrdbristol said, the font is very difficult to read.

nin9a
 
To start with tables are bad for layout, read this website to find out why tables are bad (for layout). If you have tabular data, then this is fine in a table but anything to do with the layout should be controlled with CSS.

Secondly, you are using Javascript for image hover overs. This is generally a bad idea and a much better way would be to use CSS. The following article gives a good example of how to do this; Accessible Image Tab Rollovers.

Layout images should really be in the CSS as these are not needed to display the content. Look what happens to your main page when I disable images; -

nlnhome1153910521754hs1.png


Now you have no content. Not good.

Again, you should consider that the minimum screen resolution to design for at the minute is 800 X 600. Look what happens to your main page when viewed in that resolution; -

nlnhome1153910006673yj2.png


Yes, users can scroll but users are lazy and like things easy.

If you want to make better and more structered websites, then I would look at the following websites; -

W3 Schools XHTML Tutorial
W3 Schools CSS Tutorial
HTML Dog
 
Last edited:
Mr_L pretty much summed up what I wanted to say, however the style and colours are quite nice. Try not to lose that.
 
Yes please a mock up CSS would be really usefull, never used CSS properly before and was getting a bit stuck on how to make the page in dreamweaver to apply the css to.
if you think the colours and style are ok sure. thouhg the font desperatly neads changing.
Thanks :)
 
You beauty,
Thats brilliant thanks,
would it be possible for you to quickly show me how you went about doing that.
 
Using the css that I know how to use I tried to create something that reflected what you said so you'll see in the source:

Code:
<h1>NLN QEFCE Portal</h1>
<div id="navbar">
	<ul>
		<li><a href="nln.html">Home</a></li>
		<li><a href="nln.html">Back</a></li>
	</ul>
</div>
	<div id="content">
	<h2>Subject Areas</h2>
	<div id="content-left">

I put the static image logo as a h1 image, but using a text indent so that the text doesn't show up on the screen, and from here I created the navbar on the top right using different css styles to place it. I broke the content down into "content-left" and "content-right" so that the list of links would be easier to use, using float: left and right to hold their positions.

If you haven't already had a look at www.htmldog.com in case you want to develop this yourself without dreamweaver then there is a great place to start. :)
 
Randomtom
Im looking at the making the CSS for that now if i get as far as i can will you tell me what i have missed out?
 
Back
Top Bottom