...

View Full Version : Crash my basic layout.



mindlessLemming
04-06-2004, 09:28 AM
Mindless Lemming - version 2 (http://studentwork.qantm.com.au/akrespanis/mindlessVersion2/basic2.html)

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

whackaxe
04-06-2004, 10:09 AM
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:

ionsurge
04-06-2004, 10:35 AM
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.

whackaxe
04-06-2004, 10:38 AM
[OT]nice layout on mudsplat there. any news from that end?

ionsurge
04-06-2004, 11:00 AM
Whackaxe: Check your PM Inbox.

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

mindlessLemming
04-06-2004, 11:00 AM
Thanks guys... You're both right, the logo is invisible.... I'll sort that ;)


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.
The padding on the top and the bottom of the page is the same... I'm not sure exactly what you mean.


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

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.


Last, your menu items seem really busy, the actual text used seems somewhat too large.
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.


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

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:

mindlessLemming
04-06-2004, 11:01 AM
Mindlesslemming: One addition, it looks like the lemming has a sign growing out of it's back...

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

mindlessLemming
04-06-2004, 12:44 PM
Ok, I've made a new header. Do you like that better? Worse?

Link for the Lazy (http://studentwork.qantm.com.au/akrespanis/mindlessVersion2/basic2.html)
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 (http://www.wats.ca/articles/accesskeyalternatives/52) written by one of the guys over at accessifyforum.com

Garadon
04-06-2004, 03:54 PM
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.

ionsurge
04-06-2004, 03:59 PM
That looks much much better. I can't comment on the Moz/Opera issues seeing as we use IE here at work. :(

ronaldb66
04-06-2004, 04:05 PM
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!

mindlessLemming
04-07-2004, 01:37 AM
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:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum