Opinions on these two designs please

Scam · 19 Mar 2006 at 14:35

http://touchlinetactics.2m2l.net/tt-01.png <dead>

I was getting very stressed and decided to use this site as an inspiration. I think it shows far too much (and could be classed as a rip? :confused:

) Thoughts?

OR

http://touchlinetactics.2m2l.net/tt-02.png

Quite pleased with this one. Still needs more work (like filling out the space to the right of the photo). But i like the colours. There will be no space at the top, and the background will stretch horizontally.

Opinions please!

Spike_UK · 19 Mar 2006 at 14:43

I prefer the second. The first isn't too far from your inspiration, but the second is original.

Augmented · 19 Mar 2006 at 14:59

Yes, go with the second. The first is too much of a clone.

The background suggests the idea of the touchline, while the first doesn't really make use of it. I'd make the navigation text smaller; not a great fan of the oversized buttons.

Scam · 19 Mar 2006 at 16:02

Augmented said:
I'd make the navigation text smaller; not a great fan of the oversized buttons.

Yeah i was a bit unsure about that.

Updated: http://touchlinetactics.2m2l.net/tt-02.png

Better, yes?

I still think its a bit sparse on the right of the photo, but i'm not really sure what i could put there. I also realised i had added slight noise (in PS) to the grey background, thinking i'd use a repeated background/section of it. Thats not gonna work if i'm repeating the stripe though is it. Any work-arounds? Otherwise i'll just stick with the flat colour grey.

zetec452 · 19 Mar 2006 at 17:03

Number two wins it for me. I like the design.

Scam · 19 Mar 2006 at 18:52

Thanks guys.

As i kinda thought i might, i'm struggling with the CSS for the navigation.

As they're inline objects does that mean i cant set the height?

http://touchlinetactics.2m2l.net/unlive.html

(Borders on the nav just for reference)

CSS:

Code:

#navigation {
	text-align: right;
	margin-bottom: 10px;
	width: 720px;
	height: 65px;
	border: 1px solid #4f4f4f;
	background: transparent url('img/nav-bg.gif') repeat-x scroll top;
	}
	
#navlist li {
	font-size: 14px;
	font-weight: bold;
	display: inline;
	list-style-type: none;
	padding-right: 20px;
	border: 1px solid #4f4f4f;
	}
	
#navlist li a { 
	color: #4f4f4f;
	text-decoration: none;
	}
	
#navlist li a:link { color: #4f4f4f;}
#navlist li a:visited { color: #4f4f4f;}
#navlist li a:hover { color: #000; border-color: #4f4f4f;}
#navlist li a:active { color: #4f4f4f; border-color: #4f4f4f;}

I always get in a muddle with lists

Can anyone guide me in the right direction, to make the hover link look like it does in the design PNG? I know i'd want to use a 1px wide background/gradient somewhere in there!

Craig321 · 19 Mar 2006 at 19:11

404 for the first one

I like the second one, it's nice.

Frost · 19 Mar 2006 at 19:18

Scam said:
Lots of text!

/EDIT

Just noticed doesn't seem to work properly, not sure what i've done wrong

could try something like this.

take off the padding-right and the border from the #navlist li { }

and change the links to this:

#navlist li a {
color: #4f4f4f;
text-decoration: none;
padding: 0 20px 0 0; border: 1px solid #fffff0;
}

#navlist li a:hover { color: #000; border-left: 1px solid #4f4f4f; border-right: 1px solid #4f4f4f;border-bottom: 1px solid #4f4f4f; padding: 12px 20px 30px 0; background: white url(img/yourbackground image) repeat-x top left;}

Scam · 20 Mar 2006 at 10:43

Hey thanks, that was useful Got it working in FF but as usual IE isnt playing along

http://touchlinetactics.2m2l.net/unlive.html

CSS:

Code:

#navigation {
	text-align: right;
	margin-bottom: 5px;
	width: 720px;
	height: 70px;
	border: 1px solid #4f4f4f;
	background: #4f4f4f url('img/nav-bg.gif') repeat-x scroll top;
	}
	
#navlist li {
	font-size: 14px;
	font-weight: bold;
	display: inline;
	list-style-type: none;
	}
	
#navlist li a { 
	color: #4f4f4f;
	text-decoration: none;
	padding: 12px 10px 40px 10px; 
	}
	
#navlist li a:link { color: #4f4f4f;}
#navlist li a:visited { color: #4f4f4f;}

#navlist li a:hover, #navlist li a:active { 
	border-left: 1px solid #4f4f4f; 
	border-right: 1px solid #4f4f4f;
	padding-right: 9px;
	padding-left: 9px;
	border-bottom: none;
	background: #4f4f4f url(img/nav-hover-bg.gif) repeat-x top left;
	}

Ideally i'd like the nav text to be running along the bottom of the nav bar, how can i do this?

Also whats the best preload method to use for the hover background? Shall i set it as always there and change the position of it, or just use Javascript?

Thanks for the help.

Scam · 20 Mar 2006 at 11:50

Woo! I persevered (sp?) and got it working. Had to wangle it a bit, it seemed FF was putting in a default padding/margin somewhere which i could only get rid of by putting:

Code:

*, html, body { margin: 0; padding: 0;}

at the top.

http://touchlinetactics.2m2l.net/unlive.html

Just have to add all padding etc. back in manually. Is there a list of the default padding/margins for simple stuff like p's, h1' etc anywhere?

Question still stands about the preload, if anyone has any advice

Thanks!

Augmented · 20 Mar 2006 at 13:45

Scam said:
Just have to add all padding etc. back in manually. Is there a list of the default padding/margins for simple stuff like p's, h1' etc anywhere?

It differs between browsers. Resetting the margins and paddings is actually a recommend practice by many to overcome this issue. You have better control if you only need to modify margins or padding on elements that need it.

There are various methods for the preload without the need for javascript - try out this one: http://wellstyled.com/css-nopreload-rollovers.html

.

Scam · 20 Mar 2006 at 17:38

Augmented said:
It differs between browsers. Resetting the margins and paddings is actually a recommend practice by many to overcome this issue. You have better control if you only need to modify margins or padding on elements that need it.

Yup i've done it since i've been doing CSS layouts, but i thought there was a bit of a backlash against it :confused:

Oh well, works for me.

Augmented said:
There are various methods for the preload without the need for javascript - try out this one: http://wellstyled.com/css-nopreload-rollovers.html .

That was exactly the link i was thinking of thanks.

Not 100% sure if its working though, can people try for me?

http://touchlinetactics.2m2l.net/unlive.html - check theres no delay on the background rollovers.

CSS:

Code:

#navlist li a { 
	color: #4f4f4f;
	text-decoration: none;
	padding: 30px 10px 25px 10px;
	[b][i][u]background: transparent url(img/nav-hover-bg.gif) no-repeat -65px left;[/i][/u][/b]
	}
	
#navlist li a:link {color: #4f4f4f;}
#navlist li a:visited {color: #4f4f4f;}

#navlist li a:hover, #navlist li a:active { 
	border-left: 1px solid #4f4f4f; 
	border-right: 1px solid #4f4f4f;
	padding-right: 9px;
	padding-left: 9px;	
	background: #4f4f4f url(img/nav-hover-bg.gif) repeat-x top left;
	}

Thanks.

Next question - whats the most accessable/standards-minded way of implementing a Flash element?

EDIT: It seems that my rollover doesnt work in FF for some reason. People are telling me thats theres still the delay, but only in FF :confused:

Augmented · 20 Mar 2006 at 17:54

Scam said:
EDIT: It seems that my rollover doesnt work in FF for some reason. People are telling me thats theres still the delay, but only in FF

Yes, I get a slight flicker. Instead of applying the whole background property to the :hover and :active states, try just assigning the background-position property. Might work...

Scam · 20 Mar 2006 at 18:13

Augmented said:
Yes, I get a slight flicker. Instead of applying the whole background property to the :hover and :active states, try just assigning the background-position property. Might work...

Hmn seems to work in IE but in FF the bg doesnt show at all on hover. :confused:

Just changed:

Code:

#navlist li a:hover, #navlist li a:active { 
	border-left: 1px solid #4f4f4f; 
	border-right: 1px solid #4f4f4f;
	padding-right: 9px;
	padding-left: 9px;	
[b]	[i]background-position: top left;[/i][/b]
	}

Scam · 20 Mar 2006 at 19:39

Still not sure what to try with regards to FF not liking the background changing position

Code:

#navlist li a { 
	color: #4f4f4f;
	text-decoration: none;
	padding: 30px 10px 25px 10px;
	[b][i]background: transparent url(img/nav-hover-bg.gif) repeat-x -65px left; }[/b][/i]

If i change the -65px to something like -20px (so it should be half visible from the top - the links are each 65px high) i can see the background in IE but not FF. So theres obviously something wrong there, rather than when it moves.

http://touchlinetactics.2m2l.net/unlive.html - Any other issues?

Mason64 · 20 Mar 2006 at 21:06

hey i really liek that web site! colours go well and its just a really nice design!

Scam · 20 Mar 2006 at 22:28

Mason64 said:
hey i really liek that web site! colours go well and its just a really nice design!

Thanks mate.

Now does anyone have any idea why my nav rollovers arent working in FF

EDIT: Phew! Got it!