Crash my basic layout.
 

Mindless Lemming - version 2

I've got crazy issues with the search box in the menu bar... Resize your text to see what I mean.
I solved this by using absolute positioning, but that had to go, as it's just not globally friendly enough (whatever the hell I mean by that :confused: )

So if anyone has any ideas, or dislikes anything about the layout: SPEAK NOW :D
Thanks,
Andrew.

*Woot! first to post in the new sub-forum. hehehe :p

pretty smooth looking. maybe change the font in the menu (as if we didn't geuss it was CSS with a font like that :D) i personaly don't like the lavanderish color, i'm spending more time deciding if it's lavender, or light blue. the logo, "mindless lemming" doesn't stand out engough methinks. apart from that pretty nice. oh and source is good :thumbsup:

Just four issues in my opinion.

The first has been mentioned, your logo doesn't stand out in anyway.

The second is padding, you've added padding to the top of the page, but not on the bottom. I'd suggest adding some to the bottom to add some additional fluidity.

Third, you have not used any accessibility features, try adding simple things like access keys to allow that extra useability.

Last, your menu items seem really busy, the actual text used seems somewhat too large.

Just one little thing, your source code seems to have no structural alignment. Use indents. If you want an example of what I mean, have a look at the source code for http://www.mudsplat.com/design/index.php

Otherwise, all fine in my opinion.

[OT]nice layout on mudsplat there. any news from that end?

Whackaxe: Check your PM Inbox.

Mindlesslemming: One addition, it looks like the lemming has a sign growing out of it's back...

Thanks guys... You're both right, the logo is invisible.... I'll sort that ;)
The padding on the top and the bottom of the page is the same... I'm not sure exactly what you mean.
Ahh... Accesskeys.. After much research over the last few months, I've purposely decided not to implement accesskeys, due to that minefield of cross-browser conflicts involved. Basically, the only accesskeys that won't conflict with any browsers are numbers, but numbers will conflict with JAWS and possibly other assistive technologies. For that reason, they're staying out. I'm instead going to use <link> relationships to create site wide navigation for browsers which take advantage of it. (Gecko, maybe Opera? not sure). I may also include some JS fueled accesskeys to allow IE users to use the <link> nav, but that'll be further down the road.
lol, the text has been made that size to increase legability. Perhaps the serif font is a little much, but I don't feel that the size is too large. And yeah, it's busy, but I think it's kinda cool, and I haven't seen many CSS menus like it.
Hehehe, sorry bout that, I chopped up the PHP version to make this static copy and didn't re-align my code. It's all better now.

The page as it stands now is a very basic shell, I left anything out that isn't required for positioning so I could see if it bugged out on any browsers before continuing. I really should have made that more clear.

So, looks like it's back to photoshop to push 'round some more pixels and sort out that invisible logo :thumbsup:

it does :p That's the lemming's toolkit!
:D

Let's try that again...
 

Ok, I've made a new header. Do you like that better? Worse?

Link for the Lazy
One thing I forgot to ask about originally is regarding the search form. Try clicking in the field or on the button in Mozilla or Opera. You have to click way down the bottom of the thing to select it....wtf? I've tried everything I can think of to fix that, but I'm baffled. Anyone run into this before? How did you fix it??

*edit: If anyone wants to know more about using the <link> element to define site navigation, here's a good introductory article written by one of the guys over at accessifyforum.com

your placing your ul over it.

#menu ul {
position:relative;
left:50px;
background:transparent;
list-style:none;
margin:0;
padding-top:6px;
padding-left:30px;
z-index:3;
}

alter zIndex to 1.


most common fault when you can't select something is that u are placing something over it, it is easily checked by applying borders on elements.
and remember they should be a different color than what they cover. Elements with unbrooken border will then be the top ones.

example put:
border:black 1px solid;

in the above class and notice the difference in the border box at the edit field when you alter the zIndex.

That looks much much better. I can't comment on the Moz/Opera issues seeing as we use IE here at work. :(

Sweeet...
 

Mindless,

I really like the artwork, very subtle color use, yet tasteful, and well-coded of course.
About the lemming: maybe you could draw like straps around his body, so it looks like the sign is strapped on instead of surgically grafted to his spine...? Maybe that won't put off the lemming-enthousiasts a little less... :D

On IE5.5/Win2000 there was a very slight bright line underneath the menu bar, and as you said when resizing the text to biggest, the "contribute" button wrapping around to the next line throws everything way off. You could either make the criss-cross background image tile and position the trees separately, or extend the current background image to compensate for the extra height. I don't know if explicitly setting a height for that div will work, though, and the list items need more room vertically as well (when they wrap, the next line partially overlaps the first one).

Edit:

By the way, congrats on being the first bright one to spot the new forum!
@George: great thinking!

Garadon: Brilliant! Of course! Thanks :thumbsup:

Ronald: Glad you like :D. I'm aware of the IE menu space, but was going to go through and hack it to death for IE. You've pointed out that I can simply provide more background image than the div requires so IE has something to display in that 1px gap. Thankyou ;)

This site is only an assignment for my ColdFusion class at college and will probably never go online. (Although I'm doing mine in PHP 'cause I want to learn it:cool: )
I'm also in the process of designing a blog/portfolio and last night realised that I could make a totally fluid version of this layout, but it would require PNG's and would cancel out IE 5.0 all together...

Thanks again for all the tips guys :thumbsup: