Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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 )

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

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

    I take no responsibility for the above nonsense.


    Left Justified

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    paris, france
    Posts
    1,216
    Thanks
    0
    Thanked 0 Times in 0 Posts
    pretty smooth looking. maybe change the font in the menu (as if we didn't geuss it was CSS with a font like that ) 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
    photoshop too expensive? use the GIMP! www.gimp.org

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    paris, france
    Posts
    1,216
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [OT]nice layout on mudsplat there. any news from that end?
    photoshop too expensive? use the GIMP! www.gimp.org

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Whackaxe: Check your PM Inbox.

    Mindlesslemming: One addition, it looks like the lemming has a sign growing out of it's back...
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #6
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys... You're both right, the logo is invisible.... I'll sort that
    Quote Originally Posted by ionsurge
    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

    I take no responsibility for the above nonsense.


    Left Justified

  • #7
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ionsurge
    Mindlesslemming: One addition, it looks like the lemming has a sign growing out of it's back...
    it does That's the lemming's toolkit!

    I take no responsibility for the above nonsense.


    Left Justified

  • #8
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Last edited by mindlessLemming; 04-06-2004 at 01:06 PM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #9
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That looks much much better. I can't comment on the Moz/Opera issues seeing as we use IE here at work.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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...

    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!
    Last edited by ronaldb66; 04-06-2004 at 04:08 PM. Reason: Update
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #12
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Garadon: Brilliant! Of course! Thanks

    Ronald: Glad you like . 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 )
    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

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •