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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts

    Please rate the design

    i didnt design it so go as harsh as you like
    i jus want to know what other people think
    http://rafiki.freehostia.com/upload/index.php
    Edit:
    no internal links work

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    I like the design but i would improve:

    1. The nav sticks out by about 5px on the left hand side(in firefox atleast). looks kinda weerd. The nav also seems kinda boaring as it just blends in to the rest of the page and u don't notice it as easily as u should.

    2. the scanlines between the header and the nav are very ugly. Either reduce the indesity so they are not as dark are remove them all together.

  • #3
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Quote Originally Posted by srule_ View Post
    I like the design but i would improve:

    1. The nav sticks out by about 5px on the left hand side(in firefox atleast). looks kinda weerd. The nav also seems kinda boaring as it just blends in to the rest of the page and u don't notice it as easily as u should.

    2. the scanlines between the header and the nav are very ugly. Either reduce the indesity so they are not as dark are remove them all together.
    i agree with the nav, but its better than it was before as for the scan lines i dont have the original image used, should i just make a new one and replace it? or can i change opacity with css?
    also the should i change the nav colours to make it more noticable if so which colours?

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    I'm note sure, maybe other ppl will think your nav is fine, so lets wait to see what they say

    one more thing.

    When i increased the text size of your page the entire layout got screwed up! This was because the navigation expended and some it it droped down to the next line making your 3 floated boxes not fit on the same line and messed the page up.

    to fix this, set a max-width to your ul so that it can not drop down like that, or put the navigation in a div the spans that way it will push down all 3 of your boxes by the same amount.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Give a left margin of 6px to your #navlist ul, then add a clearing div just after your ul, this will allow the background color of the navcontainer div to show up.
    Last edited by _Aerospace_Eng_; 07-30-2007 at 01:59 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Quote Originally Posted by srule_ View Post
    to fix this, set a max-width to your ul so that it can not drop down like that, or put the navigation in a div the spans that way it will push down all 3 of your boxes by the same amount.
    so i add max-width to my css like so?
    Code:
    #navlist {
    max-width : 10px /*how much should i set to*/ 
    padding : 3px 0;
    margin : 0;
    border : none;
    text-align : left;
    letter-spacing: 2px;
    color : #666;
    background : #6FBF20;
    }
    #navlist li {
    list-style : none;
    margin : 0;
    display : inline;
    }
    #navlist li a {
    text-decoration : none;
    padding : 0px 0em; /* set it to 0 to see of this is what causes the padding */
    margin : 0;
    border :none;
    color : #333;
    background : #cbeea8;
    }
    #navlist li a:link {
    color : #333;
    background : #b9e588;
    }
    #navlist li a:visited {
    color : #333;
    background : #b9e588;
    }
    #navlist li a:hover {
    border : 0 solid #d2dcc9;
    color : #fff;
    background : #75c22a;
    }
    #navlist li a#current {
    text-decoration : none;
    color : #fff;
    background : #75c22a;
    border : none;
    }
    also what about the scanlines?

  • #7
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Give a left margin of 6px to your #navlist ul, then add a clearing div just after your ul, this will allow the background color of the navcontainer div to show up.
    i dont have #navlist ul?
    or do i? :S also how do i add a clearing div after my ul?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I guess I should be more specific. What I meant was add it to the ul with id="navlist". Common sense really.

    As to the clearing div, surely you haven't ever heard of clear:both? http://positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    max-width : 10px /*how much should i set to*/
    however large your navigation is on normal view, it looks about 750px. Not sure though u got to check that.

  • #10
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    ok sorry for being dense i no next to nothing about CSS 'n' web design really...
    so heres my new css document for the page...
    thanks for being patient i understand you must be getting frustrated
    Code:
    body {
    margin : 0;
    padding : 0;
    font : 73% "Trebuchet MS", arial, verdana, tahoma, sans-serif;
    line-height : 1.7em;
    color : #333;
    background : #2e2e2e;
    }
    #container {
    width : 750px;
    margin-left : auto;
    margin-right : auto;
    padding : 5px;
    color : #666;
    background : #F2FAFD;
    }
    			/*BANNER*/
    #banner {
    height : 100px;
    padding : 0 3px 0 0;
    margin : 0;
    color : #fff;
    background : #0798da url(img/header.jpg) no-repeat;
    }
    #banner h1 {
    margin : 0;
    padding : 40px 0 0 90px;
    border : none;
    font-size : 2em;
    letter-spacing: 5px;
    text-align : left;
    }
    
    #clearing {
    clear : both;
    }
    			/*TOP NAVIGATION*/
    #navlist {
    padding : 2px 0;
    margin : 0;
    letter-spacing: 2px;
    color : #666;
    background : #6FBF20;
    }
    #navlist li {
    list-style : none;
    margin : 0;
    float: left;
    padding-left: 4px
    }
    #navlist li a {
    text-decoration : none;
    padding : 3px 1.2em;
    margin : 0;
    margin-left: -6px;
    border :none;
    color : #333;
    background : #cbeea8;
    }
    #navlist li a:link {
    color : #333;
    background : #b9e588;
    }
    #navlist li a:visited {
    color : #333;
    background : #b9e588;
    }
    #navlist li a:hover {
    border : 0 solid #d2dcc9;
    color : #fff;
    background : #75c22a;
    }
    #navlist li a#current {
    text-decoration : none;
    color : #fff;
    background : #75c22a;
    border : none;
    }
    #navlist ul {
    left-margin : 6px;
    }
    
    			/*3 COLUMNS*/
    .intro,.intro2,.intro3 {
    height : 250px;
    margin : 3px 0 5px 0;
    padding : 5px;
    color : #555;
    }
    .intro {
    float : left;
    width : 240px;
    border-bottom : 15px solid #6fbf20;
    border-top : 15px solid #6fbf20;
    background : #98d15f;
    }
    .intro2 {
    float : right;
    width : 238px;
    border-bottom : 15px solid #a3d671;
    border-top : 15px solid #a3d671;
    background : #C7E6A8;
    }
    .intro3 {
    float : left;
    width : 240px;
    border-bottom : 15px solid #8ccc4e;
    border-top : 15px solid #8ccc4e;
    background : #B4DE8B;
    }
    .separator {
    float : left;
    background : url(img/sep.png) no-repeat;
    height : 225px;
    width : 1px;
    }
    			/*RIGHT CONTENT*/
    #content {
    padding : 5px;
    margin-left : 255px;
    margin-bottom : 0;
    border-top : 15px solid #1CA3E3;
    color : #666;
    background : #F2FAFD;
    }
    			/*LEFT SIDEBAR*/
    #sidebar {
    float : left;
    width : 240px;
    margin : 0 10px 0 0;
    padding : 5px;
    border-top : 15px solid #1CA3E3;
    color : #666;
    background : #F2FAFD;
    }
    #content p, #sidebar p {
    padding : 5px 15px 5px 15px;
    }
    #content h1, #sidebar h1 {
    margin : 0;
    font : 1.5em "Trebuchet MS", verdana, tahoma, sans-serif;
    padding : 0 0 0 20px;
    color : #333;
    background : transparent url(img/stop.png) left center no-repeat;
    }
    			/*FOOTER*/
    #footer {
    clear : both;
    padding : 3px;
    margin : 0 0 0 0;
    font-size : 0.9em;
    border-top : 5px solid #75c22a;
    color : #333;
    background : #0798da;
    }
    #footer a:link, #footer a:visited {
    background : inherit;
    color : #fff;
    border-bottom : none;
    }
    #footer a:hover {
    border-bottom : none;
    background : inherit;
    color : #333;
    }
    			/*TYPOGRAPHY*/
    h2 {
    padding : 0;
    margin : 0 5px 0 5px;
    letter-spacing: 3px;
    font : 160% verdana, arial, "Trebuchet MS", tahoma, sans-serif;
    color : #333;
    background : inherit;
    }
    p strong {
    font-style : italic;
    color : #069;
    }
    			/*LINKS*/
    a {
    text-decoration :underline;
    color : #069;
    background : inherit;
    }
    a:hover {
    text-decoration : none;
    color : #333;
    background : inherit;
    }
    a img {
    border : 0;
    }
    			/*IMAGES*/
    .img {
    float : left;
    padding : 4px;
    margin : 4px;
    border : 1px solid #556b2f;
    }
    .imgleft {
    float : left;
    padding-left : 15px;
    }

  • #11
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You have one validation error of a missing </p>
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #12
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    lol thanks for that ahallicks, i see how much validating code means these days
    anyway with the css is that correct, and i add a <div id="clearing"> </div> for the clear:both; to take effect, and also the #navlist ul is that correct, sorry im a proper noob with this

  • #13
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Link Back is below Homepage and it looks bad.

    Instead of just having the orb have three different things.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Use this for the relevant CSS
    Code:
    #navlist {
    
    padding : 2px 0;
    margin : 0 0 0 6px;
    letter-spacing: 2px;
    color : #666;
    background : #6FBF20;
    }
    #navlist li {
    list-style : none;
    margin : 0;
    float: left;
    }
    The clearing div needs to go inside of the div with id=navcontainer just after ul with id=navlist which is what I said in the first place.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #15
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Quote Originally Posted by twodayslate View Post
    Link Back is below Homepage and it looks bad.

    Instead of just having the orb have three different things.
    what kind of different things? 3 different coloured orbs? or what, i dont really know what to put there.
    and thanks to all for the feedback so far it is much appreciated.
    as for the Link Back, thats not meant to be there, not sure why it moved :S ill have a fiddle quickly
    Last edited by rafiki; 07-30-2007 at 11:25 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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