cpmgroup.co.uk/newtemplate/test.asp

Gup · #1 (**permalink**) Jun 16th, 2006, 10:51

I am nearly done converting this site to a tableless layout but am stuck on the left navigation menu. Theres something missing but cant think of what. Anyone Got any ideas? I know not all of its finished but i know what im goin to do with the rest of the design.

new design: http://www.cpmgroup.co.uk/newtemplate/test.asp

Old design : http://www.cpmgroup.co.uk/

spinal007 · #2 (**permalink**) Jun 16th, 2006, 11:00

Doesn't look right in Firefox, the right column is mis-behaving...

I won't even start on why you shouldn't use images for navigation.
However, I've learnt a nice trick if you still want to.

Gup · #3 (**permalink**) Jun 16th, 2006, 11:01

Whats happens in Firefox?

Whats the trick?

spinal007 · #4 (**permalink**) Jun 16th, 2006, 13:41

Quote:

Originally Posted by Gup

Whats happens in Firefox?

Download Firefox and check it out...

Quote:

Originally Posted by Gup

Whats the trick?

1. Build a standard UL menu
2. Move the text out of sight
3. Apply a background image that has both the the idle and hover images in one.
4. on hover, move the background image

HTML:

Code: Select all

<ul id="nav-main">
<li id="nav-main-about"><a href="#">About</a></li>
<li id="nav-main-downloads"><a href="#">Downloads</a></li>
<li id="nav-main-tutorials"><a href="#">Tutorials</a></li>
<li id="nav-main-contact"><a href="#">Contact</a></li>
</ul>

CSS:

Code: Select all

#nav-main{ background: #FFFFFF no-repeat 0 100%; list-style-type: none; padding-bottom: 38px; }
#nav-main li { margin: 0; }
#nav-main li a { display: block; height: 23px; overflow: hidden; text-indent: -9999px; width: 184px; }
#nav-main-about a { background: url(about.jpg) no-repeat 0 0; }
#nav-main-downloads a { background: url(downloads.jpg) no-repeat 0 0; }
#nav-main-tutorials a { background: url(tutorials.jpg) no-repeat 0 0; }
#nav-main-contact a { background: url(contact.jpg) no-repeat 0 0; }
#nav-main-about a:hover, #nav-main-about a:focus, #nav-main-about a:active, #nav-main-downloads a:hover, #nav-main-downloads a:focus, #nav-main-downloads a:active, #nav-main-tutorials a:hover, #nav-main-tutorials a:focus, #nav-main-tutorials a:active, #nav-main-contact a:hover, #nav-main-contact a:focus, #nav-main-contact a:active { background-position: -280px 0; }

Gup · #5 (**permalink**) Jun 16th, 2006, 14:05

thanks for that spinal.

im concerned at this point with the overall design/look of the site.

any ideas/criticism?

i will be change the horizontal nav bar some time soon.

Checked in firefox and there doesnt seem to be that much wrong with it.

spinal007 · #6 (**permalink**) Jun 16th, 2006, 17:22

the text on the right column was about 40 pixels away from the left border of the container......

.....yep, still is.

sypher · #7 (**permalink**) Jun 16th, 2006, 19:42

http://www.cpmgroup.co.uk/ is alot better than the other.

uqwebdesign · #8 (**permalink**) Jun 16th, 2006, 22:34

I think the old site looks nice, why not just try to replicate the look of that one exactly? You don't need to change it just because you're going tableless. I would recommend making the left menu have it's colour be visible all the way to the bottom of the page though.

Get rid of the image link buttons too as has already been mentioned

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Anyone want to test this for me?	split-visionz	Webforumz Cafe	22	Jul 10th, 2007 08:54
IE6 Test	JacobHaug	Web Page Design	4	Feb 5th, 2007 21:55

		Webforumz.com > Main Forums > Design Your Website > Free Web Site Critique
cpmgroup.co.uk/newtemplate/test.asp