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

QUOTE

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

CODE

/*

"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; }

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0042)http://www.leafbunk.astahost.com/index.htm -->
<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://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://www.leafbunk.astahost.com/index.htm">Home</A>
| <A href="http://www.leafbunk.astahost.com/forum/index.php">Forum</A> | <A
href="http://www.leafbunk.astahost.com/roster.htm">Roster</A> | <A
href="http://www.leafbunk.astahost.com/gallery.htm">Gallery</A> | <A
href="http://www.leafbunk.astahost.com/contact.htm">Contact</A> </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>

QUOTE

Server not found




Firefox can't find the server at www.leafbunk.astahost.com.





* Check the address for typing errors such as
ww.example.com instead of
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.

QUOTE

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.

QUOTE

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.

CODE

#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;
}