My First Site.... I Think It's Turned Out Pretty Well

[leafbunk 0]

I've never had a site or forums up on the internet before, but I think this one is coming along alright. I've also never used CSS before, so that was definitely new and exciting to mess around with. I downloaded a free CSS template designed by David Herreman (http://www.free-css-templates.com/), and modified it until I liked the way it looked for my site.. I drew the banner in Photoshop - (the animal is a Murloc, from World of warcraft).

Here is the link to my site:
http://forums.xisto.com/no_longer_exists/

Also if you look at the site and become confused as to what it's about, it is meant to be an informational site and meeting/discussion area for the members of my guild on World of Warcraft.

Thanks for having a look, and please let me know what you think.

[yordan 10]

Nice, nice, nice.
I specially appreciated the bottom white box :

I haven't thought of anything to put in this box yet. It seems like an important box though...

It's very important to know and to express yourself when you don't have anything to tell us !

[Quatrux 4]

Nice, all I can add is that I don't really like the green colour or whatever you call it in the right side, it really hurts my eyes.

[iGuest 3]

I agree with the green side box, not that it's hurting my eyes, it just seems to be too overpowering on the site and I'm not sure if this is meant to be the important area. Also the inner white box (of the green side box) and the font color used, is also a bit on the light side, not enough contrast to make it easily readable but that also has to be considered for the majority of the background too as color blind people would have trouble with this site as well.The HTML coding is poor, incorrect document type, this is not HTML 4.01 Transitional, but XHTML which means following XHTML rules, the use of uppercase element tags and attributes is not allowed, there could be some minor adjustments for semantics too. There seems to be a double up of the body tag used, which will confuse browsers and a fair amount of deprecated elements being used too.Increasing the font to twice it's size didn't alter the look of the site, which is good. Turning off styles gave insight to the ordering of content, which the order didn't seem right but was acceptable, also noticed HTML style elements were used, as well as tables for non tabular data.The CSS coding uses browser proprietary styles, which should be avoided if possible or conditional commenting be used.Overall, average coding, and an alright looking site.Cheers,MC

[Saint_Michael 3]

Agreed with the above posts so I modified your CSS just a bit with some other minor stuff.

*/FIXES\*
Change Background color for sidebar
Changed the margin in side to be more equal on both left and right sides of it
Added padding in content box
Change the rounded corners in the CSS and HTML





Also I notice you where trying to do the rounded corners I was able to fix that with a site I usually go to.

http://www.neurotic.es/?

Mind you file names may of changed when I edited the CSS and HTML file But like I said just some minor stuff you will see the differance.

/*		"We Speak Murlock", the Guild.	by Ashley Liegman	*/textarea.text { 	height: 150px; 	width: 90%; 	border: 1px solid #ccc; 	background: #fff; 	color: #000;}textarea.text:hover { 	border: 1px solid #eee; 	background: #FFFFF4; 	color: #000;}input.field { 	border: 1px solid #ccc; 	background-color: #FFFFFF; 	width: 200px; 	color: #000;}input.field:hover { 	border: 1px solid #eee; 	background: #FFFFF4; 	color: #000;}input.text { 	margin: 0; 	width: 110px;	border: 1px solid #eee; 	background: #FFF;	color: #000; }input.text:hover { 	border: 1px solid #ccc; }input.searchbutton { 	margin: 0; 	font-size: 100%; 	font-family: Arial, Sans-serif; 	border: none; 	background: #FFFFFF; 	color: #808080; 	padding: 1px; 	font-weight: bold; }input.button { 	background: #FFFFF4; 	color: #808080;	border-right: 1px solid #ccc;	border-bottom: 1px solid #ccc;}h4 {	font-size: 12px;	color: #50922C;	text-align: left;	background-color: #fff;}.date {	text-align: right;	color: #808080;	font-size: 11px;	background-color: #cad9de;}.date a {	color: #003647;	background-color: #cad9de;}#page-container {	width: 760px;	text-align: left;	margin: auto;	background-color: #013648;}body {	font-family: Arial, Helvetica, Verdana, Sans-serif;	font-size: 12px;	color: #666666;	background: #405060;	text-align: center;	}#header {	background: #cad9de url("header.jpg")  center no-repeat;	height: 212px;	padding: 0 0 0 0px;	text-align: right;	color: #fff;	font-size: 10px;	background-color: #cad9de;}#header a { color: #000;}#header .text { 	text-align: right;	color: #003647;	font-size: 12px;	padding: 25px 25px 10px 0px;	font-weight: bold;}* html #header .text { 	text-align: right;	color: #003647;	font-size: 12px;	padding: 25px 0px 0px 0px;	font-weight: bold;}#header input.button { 	float: right;	background: #003647; 	border: none;	color: #fff;	font-weight: bold;	background: #003647; 	}#header .padding {	padding: 80px 25px 0px 0px;}#header .padding_passwd {	padding: 20px 25px 0px 0px;}* html #header .padding {	padding: 80px 17px 0px 0px;}* html #header .padding_passwd {	padding: 17px 17px 0px 0px;}#header input.text { 	width: 109px; 	height:24px;	border: 0;	background: url(input2.gif) no-repeat;	padding: 4px;	color: #003647;}* html #header input.text { 	width: 109px; 	height:24px;	border: 0;	background: url(input2.gif) no-repeat;	padding-right: 10px; 	color: #003647;}#menu {	background: #cad9de url("menu.jpg") top center no-repeat;	height: 87px;	text-align: center;	color: #fff;	font-size: 10px;    font-size: 100%; 	padding-top: 7px;}#menu .padding { padding-top: 0px;}* html #menu .padding { padding-top: 5px;}* html #menu {	background: #cad9de url("menu.jpg") top center no-repeat;	height: 87px;	text-align: center;	color: #fff;	font-size: 10px;    font-size: 100%; 	padding: 0px;}#menu a {	color: #fff;	font-size: 9pt;	font-weight: bold;	padding: 0px 10px 0px 10px;	text-decoration: none;}#menu a:hover {	color: #fff;	font-size: 9pt;	font-weight: bold;	padding: 0 10px 0 10px;	text-decoration: underline ;	}#menu input.button { 	background: #003647; 	border: none;	color: #fff;	font-weight: bold;}* html #menu input.button { 	background: #003647; 	border: none;	color: #fff;	font-weight: bold;	}.search { 	color: #fff;	clear: both;	font-weight: bold;	padding: 10px 25px 10px 10px;	margin: 5px 0;}* html .search { 	color: #fff;	clear: both;	font-weight: bold;	padding: 0px 0px 00px 0px;	margin: 0px 0;}#menu input.text { 	width: 292px; 	border: 0;	background: #FFF url(input.gif) no-repeat;	margin-top: 4px;	padding: 4px; 	color: #003647;}* html #menu input.text { 	border: 0px;	background: url(input.gif) no-repeat;	margin-top: 0px;	padding: 4px; 	color: #003647;}#myhr { background: url(hr.gif) no-repeat center; margin: 13px; height: 1px; background-color: #eee;}#content {	background-color: #7B90C4;	padding-top: 0px;	margin-right: 255px;	line-height: 18px;	padding-left: 10px;	padding-bottom: 10px;}#content .padding {	padding: 10px 10px 0px 10px;	color: #000;	background-color: #7B90C4;}#content h2 {	margin-top: 5px;	padding-top: 5px;	padding-bottom: 0px;	color: #003647;	line-height: 30px;	background-color: #7B90C4;}* html #content h2 {	margin-top: 10px;	padding-top: 10px;	padding-bottom: 0px;	color: #003647;	line-height: 30px;	background-color: #7B90C4;}#content a {color: #003647;text-decoration: none;background-color: #7B90C4;}#content p {	margin: 0;	padding: 0;	padding-top: 5px;	background-color: #cad9de;}#box {	width: auto;	line-height: 18px;	margin-top: 30px;	margin-right: 20px;	margin-left: 10px;	padding: 10px 10px 10px 10px;	background-color: #eee;	border: 1px;	border-style: solid;    border-color: #003647;}#sidebar-a {	float: right;	width: 195px;	line-height: 18px;	margin-top: 30px;	margin-right: 30px;	background-color: #eee;}* html #sidebar-a {	float: right;	width: 95px;	line-height: 18px;	margin-top: 30px;	margin-right: 10px;	padding-left: 0px;	padding-right: 0px;	background-color: #eee;}* html #sidebar-a p {  width: 173px;  margin-left: 10px;  margin-top: 15px;  text-decoration: none ;  text-align: left;  background-color: #eee;  }#footer {	clear:both;	font-family: Tahoma, Arial, Helvetica, Sans-serif;	font-size: 11px;	color: #fff;	padding: 4px 0px;	text-align: center;	background-color: #003647;}#footer a {	color: #fff;	text-decoration: none;}#footer a:hover {	color: #fff;}#footer #copyright {	padding-top: 1px;}.hidden {	display: none;}.roundcont {	width: 195px;	background-color: #eee;    color: #808080;}.roundcont {    width: 195px;	background-color: #eee;    color: #808080;	padding:0px;	}.roundcont p {	margin: 25px 10px;}/* set millions of background images */.rbroundbox { background: url(nt.gif) repeat; }.rbtop div { background: url(tl.gif) no-repeat top left; }.rbtop { background: url(tr.gif) no-repeat top right; }.rbbot div { background: url(bl.gif) no-repeat bottom left; }.rbbot { background: url(br.gif) no-repeat bottom right; }/* height and width stuff, width not really nessisary. */.rbtop div, .rbtop, .rbbot div, .rbbot {width: 100%;height: 7px;font-size: 1px;}.rbcontent { margin: 0 7px; }.rbroundbox { width: 100%; margin: 0em auto; }

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://forums.xisto.com/no_longer_exists/;--'>http://forums.xisto.com/no_longer_exists/;-- saved from url=(0042)http://forums.xisto.com/no_longer_exists/ --><HTML><HEAD><TITLE>"Oh I Give Up," the guild.</TITLE><META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><META http-equiv=Content-Language content=en-us><META http-equiv=imagetoolbar content=no><META content=true name=MSSmartTagsPreventParsing><META content="Oh I Give Up" name=description><META content="css template" name=keywords><META content="David Herreman (http://http://www.free-css-templates.com/), modified by Ashley Liegman" name=author><STYLE type=text/css media=all>@import url( images/guildcss.css );</STYLE><LINK title="RSS 2.0" href="rss/" type=application/rss+xml rel=alternate><META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD><BODY><DIV id=page-container><DIV id=header><DIV class=padding></DIV><DIV class=padding_passwd></DIV></DIV><DIV id=menu><DIV class=padding><A href="http://forums.xisto.com/no_longer_exists/; | <A href="http://forums.xisto.com/no_longer_exists/; | <A href="http://forums.xisto.com/no_longer_exists/; | <A href="http://forums.xisto.com/no_longer_exists/; | <A href="http://forums.xisto.com/no_longer_exists/; </DIV><DIV class=search><BR>If you're new to the guild, please introduce yourself on the forums! </DIV></DIV><DIV id=sidebar-a><DIV class=roundcont><div class="rbroundbox">	<div class="rbtop"><div></div></div>		<div class="rbcontent"><P><B>IMPORTANT NEWS!</B><BR>Tabards are still messed up, so we don't have one yet. I can't seem to get a GM to fix it either. I've asked 2 so far and nothing has been done about it. Sorry guys. </P><DIV id=myhr></DIV><P><B>Guild Message of the Day:</B><BR>Invite your friends to the guild! Everyone is welcome.</P></div><!-- /rbcontent -->	<div class="rbbot"><div></div></div></div><!-- /rbroundbox --></DIV></DIV><DIV id=content><DIV class=padding><H2>A little bit about the guild...</H2>Oh I Give Up is always recruiting! <BR>We are a guild that believes in generosity, meaning we don't sell items to each other! We give them away. Need money? No problem. We'll do what we can to help you. Need items? If we've got them - we'll give them to you, and if we don't have any to give then we'll do the best we can to help you obtain some.<BR><BR>The members of our guild all have basically the same privelages. Each of these ranks has the privelage to invite members to the guild, so if you have friends or meet other players who would like to be in the guild, every member has the opportunity to invite them. <BR><BR>If you invite someone while I'm not on, I only ask that at some point you introduce me to them. I think it's important to meet every new guild member so that each person feels comfortable and welcome. Also, any member may request to have their rank changed at any time. All you have to do is ask me and it will be done! <H2>Murloc Translator:</H2>The handy dandy murloc translation site, for all your murlock translation needs: <A href="http://murloc.no-ip.org/">http://murloc.no-ip.org/</A> <DIV id=box>I haven't thought of anything to put in this box yet. It seems like an important box though... </DIV></DIV></DIV><BR><DIV id=footer>| All images and content copyright Š 2006 Leafbunk | </DIV></DIV></BODY></HTML>

Also here is a zip file for the images you will need.



This is a suggestion code you don't have to use what I showed in the coding but makes for a cleaner look.

[lemonkiss 0]

hey, that's a very good site. Is it for Neopets??? And I love the name of your guild..OH i give up~

[nathaniel1405241538 0]

Wow it is pretty good for a beginner. Also I think it is very good because the colour sceme matches with the logo image at the top. Plus its a guild for warcraft so it does not need to be fancy or professional looking! Also your phpbb forum looks pretty good, you got a lot of people joined and posting frquently which is always good. I like how you designed your roster page with the charts and the levels it looks very good I know my first website never looked as good as yours! Keep it Up!

[Omkar™ 0]

That was insane :

Server not found

 

 

 

 

Firefox can't find the server at http://forums.xisto.com/no_longer_exists/.

 

 

 

 

 

* Check the address for typing errors such as

ww.example.com instead of

http://www.example.com/

 

* If you are unable to load any pages, check your computer's network

connection.

 

* If your computer or network is protected by a firewall or proxy, make sure

that Firefox is permitted to access the Web.

 

 

 

 

That was at 3.57 pm (IST:GMT+5.30) on 26th Dec., 2006.

 

I mean, what's up?

Edited December 26, 2006 by Omkar™ (see edit history)

[leafbunk 0]

Ok first off, saint-Michael:

 

Thank you for taking the time to make some revisions to the code. I really appreciate you doing that. I don't quite fancy the round corners look , but the original creater of this particular style sheet used them. I tried to get rid of them actually, and I probably left tons of crap code lying about because I wasn't sure what to delete or not. The whole process of modifying the style sheet and website took me...well...forever. It was a whole lot of trial and error for me since I hadn't ever seen or worked with anything like this before. The modified code you provided me though helped me tremendously to smooth out some parts on the site that really looked like poop. I can't thank you enough for providing your help.

 

Moving on to mastercomputers:

The HTML coding is poor, incorrect document type, this is not HTML 4.01 Transitional, but XHTML which means following XHTML rules, the use of uppercase element tags and attributes is not allowed, there could be some minor adjustments for semantics too. There seems to be a double up of the body tag used, which will confuse browsers and a fair amount of deprecated elements being used too.

 

Increasing the font to twice it's size didn't alter the look of the site, which is good. Turning off styles gave insight to the ordering of content, which the order didn't seem right but was acceptable, also noticed HTML style elements were used, as well as tables for non tabular data.

You're going to have to translate that whole bit into plain english for me because I have absolutely no idea what you mean by all of that. Not a clue. As for my poor coding, it's my first time creating a working site. You sound like you shuddered away in horror when you saw it! If you could explain a bit further what you mean by XHTML and HTML 4.01 Transitional, I would appreciate it. I'm curious to know what you mean, for I guess I don't understand how to distinguish the differences between the two.

 

 

For everyone else:

 

1. I changed that green sidebar that everyone said looked ugly. I didn't think it looked too bad, but I guess the more bland, the better...Pfft. So, the sidebar is now the same color as the main area.

2. I changed that rather plain looking white box on the right side as well and made it a light blue with dark blue border. I've got a quesiton about that though, because on Firefox, for me it shows a very thick blue border on the top and bottom of that box. On internet explorer, the sizes of the border on all sides of the box are equal. I like the thick on top and bottom and would like to know how I might make that show up on Internet explorer.

3. Changed the tables on the roster page and gallery page, so hopefully they are more centered now and look better with a thicker border.

4. Changed the font color to dark blue for every page, so now all the text matches.

 

Here are two links to pictures of what the site used to look like, in case you wanted to compare.

http://forums.xisto.com/no_longer_exists/ <----- Home page.

http://forums.xisto.com/no_longer_exists/ <----- Crappy alignment on the roster page.

 

Thank you everyone for the kind comments I've received. I really appreciate your support, and hope that I can continue to make changes to the site to improve it.

[Markymark2 0]

Good work Leaf and good work guys helping along with the site tweaking..Leaf will soon understand that site design is almost never finished on a live site..just more and more tweaking to get it the way to look like you want it and also tweaking the html and css to make it compatable and looking the same in all browsers..then ofc is the whole WC3 checking proccess that can be hell on earth for beginners in design..Its a great first effort tho and I hope you can make it better and better with the help of the members here.

[Saint_Michael 3]

In Englsih

Per HTML and XHTML standards, a DOCTYPE (short for âdocument type declarationâ) informs the validator which version of (X)HTML youâre using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS wonât validate without them.

In XHTML standards tags like this <HTML> are obsolete this is the standard tag format <html>.

1. It was ugly it was the fact it was to bright, and with todays monitors those bright colors really get bright and thus hurt a persons eyes. I would have stuck with the dark blue I gave you in the coding above to give it some separation.

2. You might have to adjust the padding or the margins to fix that.

3. Table looks good. To spruce up your tables check these links out:

https://24ways.org/2005/tables-with-style
http://forums.xisto.com/no_longer_exists/

4. Text looks good.

Also I recommend these following links

Web Design Tools for FireFox

http://forums.xisto.com/topic/91541-topic/?findpost=1064358046=

With these tools they make your web design life a whole lot easier and in some ways make web designing quicker.

[leafbunk 0]

Saint-michael, the links you gave me were really interesting and I'd like to do something like that with the tables on my site. Thank you for providing those. In the code it points to a png picture to color the odd versus even rows, but....well I have no idea what this picture is supposed to look like, or what size it needs to be, etc.A tiny snippet of what I'm talking about:tbody tr.odd td{ background:transparent url(tr_bg.png) repeat top left;}Is there any way I can view just that picture (tr_bg.png) from his site? If that....makes any sense. Do I need to make it a specific size or is it a very tiny image that's just repeated or...what? Also, just as a warning, I'm probably going to really need some help with this tables thing...By the way, I took your advice and changed the side bar to that blue as you suggested before. I think you're right in saying that it needs some separation. I also added another bar at the bottom though for color separation between that page container and the footer. Let me know if you think that green is too powerful at the bottom...

Edited December 27, 2006 by leafbunk (see edit history)

[Saint_Michael 3]

I would say its perfect the green gives it more of a srperation then ever now with the tables, that was my mistake I thought it was all done in css but he uses a combination of images and javascript for this table the images that is being referred to is coming from here.

http://forums.xisto.com/no_longer_exists/

Now this the images are for background purposes you can go ahead and delete those if you want to, as to save some time in figuring this mess out.

[sparkx 0]

It looks very good. I like the template you used lol. Very good. I never used a template on any of my sites so I don't know how to rate a site that has used one. I think it is a very good site for a first site. Ill tell you the truth, it looks better then my first site. I also don't know much about world of warcraft or of the other tutorial sites to it's kinda hard to compair your site. In my opinion you should stick with the site and keep up the good work :)Good luck,Sparkx

Edited December 27, 2006 by sparkx (see edit history)

[leafbunk 0]

Well I've been messing around with the table all day today and I'm having trouble with two things mainly.

1. I don't know if it's a border or what around each cell in the table, but there is a space between each cell. I don't know how to fix it - I've tried several things, but nothing has worked so far. On the website you provided (Saint-michael), there is no space in the color between cells on the odd rows that are colored different than the background of the table. Anyways, you can see what I'm talking about in the links to the pictures I provided below. EDIT: I just asked my boyfried and he said he likes the small gaps, because it helps keep the columns easily separated. Do you have any opinions?

2. In firefox, there is a nice break between Realgay and Arianget (these are character names, please see the picture to know what I'm talking about.) I need a separation between those two because Realgay and the characters above are officers in the guild, and Arianget and those below are members. Anyways, in firefox a good bit of separation appears, but in internet explorer, it doesn't really. I was wondering what I need to do in order to allow for more space between these two names in IE.

Here are the pictures so you know what I'm talking about for both of my issues. Please let me know what you think about the colors on the table. I think they're alright, but if you have a better suggestion I'm all for trying it out.

Screenshot taken of how it looks in Internet explorer: http://forums.xisto.com/no_longer_exists/
And in Firefox: http://forums.xisto.com/no_longer_exists/

And below is the css for the table part. I thought maybe having this might help you help me fix the breaks between cells. Maybe it's just something simple that I missed, or something that I need to add....

EDIT: Sorry I don't know how to make it have a scrollbar so the code doesn't take up the whole page..

#roster {	border-width: 4px 4px 4px 4px;	padding: 0px 0px 0px 0px;	color: #003647;	border-style: solid solid solid solid;	border-color: #E1E1E5 #E1E1E5 #E1E1E5 #E1E1E5;	border-collapse: collapsed;	background-color: #003647;	width: auto;}.rosterhead {}.rosterhead th {	text-decoration: underline;	font-size: 112%;	padding: 5px 5px 5px 5px;	color: #E1E1E5;	border-collapse: collapsed;	background-color: #003647;	-moz-border-radius: 0px 0px 0px 0px;}.rosterhead tr {	border-collapse: collapse;}.roster td {	padding: 5px 5px 5px 5px;	color: #E1E1E5;	border-collapse: collapsed;	background-color: #003647;	-moz-border-radius: 0px 0px 0px 0px;}.rosterbody tr.odd td {	background: #31616F;	border-collapse: collapsed;}*html tr.odd td {	background: #31616F;}

Edited December 28, 2006 by leafbunk (see edit history)