How can I improve this?

[FpsGlock]

It's my first website I coded so don't be to hard on me, but I need to learn somehow. I only have the basic text area ATM so it's kind of ugly.

[img]http://infinite-unknown.com/IU.png[/img]

[editline]07:01AM[/editline]

Sorry for the big-ass picture

[:awesome:]

[LIST]
[*]Don't use a huge background image
[*]Lines arent good for content backgrounds unless they are really faint
[*]Go easy on the rounded corners
[/LIST]

[BrettJay]

[LIST][*]Large backgrounds are [i]okay[/i] if they lead the eye towards the content. For example, [url="http://www.webdesignerwall.com/"]this site[/url]. However, your site's background doesn't lead the eye towards content.

[*]Use contrast to draw attention on a page. Contrast is in the form of colour difference, difference in size, placement, etc.. Currently, the background has a lot of contrast, so the eye is drawn there. There has to be a number of elements on a page for you to be able to use contrast, though.

[*]As mentioned above, the diagnal stripes on the content box make the content hard to read; either tone it down, or remove them.

[*]Change the text to left-aligned, ragged right. Very rarely should text be aligned center on a webpage, and certainly [b]not[/b] paragraph/copy.

[*]The green text at the bottom is very hard to read.

[*]Experiment with more negative space. But use it correctly. For example, there's a bit too much padding inside the navigational field, but I think you should apply some margin to the top of the navigation field to push it away from the top.

[*]Use sites like [url="http://kuler.adobe.com/"]Kuler[/url] and [url="http://0to255.com/"]0to255[/url] to find complementing colour schemes.

[*]Experiment with typography; try adding some more line-height to the paragraph font; start at 150%, and work up or down from there.
[/LIST]

[FpsGlock]

Ok, Thanks for the responses.

1.How would I make a background image that would size to fit the text like in the link you posted?
2.In you third-party opinion should I remove the lines and replace with a color, remove the lines replace with white or make them transparent to a new bakground where it isn't a wallpaper?
3.I will cut down on the rounding :)
4.Contrast will be fixed when I get the new background
5.I'll text align left, good idea
6.I am currently using negative space for the navigation, but I need to re-do the header images they are to big (they make a white underline when you scroll over them)
7.any tutorials about typography you could recommend?

[Fate]

The background image is fine. Center the main content and it'll look fine.
Lower the rounded corners on the navigation.
And lower the transparency for the main content for 80/90%

[FpsGlock]

Main Content is centered, use the scroll to see it all I'm running at a large resolution.

[PieClock]

[QUOTE=SataniX;23920093]The background image is fine.[/QUOTE]

It's not. It's way too distracting from the content.

[:awesome:]

[QUOTE=SataniX;23920093]The background image is fine. Center the main content and it'll look fine.
Lower the rounded corners on the navigation.
And lower the transparency for the main content for 80/90%[/QUOTE]

:eng99:

[FpsGlock]

Yea, I only put that there for a temporary fix to it's emptiness. I can't edit pictures or any of that stuff like some of the guys do it. I'm actually pretty good at the html because of my lua coding experience (it's nothing alike but helps me because I already have the coding mindset.)

If there was a "un-artistic" rating I'd be the king of it :D

[KmartSqrl]

[QUOTE=BrettJay;23912189][LIST][*]Large backgrounds are [i]okay[/i] if they lead the eye towards the content. For example, [url="http://www.webdesignerwall.com/"]this site[/url]. However, your site's background doesn't lead the eye towards content.

[*]Use contrast to draw attention on a page. Contrast is in the form of colour difference, difference in size, placement, etc.. Currently, the background has a lot of contrast, so the eye is drawn there. There has to be a number of elements on a page for you to be able to use contrast, though.

[*]As mentioned above, the diagnal stripes on the content box make the content hard to read; either tone it down, or remove them.

[*]Change the text to left-aligned, ragged right. Very rarely should text be aligned center on a webpage, and certainly [b]not[/b] paragraph/copy.

[*]The green text at the bottom is very hard to read.

[*]Experiment with more negative space. But use it correctly. For example, there's a bit too much padding inside the navigational field, but I think you should apply some margin to the top of the navigation field to push it away from the top.

[*]Use sites like [url="http://kuler.adobe.com/"]Kuler[/url] and [url="http://0to255.com/"]0to255[/url] to find complementing colour schemes.

[*]Experiment with typography; try adding some more line-height to the paragraph font; start at 150%, and work up or down from there.
[/LIST][/QUOTE]

