My website / website template i have made and am working on

[Baseball435]

hey guys. well i have been looking a lot at css templates and thought that i would try and make my own. So right now i have made a template and its going to turn into a website (a wii hacking one). here is a first look at it. So far i have a forum going, a working contact page (scripted by me), and a homepage (obviously). here is a pic. Give me feedback

[Jackolantern]

Looks nice! My only suggestion would be to maybe bring the navigation buttons down and make them run along the top border of the main content area. The empty white top border looks kind of empty against the blue header banner.

[PaxBritannia]

Great! CSS is something that you definitely want to have in your skill-set.

As for the design, the text on your buttons could be more readable, the separator lines are also off between the Downloads and Contact (by about 2 pixels) buttons.

If you haven't already, you might want to have some fun with hover effects on your buttons. As an example, the code here will turn your button's background white when you hover over it.

Code: Select all

.divclass:hover{
	background-color: #FFF;
}

You might want to also have some fun rounding the edges of divs with

Code: Select all

.divclass{
	border-radius:  5px;
	-moz-border-radius: 5px;
}

that will round the div's edges by 5 px. Both lines are needed for it to work due to browser compatibility issues. A border around your main content wrapper/div might also be nice.

As Jack has pointed out, the top of the content div looks empty against the blue header, so you might want to consider bringing down the menu onto the top of the content div so it acts as a divider between the header and the content.

I can't check you code to see if it is semantically clean, but there should be much problems there on layout as such.

Otherwise, quite a good layout. If I were you though, I would polish it up a little bit more before showing your friends at Zeatnolt. Keep it up!

pax.

[Baseball435]

wow thanks for noticing the little space in between the buttons. and yeah i have been having lots of fun with :hover and also thanks again with the round button thing! I have been looking for that for a longg time!

[PaxBritannia]

No problem, just glad to help.

If you run into anything or have any other questions, feel free to ask at anytime.

pax.

[Baseball435]

thanks i actually cant figure out how to get the rounded corners to work. its not working for me :/ but here is another picture. I moved the menu down, like you guys suggested, and i added a login for "posters" which are the people that post tutorials. Then they have a menu to choose from with differnet options. for example, post a tutorial. then when they submit it it waits to get approved by an admin. then i added a secret admin login and their menu is to approve tutorial posts and other stuff. So i have added a lot onto it. Now i just have to add in a forum. So here is a pic of the main page to show you the knew menu. tell me how it looks!

[PaxBritannia]

Really? It works for me on all five on my browsers I have pinned to my menu. They also work on several of the ones in my programs menu. Just in case lets add web-kit (although it should already support it). Have you set border width and color? Lets add that as well.

Code: Select all

  
	border-width: 3px;
	border-color: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

pax.

[Torniquet]

looking nice

@ pax

i have never known IE to accept rounded corners or such like. I know with the implamentation of HTML 5 it will be possable on IE 9, but nothing prior to that.

i have always used image files or the jquery plugin for rounded (and various other) corners, but even then it can still look worse than square corners in IE.

[PaxBritannia]

Really? I've uninstalled IE from all my computers so I wouldn't know (anti-IE sentiment). It should work on everything else though.

If you need IE to work, you might have to use images or a javascript. I suggest if you really want to see round corners on IE, is to use Javascript to detect if it is IE, if it is, wrap_outer with your round corner image divs.

pax.

[Torniquet]

never has for me lol. im anti IE, but keep it purly for viewing my site lol. just to make sure it works lol