My first CSS Template

[jasgor9]

I just made my first XHTML 1.1 valid CSS template. What do you think of it? It is very basic, because it is my first. Any tips? (And i know the contrast is off somewhat, but i can tweak it.)

Design URL: http://www.telvior.com/templates/AquaWeb

 

[VPmase]

Ok...
1) Colors don't blend and it just doesn't look right
2) Its rather plain and seems like a basic layout.

If you change the colors it would be good for a first.

 

[intertec]

If you change the colors it would make site 10x better!

 

[kateblogs]

I like the layout, but the colours are bit too bright. Especially the text, it doesn't really stand out from the background. It might be an idea to add a few pixels padding to the left side of your divs to create a small margin, it looks neater and is easier to read. It's a good first attempt though, definitely one you can build on and reuse.

 

[Sohail]

Yeah i also think the colour scheme needs a complete make-over...

 

[galaxyAbstractor]

Well, it is better than my first template . But there are alot of things that could be better.

 

[JuniorD]

oh Jesus. no offense but you need to re-do it a touch.

one thing, never use orange or red with blue in web designs. it gives you what i call, the burning eyes. 0.0. never put orange with blue in any template. usually you want colors that want to go directly with the main color.

such as in usual dark themes, like one I own, is dark blue and black. they associate due to them both being dark. stay on the right side of the color spectrum.

i have a demo below you can see: http://ocdesigns.pcriot.com/demos/JetBlack/
(its still in the works. pretty sure you can see that...)
It is in HTML though.

sorry for being a criticizer. had a lot of things to criticize on in some small 8 dollars an hour for a month job. (judge for somethings, like photography and stuff...)

my first template was ok, but it had improvements to be done. I can't believe someone bought it from me for 5 bucks. (could be due to a bunch of cool features)

 

[mac173]

1) As others have stated, please change the colors. Use this page to coordinate colors.

http://it.maconstate.edu/tutorials/XHTML/default.htm

Go to Section 12 and click Page Colors.

2) Use a background color or image. You have a lot of empty white space, and it makes the page look empty. Even if you fill it with content, it looks better with empty space filled with background.

3) The different sections are not well defined. Using either boarders or boarder art makes the sections easier to distinguish to the eye, and makes the site easier to read and navigate.

4) Use lorum ipsum for content to see the site filled. Copy this....

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vulputate aliquam nunc. Ut dictum elit at augue. Nam euismod justo eget justo. Pellentesque metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut enim quam, ullamcorper at, mattis in, sollicitudin vel, dui. Maecenas pharetra nunc sit amet ipsum. Morbi eu lacus. Etiam ultrices metus id sapien. Ut est turpis, volutpat at, semper ut, laoreet consequat, sapien. Fusce scelerisque, felis non nonummy euismod, enim est ornare augue, a fermentum leo mi vel tortor. Suspendisse potenti.
Praesent convallis purus sit amet odio. Proin eu odio. In at lacus eget metus congue tempus. Etiam rhoncus posuere massa. Etiam malesuada massa in velit. Integer sit amet libero vel dolor aliquet varius. Cras nonummy. Aliquam erat volutpat. Maecenas nisl lorem, viverra ullamcorper, gravida id, tincidunt quis, odio. Etiam condimentum. Maecenas velit orci, pretium a, condimentum eu, tristique quis, pede. Vestibulum nonummy velit eget quam.

Just copy that over and over to create content to fill out the pages. It gives you a better idea of how the site will look.

 

[knight3000]

font! change the font lol

 

[eod696]

Seeing as everyone is disregarding you initial statement that this is your first xhtml/css standards compliant design, or as you put it valid, I'm going to go ahead and ignore your hideous output and take a look at the code you put together.

And its extremely well organized and easy to understand, easy to troubleshoot, and everything you could come to expect out of a standards compliant website. I give you props. I can't find a single misplaced tag or misused attribute in the whole damn thing. Its great, you must've used a validator script to ensure it's compliance, which are very useful tools. But they don't tell you how much your color coordination sucks, so take all this with a grain of salt and consider the consequences next time you decide to share a design with the community.

Also, consider using some other common attributes, like a:hover and the font: 8pt verdana or whatever you want it to be, and using fonts and sizes and weights to distinguish certain pieces of text from others. Like a different font for you title, then another for your links, and another for your content. Its a suggestions, some people prefer consistency over variety, but thats not me. The gradients are cool though, its a great idear, you just need a better color combination than light blue and bright orange. How about...blue and white? Or orange and black?

 

[gottaloveit]

Not bad at all, especially considering, like eod696 says, you've built a very solid foundation of code. Now you can quite quickly and easliy play around with some other background colors and fonts with the css and try a number of options till you come up with something you like.

I like your "search" field in the top right - it's extremely functional and elegantly placed, I like how it is floating there with lots of space around it.

 

[lordsofvine]

well just like you said beginners (basic), i do the same thing when i first make mine hehehe so anyway practice makes perfect