• Advertisement
Sign in to follow this  

[web] What do you think so far?

This topic is 4867 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Just started creating a design for my website. What do you think so far. MY SITE! All opinions and suggestions welcome. Here's source for curious people. index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="mycss.css">
</head>

<body bgcolor="black">
<div id="container">
<div id="menuhead"><font class="heading">Menu</font></div>
<div id="menu">
<table width="150px" height="100%">
<tr>
<td style="text-align:center">
<a class = "nav" href="Home.html"><strong><</strong>Home<strong>></strong></a>
<br>
<a class = "nav" href="Tutorials.html"><strong><</strong>Tutorials</strong><strong>></strong></a>
<br>
<a class = "nav" href="Source.html"><strong><</strong>Source Code<strong>></strong></a>
<br>
<a class = "nav" href="Art.html"><strong><</strong>Artwork<strong>></strong></a>
<br>
<a class = "nav" href="Resources.html"><strong><</strong>Resources<strong>></strong></a>
<br>
<a class = "nav" href="Downloads.html"><strong><</strong>Downloads<strong>></strong></a>
<br>
<a class = "nav" href="AboutUs.html"><strong><</strong>About Us<strong>></strong></a>
<br>
</td>
</tr>
</table>
</div>
<br>
</div>
<div id="drop">
WORK!
</div>
<div id="main">
<div id="newshead"><font class="heading">NEWS</font></div>
<div id="news"><font class="date">10-21-2004</font></div>
<div id="newsbody">
<font class="news">
C++ Tutorial #1 is now available for download. Download at your own risk I repeat download at your own risk. I will not be responcible
for damages to your computer for any reason.
<br>
<strong>-Cory Fisher</strong>
</font>
</div>
<div id="news"><font class="date">10-20-2004</font></div>
<div id="newsbody">
<font class="news">
Hello world source code is now available for download. Although very basic this
will be a very good learning experience for those who would like to learn c/c++.
Everyone starts out with hello world :)
<br>
<strong>-Cory Fisher</strong>
</font>
</div>
</div>
</div>
</body>
</html>

mycss.css
a.nav{text-decoration:none;}
a.nav:link{color:red;} 
a.nav:visited{color:red;} 
a.nav:hover{color:blue;} 
a.nav strong{color:purple;} 
a.nav:hover strong{color:red;}
font.heading{
	font-size: 25px;
}
font.date{
	font-size: 20px;
}
font.news{
	font-size: 15px;
	text-indent: 35px;
}
#container{
	width: 800px;
	height: 100%;
	background-color: black;
	position: absolute;
}
#menuhead{
	margin-left: 0px;
	width: 150px;
	background-color: teal;
	text-indent: 50px;
	color: white;
	position: absolute;
}
#menu{
	margin-top: 34px;
	width: 150px;
	height: 200px;
	background-color: purple;
	position: absolute;
}
#main{
	margin-left: 160px;
	width: 650px;
	height: 100%;
	color: white;
	background-color: black;
	position: absolute;
}
#news{
	margin-left: 10px;
	margin-top: 5px;
	width: 650px;
	background-color: teal;
	position: relative;
}
#newshead{
	margin-left: 10px;
	width: 650px;
	background-color: teal;
	position: relative;
	text-indent: 50%;
}
#newsbody{
	margin-left: 10px;
	width: 650px;
	background-color: purple;
	position: relative;
}
#article{
	margin-top: 210px;
	width: 150px;
	height: 25px;
	background-color: purple;
	position: relative;
	font-size: 15px;
}
#drop{
	margin-left: 0px;
	margin-top: 250px;
	width: 650px;
	background-color: purple;
	position: absolute;
	visibility: hidden;
}

Thanks a lot guys,

Share this post


Link to post
Share on other sites
Advertisement
Guest Anonymous Poster
Weak and use spell checker.

Share this post


Link to post
Share on other sites
Quote:
Original post by GotenRulezU
Thx any ideas on improvement?


The colour scheme made me upchuck.

Also I'm not an expert on HTML but


<strong><</strong>Resources<strong>></strong>



just seems messed up.

Share this post


Link to post
Share on other sites
Check my css it makes sense :)
My css is set so anything in that link thats in strong tags will be colored so u can see it only when mouseover :)

Share this post


Link to post
Share on other sites
Needs a link to gamedev [smile]

And, I would agree that the color scheme isn't too pleasing :( Try for something more neutral.


andrew.

Share this post


Link to post
Share on other sites
I am not very good at HTML so I can't speak on that. What you have so far just "feels" cramped. I don't know, maybe space it out a little more. Colors...I can't talk, my color coordination sucks. I use this web site a lot when I need colors that won't burn my eyes out of their sockets. ColorMatch 5k

Good luck.

Share this post


Link to post
Share on other sites
A few suggestions:

