Full Version: Css Template
Here's my template... feel free to review but that's not the reason. http://lukeburns.com/projects/css As you can see it's very simple. It's my first css template... and I'm just stuck here. I'm always bad at finding that third color and I never know what else to add. Anyone know what I should do when I'm in this situation? It's like designers block... at a certain point, I don't know what looks good anymore.
First of all use a verdanna font its the best The rounded edges are just not working and in your css take away the height in the nav to make the buttons take the whole this trust me it will look better
Alright... fixed! Anything else?
for the header, dont reflect, dosnt look good with the template, make a nice big header that complements the template. and the buttons need something done to them... i cant put my finger on it tho
first of all, really nicely started, i like the way it looks... i personaly never made a dark blue site... wich ill proably try soon.... the colors are atractive with the white and the little black touch.
Suggestions :
- Your logo the .COM is in a diferent font, i personaly think it'll look much better if the whole thing was in the same font... the one you used for Luke Burns.
- Font size, verdan is good, but i think one size smaller will fit better, aalso aply a smaler font to the footer. its kinda big i think
- here :
you set a width wich the No mouse over looks nice, but when you are on mouse over its a big bigger i suggest seting a width to the .button:hover{ and active. at least it doesnt work on IE 6.
- one last little bug, i think its on your footer the image is set 1pixel to big or to small so it repeats the pixel with the pictures :
look atached file.
These are only my opinions/suggestions donno if it will truly look better but thats what i would of done
Suggestions :
- Your logo the .COM is in a diferent font, i personaly think it'll look much better if the whole thing was in the same font... the one you used for Luke Burns.
- Font size, verdan is good, but i think one size smaller will fit better, aalso aply a smaler font to the footer. its kinda big i think
- here :
CODE
.button {
background-color: #4e719c;
color: #072850;
border: 1px solid white;
height: 18px;
padding: 3px;
margin: 8px;
font-weight:bold;
}
.button:hover{color: white; text-decoration:none; background-color:#335682;}
.button:active{color: #4e719c; text-decoration:line-through; background-color:#87a4c8;}
background-color: #4e719c;
color: #072850;
border: 1px solid white;
height: 18px;
padding: 3px;
margin: 8px;
font-weight:bold;
}
.button:hover{color: white; text-decoration:none; background-color:#335682;}
.button:active{color: #4e719c; text-decoration:line-through; background-color:#87a4c8;}
you set a width wich the No mouse over looks nice, but when you are on mouse over its a big bigger i suggest seting a width to the .button:hover{ and active. at least it doesnt work on IE 6.
- one last little bug, i think its on your footer the image is set 1pixel to big or to small so it repeats the pixel with the pictures :
look atached file.
These are only my opinions/suggestions donno if it will truly look better but thats what i would of done
Alright I changed the text sizes and the header (which I'll make bigger later) but what do you want me to change with the .button:hover? and I noticed that footer bug... I don't know what to do with it.
Well its a bit basic, but since it's your first css design, I say its pretty good. I'm currently not on my computer right now but rather on my girlfriends and her specs aren't that great. Therefore, I cannot judge the quality of your site. Fromw hat I see, I say that blue navigation color is a bit too random. I say you should use a wire-frame menu. You can see a demo of it at http://www.dynamicdrive.com/style/csslibra...ss_indent_menu/ or http://www.dynamicdrive.com/style/csslibra...lid-block-menu/
Updated... please check. It still need something else...
http://www.lukeburns.com/projects/css/index.html
http://www.lukeburns.com/projects/css/index.html
QUOTE(Luke @ Oct 27 2007, 10:33 PM) 
Updated... please check. It still need something else...
http://www.lukeburns.com/projects/css/index.html
http://www.lukeburns.com/projects/css/index.html
buttons look a little better, but yea luke, ima pm you about something watch me do it!
alright... i'll be working on it 
thanks for the help... any more suggestions would be appreciated!
thanks for the help... any more suggestions would be appreciated!
make the fotter image 1pixel smaller from your css width.
and take your image on photoshop or what ever prog you use and delet this ONE pixel on top
if its still a mess it means you needed to add one
well no its atualy 2 pixels.
ill be back tonight ill try to do it for you i have to go to work....
and take your image on photoshop or what ever prog you use and delet this ONE pixel on top
if its still a mess it means you needed to add one
well no its atualy 2 pixels.ill be back tonight ill try to do it for you i have to go to work....
The boarder on top of the footer is a bit too thick. Replace the css in your style.css with the following
I noticed that you never ended your navigation DIV tag. You may want to end that.
When writing in css, you should post something like this in your page
I would replace this with
CODE
#content{
font-size:.85em;
margin: auto;
padding: 6px;
text-align: justify;
}
#footer{
font-size:.85em;
text-align:center;
padding: 6px;
background-color: #56708a;
color:white;
font-weight: bold;
border:1px solid #000;
}
font-size:.85em;
margin: auto;
padding: 6px;
text-align: justify;
}
#footer{
font-size:.85em;
text-align:center;
padding: 6px;
background-color: #56708a;
color:white;
font-weight: bold;
border:1px solid #000;
}
I noticed that you never ended your navigation DIV tag. You may want to end that.
When writing in css, you should post something like this in your page
CODE
<br style="clear: left" />
I would replace this with
CODE
<br class="brstyle" />
css//
.brstyle {clear: left;}
css//
.brstyle {clear: left;}
QUOTE(MrTouz @ Oct 28 2007, 04:28 AM)
make the fotter image 1pixel smaller from your css width.
and take your image on photoshop or what ever prog you use and delet this ONE pixel on top
if its still a mess it means you needed to add one well no its atualy 2 pixels.
ill be back tonight ill try to do it for you i have to go to work....
and take your image on photoshop or what ever prog you use and delet this ONE pixel on top
if its still a mess it means you needed to add one
well no its atualy 2 pixels.ill be back tonight ill try to do it for you i have to go to work....
The footer isn't an image... the only images are the background and the header.
Iamshipon - I didn't see much of a difference with any of the code you gave me... just a few of the borders got thicker. I guess it cleaned it up a bit though.
QUOTE
The footer isn't an image... the only images are the background and the header.
well than what you probably did is :
told in your css a background-image ... so it sets a background in your <body> or <html> people use eather of the 2... what happened is that once you added <div id="footer"></div> this background "restarted" so it took the image from i guess 0 wich made it repeate incorrectly.
http://nfs.allroundelites.com this is a site i designed and see the bg ? they are lines well with FireFox (only) befoe i fix the bug my footer was doing the exact same thing, i undertood later the it was seting a background for each element and not for the full page. hard to understand i know.. i had to deal with it for a ... hmmm (ashamed to tell) a week
but than i figured it out. somehow it is doing it for you in IE since i only use IE... well also FF to set my sites compatible with FF aswell... lets not be unfaire to others !!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.