|
|
|
|
![]() ![]() |
Dec 22 2006, 10:56 PM
Post
#1
|
|
|
Member - Active Contributor Group: Members Posts: 76 Joined: 7-December 06 Member No.: 18,008 |
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://www.leafbunk.astahost.com/index.htm 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. |
|
|
|
Dec 23 2006, 11:45 AM
Post
#2
|
|
|
Way Out Of Control - You need a life :) Group: [MODERATOR] Posts: 2,042 Joined: 16-August 05 Member No.: 7,896 |
Nice, nice, nice.
I specially appreciated the bottom white box : QUOTE 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 ! |
|
|
|
Dec 23 2006, 06:57 PM
Post
#3
|
|
|
the Q Group: [HOSTED] Posts: 1,053 Joined: 13-July 05 From: Lithuania, Vilnius Member No.: 7,059 |
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.
|
|
|
|
Dec 23 2006, 11:20 PM
Post
#4
|
|
|
PESTICIDAL MANIAC Group: Members Posts: 626 Joined: 1-September 04 From: Auckland, New Zealand Member No.: 27 |
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 |
|
|
|
Dec 25 2006, 11:13 AM
Post
#5
|
|
|
SM- the Man -The Myth - The Legend Himself Group: Members Posts: 443 Joined: 4-September 05 From: Drinking da rootbeers Member No.: 8,313 |
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.neuroticweb.com/recursos/css-ro...d-box/index.php? 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. 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; } HTML 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. <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.
Attached File(s)
|
|
|
|
Dec 25 2006, 06:09 PM
Post
#6
|
|
|
Newbie [ Level 1 ] Group: Members Posts: 6 Joined: 25-December 06 Member No.: 18,753 |
hey, that's a very good site. Is it for Neopets??? And I love the name of your guild..OH i give up~
|
|
|
|
Dec 26 2006, 05:35 AM
Post
#7
|
|
|
Newbie [ Level 2 ] Group: Members Posts: 11 Joined: 26-December 06 Member No.: 18,770 |
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!
|
|
|
|
Dec 26 2006, 10:29 AM
Post
#8
|
|
|
Advanced Member Group: Members Posts: 130 Joined: 22-May 06 From: India Member No.: 13,593 |
That was insane 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. That was at 3.57 pm (IST:GMT+5.30) on 26th Dec., 2006. I mean, what's up? This post has been edited by Omkar™: Dec 26 2006, 10:30 AM |
|
|
|
Dec 26 2006, 10:38 AM
Post
#9
|
|
|
Member - Active Contributor Group: Members Posts: 76 Joined: 7-December 06 Member No.: 18,008 |
Ok first off, saint-Michael:
Thank you for taking the time to make some revisions to the code. Moving on to mastercomputers: 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. 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. 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://www.leafbunk.astahost.com/images/site1.jpg <----- Home page. http://www.leafbunk.astahost.com/images/site2.jpg <----- Crappy alignment on the roster page. |
|
|
|
Dec 26 2006, 12:39 PM
Post
#10
|
|
|
The Modernator Group: Members Posts: 486 Joined: 6-August 06 From: The Interweb! Member No.: 15,021 |
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. |
|
|
|
![]() ![]() |
Similar Topics