1. as other people have said, change the colors...I'm not sure what would work best, but just try some things out, possibly more neutral or at least not as bright. Don't necessarily go to like black and white or anything, though...find something that still suits your tastes and fits you, since this appears to be a personal site.

2. It needs a header, a title that tells what the entire site is.

3. Just something to ponder: why is "NEWS" all caps while "Menu" isn't? Also, these two labels are ok, but I mean unless your target audience is completely new to the internet, they probably know that the group of differently colored text on the side is a menu, and a little less obvious but still fairly apparent is that the things that have dates and news on them are news.

4. I'm not sure if this would make it look better or not, but experiment with putting padding/more space on the sides of the news items so the text is not right up against the side of the box.

good start, though, keep it up!

Share this post


Link to post
Share on other sites
Get a decent host and stay clear of Geocities. Check this forum's FAQ for links to better free webhosting. Also, hosting is getting really cheap these days so you could just as well get paid hosting.

e.g: Generic Webhost which is partly run by a GDNet member IIRC.

Share this post


Link to post
Share on other sites
Nice hover effect. I'd suggest finding a colour scheme to use. There's a colour wheel schemer in the FAQ.

Share this post


Link to post
Share on other sites
I didn't look at a view of the site, just the html/css. Although your html is valid, it could be much cleaner. Wrapping < in your strong tags on all your items is a bad idea. You wind up with much more code than is needed. From a maintainability stand point this is going to become a nightmere. Expecially with multiple pages. I would use lists and define the bullets in the CSS the way you have used your "<" ">". At some point you are going to want to use real bullets or images anyways because using ascii characters is dull. CSS will allow you to easily change the look and feel of your entire site; but not the way you have used it.

I recommend going to the bookstore and picking up one of the "Visual Quickstart Guide" books. I have the DHTML and CSS book. It's a real quick read with lots of code and pictures for everything. Very well organised. They are only $15 bucks.

It's important to learn good coding standards now, before you get too set in your ways.

Share this post


Link to post
Share on other sites
Quote:
Original post by BobV
It's important to learn good coding standards now, before you get too set in your ways.


I agree. It's quite hard for me to break my habits of table-layout and to try to separate layout and design. The resources linked in this forum have helped me tremendously though. Especially ALA.

Share this post


Link to post
Share on other sites
Quote:
Check my css it makes sense :)
My css is set so anything in that link thats in strong tags will be colored so u can see it only when mouseover :)

It's not HTML. You need to use the less-than and greater-than entities if you want to use those characters in text. The <code>strong</code> tag is used for text that should be emphasized. If you want to define specific behavior for inline text, use the <code>span</code> tag. Specifically, the effect you want (showing/hiding angle brackets) can be accomplished using purely structural HTML and CSS generated content.

Note: Ignore above code tags. I'm peacefully protesting GameDev's lack of support for HTML-syle code markup.

Share this post


Link to post
Share on other sites
Well, some parts work and some parts don't. There are usually workaround or "gracefull degrading" methods for the parts that don't work though.

Share this post


Link to post
Share on other sites
Quote:
Original post by GotenRulezU
Why cant microsoft just get with the damn program.

Because they think they are the program.

Share this post


Link to post
Share on other sites
Quote:
Original post by Hylo
Needs a link to gamedev [smile]

And, I would agree that the color scheme isn't too pleasing :( Try for something more neutral.


andrew.


Please refer to wellstyled

There are some articles on web design and a really great color scheme generator in the tools section.

Share this post


Link to post
Share on other sites
I found out that ie6 does not support before or after elements. But i tested with netscape and it works. Question though is there somewhere i can get a breakdown of the % of user that use both ie and netscape ect.
EDIT: I also found out by testing cross browsers that they use different default fonts so I guess it would be smart to ALWAYS specify a font size. The default in ie is big the default in netscape is tiny.

Share this post


Link to post
Share on other sites
The best place to get browser stats is from your own site. Global the IE percentage is about 85%-95% (depending on the source) but geek/tech/games related sites usually attract far more non-IE browsers, with FireFox currently making headway. If you can't collect them at your own website then try to get data from sites that attract a similar audience as your own site.

As for cross-browser text sizes: Try this

Share this post


Link to post
Share on other sites
Quote:
Original post by Sander
Well, some parts work and some parts don't. There are usually workaround or "gracefull degrading" methods for the parts that don't work though.


This is true and also the reason I mentioned getting a good CSS book. It's not just about "degrading" but rather subtle differences. There are however many ways to incorperate both without problems. A good book will show you these techniques. It will save you a lot of time using trial and error. CSS can be very tricking and if you arn't coming from a solid background, experimenting like that can lead you to worse case code. Same thing applies with javascript. Once you get good command over CSS, you are going to want to command the great power of client side scripting.

Share this post


Link to post
Share on other sites
If you don't make profit from the site then you have a good excuse not to cater to those who are too lazy to get a non-broken browser ;)

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement