...

View Full Version : Please rate the design



rafiki
07-30-2007, 02:19 PM
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

no internal links work :D

srule_
07-30-2007, 02:27 PM
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.

rafiki
07-30-2007, 02:34 PM
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?

srule_
07-30-2007, 02:46 PM
I'm note sure, maybe other ppl will think your nav is fine, so lets wait to see what they say :thumbsup:

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.

_Aerospace_Eng_
07-30-2007, 02:55 PM
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.

rafiki
07-30-2007, 02:59 PM
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?

#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?

rafiki
07-30-2007, 03:02 PM
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?

_Aerospace_Eng_
07-30-2007, 03:09 PM
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

srule_
07-30-2007, 03:23 PM
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.

rafiki
07-30-2007, 03:25 PM
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

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;
}

ahallicks
07-30-2007, 05:06 PM
You have one validation error of a missing </p> :p

rafiki
07-30-2007, 08:24 PM
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

twodayslate
07-30-2007, 09:11 PM
Link Back is below Homepage and it looks bad.

Instead of just having the orb have three different things.

_Aerospace_Eng_
07-30-2007, 09:56 PM
Use this for the relevant CSS

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

rafiki
07-31-2007, 12:22 AM
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 :)

twodayslate
07-31-2007, 12:32 AM
Sorta like http://www.opensuse.org/ Keep your orb but add other things too.

rafiki
07-31-2007, 12:38 AM
how about a letter embedded in it for the initial of the content in that part,
as for the link back problem its kinda solved, its all on one line but not all flush.
thanks again.

_Aerospace_Eng_
07-31-2007, 12:55 AM
Sighs. You still haven't done it correctly. This

<div id="navcontainer">

<ul id="navlist">
<div id="clearing"> </div>
<li id="active"><a id="current" href="/index.php">Homepage</a></li>
<li><a href="upload.php">Upload It!</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="about.php">About Us</a></li>

<li><a href="advertise.php">Advertising</a></li>
<li><a href="affiliate.php">Affiliate With Us</a></li>
<li><a href="link.php"> Link2Us</a></li>
</ul>

</div>
Should be this

<div id="navcontainer">

<ul id="navlist">
<li id="active"><a id="current" href="/index.php">Homepage</a></li>
<li><a href="upload.php">Upload It!</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="about.php">About Us</a></li>

<li><a href="advertise.php">Advertising</a></li>
<li><a href="affiliate.php">Affiliate With Us</a></li>
<li><a href="link.php"> Link2Us</a></li>
</ul>
<div id="clearing"> </div>

</div>
You also have two of these

#navlist li {
list-style : none;
margin : 0;
float: left;
padding-left: 4px
}
One with padding and one with out, get rid of the one with padding. I suggest you go read more about CSS and understand how it works.

rafiki
07-31-2007, 12:57 AM
thanks aero, lack of sleep im off to go to bed now so should be able to take more notice tomorrow
also the last link 2 us bit is off alot now, how can i stretch them all evenly to make it flush?

_Aerospace_Eng_
07-31-2007, 01:03 AM
Add a width to the last one?

rafiki
07-31-2007, 11:53 AM
i tried that added <ul style="width:XX.px;"> and XX% but couldnt get it to stretch to the end..
i made the orbs with the embedded letter respectively, ill attach them now
feedback please :) thanks
Rafiki

_Aerospace_Eng_
07-31-2007, 02:32 PM
Okay let me be more specific again. I meant add a width to the LAST <li> of your <ul>.

rafiki
07-31-2007, 06:55 PM
i did.....
the link back one...
like so


<li style="width:10%;"><a href="link.php"> Link2Us</a></li>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum