Welcome Guest ( Log In | Register )



2 Pages V   1 2 >  
Reply to this topicStart new topic
> My First Site.... I Think It's Turned Out Pretty Well
leafbunk
post Dec 22 2006, 10:56 PM
Post #1


Member - Active Contributor
Group Icon

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.
Go to the top of the page
 
+Quote Post
yordan
post Dec 23 2006, 11:45 AM
Post #2


Way Out Of Control - You need a life :)
Group Icon

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 ! laugh.gif
Go to the top of the page
 
+Quote Post
Quatrux
post Dec 23 2006, 06:57 PM
Post #3


the Q
Group Icon

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. wink.gif
Go to the top of the page
 
+Quote Post
mastercomputers
post Dec 23 2006, 11:20 PM
Post #4


PESTICIDAL MANIAC
Group Icon

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
Go to the top of the page
 
+Quote Post
saint-michael
post Dec 25 2006, 11:13 AM
Post #5


SM- the Man -The Myth - The Legend Himself
Group Icon

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. sad.gif</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.
Attached File(s)
Attached File  New_WinZip_File.zip ( 913bytes ) Number of downloads: 19
 
Go to the top of the page
 
+Quote Post
lemonkiss
post Dec 25 2006, 06:09 PM
Post #6


Newbie [ Level 1 ]
Group Icon

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~
Go to the top of the page
 
+Quote Post
nathaniel
post Dec 26 2006, 05:35 AM
Post #7


Newbie [ Level 2 ]
Group Icon

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!
Go to the top of the page
 
+Quote Post
Omkar™
post Dec 26 2006, 10:29 AM
Post #8


Advanced Member
Group Icon

Group: Members
Posts: 130
Joined: 22-May 06
From: India
Member No.: 13,593




That was insane dry.gif :
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? blink.gif


This post has been edited by Omkar™: Dec 26 2006, 10:30 AM
Go to the top of the page
 
+Quote Post
leafbunk
post Dec 26 2006, 10:38 AM
Post #9


Member - Active Contributor
Group Icon

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. smile.gif 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:
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.

huh.gif 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. laugh.gif 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://www.leafbunk.astahost.com/images/site1.jpg <----- Home page.
http://www.leafbunk.astahost.com/images/site2.jpg <----- Crappy alignment on the roster page.

cool.gif 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.

Go to the top of the page
 
+Quote Post
Mark420
post Dec 26 2006, 12:39 PM
Post #10


The Modernator
Group Icon

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.

Go to the top of the page
 
+Quote Post

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Add A Search Box To My Web Site(10)
  2. Good Places To Advertise Your Site(20)
  3. Flash Site Software(12)
  4. Visit My Site, Internet Stops For A While(8)
  5. Www.modthesims2.com - Sims 2 Mods Site(8)
  6. Create A Site Without Cms But Just Dreamweaver?(6)
  7. Add A Forum To Your Site(23)
  8. Please Hack My Site(23)
  9. What Is The Best Photo Sharing Site?(17)
  10. How To Create Your Own Proxy Site (free And Easy)(13)
  11. Love Calculator(1)
  12. Youtube Videos(4)
  13. Site Link Analyzer Tool(1)
  14. Web Host Review Site(0)
  15. Does This Site Mean Anything To Us…i Don’t Know U Tell Me?(4)
  1. My Site Got Hacked!(10)
  2. Site Down Again, Help Or Suggestions?(6)
  3. Time Travel?(1)
  4. Main Trap17 Site Is Down?(0)
  5. Request Form Site Suspended(4)
  6. Cronous(0)
  7. Free Site(5)
  8. A Site I Put Together Over The Last 3 Days(5)
  9. Help Me Host My Site On My Pc(4)
  10. Nice Models And Free Models, New Site!(5)
  11. Free Fast Web Submission(1)
  12. Need To Copy An Entire Site..(7)
  13. Site Language(9)