Good advice.

[QUOTE=SataniX;23920093]The background image is fine. Center the main content and it'll look fine.
Lower the rounded corners on the navigation.
And lower the transparency for the main content for 80/90%[/QUOTE]

Terrible advice.

[FpsGlock]

I'm going to study development instead of design, I know most people would say not to, but I'm just naturally a coder not a designer.

[:awesome:]

[URL="http://validator.w3.org/check?uri=http%3A%2F%2Finfinite-unknown.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0"]You might also want to check the validity of your html when your making something.[/URL]

[BrettJay]

[QUOTE=FpsGlock;23919240]Ok, Thanks for the responses.

1.How would I make a background image that would size to fit the text like in the link you posted?[/QUOTE]
Don't focus too much on the background at this stage. You might find that a simple gradient or low-contrast tiling pattern background is enough.

[QUOTE=FpsGlock;23919240]2.In you third-party opinion should I remove the lines and replace with a color, remove the lines replace with white or make them transparent to a new bakground where it isn't a wallpaper?[/QUOTE]
I think you should experiment with background colour, borders, and padding. Using the site 0to255, choose a background colour, and make the border a few shades brighter or darker. Sometimes, a subtle effect will work wonders, and [url="http://www.sohtanaka.com/web-design/css-border-tricks-tutorial/"]here's how to[/url] achieve some subtle pixel popping techniques in css.

[QUOTE=FpsGlock;23919240]3.I will cut down on the rounding :)[/QUOTE]
Yeah, use it a bit more subtly; and try to be consistent - the rounding on the navigation is quite different from the rounding on the content box.

[QUOTE=FpsGlock;23919240]4.Contrast will be fixed when I get the new background[/QUOTE]
Yep. Also, when there are more elements on the page.

[QUOTE=FpsGlock;23919240]5.I'll text align left, good idea[/QUOTE]
no problem.

[QUOTE=FpsGlock;23919240]6.I am currently using negative space for the navigation, but I need to re-do the header images they are to big (they make a white underline when you scroll over them)[/QUOTE]
Header images? If you mean what I think you mean, you should probably use an unordered list for navigation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
	<title>title</title>

	<style type="text/css">
	body {
		background: #111;
	}
	ul#navigation {
		overflow:auto; /*A simple way to get a parent element to clear floated child elements, in this case, the li elements which are floated left*/
		list-style: none; /*If you're using a CSS reset, it will probably already remove the dot points before list items*/
	}
  
  		ul#navigation li {
  			display: block;
  			float: left;
  			margin: 0 5px;
	  	}
			ul#navigation li a {
				border-radius: 3px;
				color: #fff;
				display: block; /*Assigning width/height/padding to a elements makes the space around the text also clickable, which is sometimes prefferable*/
				font-family: Helvetica, Arial, sans-serif;
				font-size: 15px;
				padding: 6px 10px;
				text-decoration: none;
				/*Webkit and Mozilla CSS3 extensions*/
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
			}
				ul#navigation li a:hover {
					background: #055897;  /*Changes background colour when hovered*/
				}
	</style>
</head>
<body>
<ul id="navigation">
	<li><a href="#">Home</a></li>
	<li><a href="#">Servers</a></li>
	<li><a href="#">Contact Us</a></li>
	<li><a href="#">About -IU-</a></li>
	<li><a href="#">Join Us</a></li>
</ul>
</body>
</html>

You can accomplish quite a lot with just xhtml and css (and even more when you introduce javascript into the mix), so try to avoid using images, for accessibility reasons, and it will just be much easier to update links if they're text and not a .jpg.

Obviously, try to avoid embedding CSS in your markup, it's just easier here for a 1 page demo.

[QUOTE=FpsGlock;23919240]7.any tutorials about typography you could recommend?[/QUOTE]
None come immediately to mind, check google. This [url="http://lamb.cc/typograph/"]site is a good overview of typography scale and rhythm[/url] (Firefox & Webkit browsers only).

[QUOTE=FpsGlock;23924668]I'm going to study development instead of design, I know most people would say not to, but I'm just naturally a coder not a designer.[/QUOTE]
That's fair enough, I'm the exact opposite. My coding abilities are limited to front end markup.

[FpsGlock]

Thanks so much for the help, I'm going to try to find a good tutorial site for developing (currently using w3schools and google for specific things).

I'm going to try to learn form that code you gave me and see if I can find any web programming in high-school.