Printable View
http://trasion.com/website/
Comment on it please?
Coded it all myself, in the past 3 hours. (navigation was confusing to make it perfect).
Please note: when you hover a link on the navigation, more links show up. I am not fully done that part, normally when you hover a sub-link, it will light up, right now it doesn't.
What's the font name of the title on your logo? It's nice.
"Futura Hv"
What do you think of the layout itself?
I thought the blue gradient were over-contrasted. My suggestion is to cut the gradients. Gradients are not 'in' to-date, it's getting boring that a lot of people are using the presentation technique.
Overall the padding are fine both logo and the main content boxes. And as for the choice selection, I choose number 1.
Thanks. I was also looking for an image to put on the header with the text. Like a group of people (representing a community). I'm not sure though, I need some high-quality images to put.
Try integrating this concept: http://www1.euro.dell.com/content/de...k&l=en&~ck=geo where an image is presented before the content. It's nice.
Nice. v1 Gets my preference tbh. The blue bar doesn't fit in at the top.
It's a good website and it is really nicely coded.
But, I don't like the blue bar at the top, it just doesnt fit in. :/
http://trasion.com/website/index.html
There.
Removed the blue bar at the very top.
Nice website, it's kind of hard to believe you coded that whole thing yourself. About a month ago you couldn't do CSS the way you do in this, and I can't recall you knowing javascript.
Anyways, it's a very nice looking website.
Offtopic:
What happened to you doing forum software? You switch projects too much, haha. ;P
This.. is the forum software layout.Quote:
Originally Posted by Aaron
Yeah, I learned CSS fast.
I really like it. It's a clean and nice design, reminds me of my forgotten PHP gallery software ^^, was also that blue.
Thanks Daevius. :) I was going for a clean/professional looking design.
Do you guys think I should keep the navigation thing? So like sub-links come when you hover? Or when you hover it, just make it change color, but you just click on it, and no sub-links?
I think you should keep the navigation.
It's nice and professional to me.
Man, i was dieing to see how this was going.
But the link is dead.
:/
Can someone help me?
Sorry, the host went down. The site is back up now.
But with my css.
http://trasion.com/website/stylesheet.css
How can I make it so the footer, header, content, and navigation, all have a 2px #373737 line on the right and left side? (but NOT on bottom or top)
Here is the stylesheet:
Code:body
{
background: #1b1b1b;
color: #373737;
font: 12px Arial;
margin: 0px;
padding: 0px;
}
.header
{
display: block;
background: url('images/header.gif');
width: 786px;
height: 130px;
}
.content
{
margin: 0 auto;
padding: 0;
text-align: left;
width: 770px;
background-color: #e6e6e6;
color: #2f3b4b;
border: 0px;
}
.content_border
{
margin: 0 auto;
padding: 0;
text-align: left;
width: 786px;
background-color: #e4e4e4;
color: #2f3b4b;
border: 0px;
}
.footer
{
margin: 0 auto;
padding: 0;
width: 786px;
height: 20px;
background: url('images/nav_bottom_bg.gif');
color: #FFFFFF;
border: 0px;
text-decoration: none;
font: bold 10px Arial;
}
.footer_end
{
margin: 0 auto;
padding: 0;
width: 786px;
height: 2px;
background: #373737;
color: #FFFFFF;
border: 0px;
text-decoration: none;
font: bold 10px Arial;
}
/* ######### CSS for top level tabs ######### */
.tabsmenuclass ul{
overflow: hidden;
width: 786px;
margin: 0;
padding: 0;
list-style-type: none;
}
.tabsmenuclass li{
float: left;
}
.tabsmenuclass a{
display: block;
padding: 5px 7px;
background: url('images/nav_top_bg.gif');
color: white;
padding-right: 25px;
padding-left: 25px;
text-decoration: none;
font: bold 13px Arial;
}
.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: url('images/nav_top_hover.gif');
font: bold 13px Arial;
}
/* ######### CSS for sub menu container below ######### */
.tabsmenucontentclass{
clear: left;
background: url('images/nav_bottom_bg.gif');
color: white;
width: 766px;
height: 14px;
padding: 10px;
border: 0px;
text-decoration: none;
font: bold 10px Arial;
}
.tabsmenucontentclass a{
clear: left;
background: #154c89 url('images/nav_bottom_bg.gif');
color: white;
width: 766px;
height: 14px;
padding: 10px;
border: 0px;
text-decoration: none;
font: bold 10px Arial;
}
.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}
Code:border-right:2px solid #373737;
border-left:2px solid #373737;
border-top:none;
border-bottom:none;
Thank you!
http://trasion.com/website/
The site is now fixed up with fixed up borders.
Oh my god, got rid of a MAJOR error, and made the website look so much better in under 10 minutes!
Check it out and please rate this one, compared to the old version (if you already saw the old one)
http://trasion.com/
Little advice:
The content text is nearly to the sides and top/bottem. I suggest you to use a padding: 0 10px; or something like that.
Yeah, I will. Thank you. :)
I was working on that, but right now I'm working on the layout itself a bit more, not the content area.
It is very nice.
However, I hate that font on your copyright!
Put it to Verdana :P.
Nice work.
Is this all from scratch?
If so, really good work!
The copyright text will be removed in the future and done differently, no worries.
Thanks for the comments!