CSS Challenge!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

CSS Challenge!

Post by Roja »

I contribute to a PHP game called Blacknova Traders.

I'm working on the next generation version (Codename: ProtonPack), and trying to convert the login page to be css driven.

I have a partially table-based layout, and I hope that we can use CSS to replicate the current design instead of tables.

The url for the html version is here: http://kabal-invasion.com/css-challenge/

To the best of my ability, I have validated the page against the HTML, CSS, WAI, and other standards. I'd like to retain at least the same level of compliance I have now for any solution.

Suggestions on how to replace the table based layout with CSS alternatives are extremely appreciated.
User avatar
Zoram
Forum Contributor
Posts: 166
Joined: Sun Aug 18, 2002 3:28 pm
Location: Utah
Contact:

Post by Zoram »

Its not as refined as yours but you should be able to refine it more if you want to use it. I've used one table for the login form since i find that tables make them look a lot nicer.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--

* {
	margin: 0px;
	padding: 0px;
}

body {
	color: #FFFFFF;
	background-color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

h3 {
	background-color: #666666;
	font-weight: bold;
	padding-left: 4px;
}

div#title {
	background-image: url(includes/header-stretch.png);
	background-repeat: repeat-x;
	height: 80px;
}

div#main {
	background-color: #666666;
}

.right {
	float: right;
	width: 25%;
	height: 300px;
	background-color: #000000;
	margin-left: 3px;
}

.padd {
	padding: 4px;
}

-->
</style>
</head>
<body>
<div id="title"> <img src="includes/header.png" alt="BlackNova Traders" /> </div>
<div id="main">
	<div id="right1" class="right padd">
		<div style="height: 150px;">
			<strong>Forgot your password?</strong> <br />
			Enter just your email address and click login.
			<p><strong>Game number?</strong> <br />
			This server runs multiple games: Make sure to pick the correct game number to login to. </p>
			<p> <strong>New user?</strong> <br />
			Sign up now by clicking on the Join button. </p>
		</div>
		<h3>Server Stats</h3>
			Games currently active: <strong>1</strong><br />
			New players today: <strong>0</strong><br />
			&nbsp;
		<h3>Forums</h3>
			<a href="http://forums.blacknova.net/" tabindex="13">Main Forums</a><br />
			<a href="http://discuss.blacknovatraders.com/" tabindex="14">Development Forums</a><br />
			<a href="http://forums.example.com/" tabindex="15">Debug server Forums</a>
	</div>
	<div id="right2" class="right padd">
		<table cellpadding="0" cellspacing="0" height="150">
			<tr>
				<td align="right" width="85"><label for="Email">Email:</label>&nbsp;</td>
				<td align="left"><input id="Email" name="email" size="20" maxlength="35" value="Your Email Address" tabindex="1" onfocus="clearDefault(this)" class="colorinputbox" type="text" /></td>
			</tr>
			<tr>
				<td align="right"><label for="Password">Password: </label>&nbsp;</td>
				<td align="left"><input id="Password" name="password" size="20" maxlength="20" value="" tabindex="2" type="password" />
				<input name="encrypted_password" value="" type="hidden" /></td>
			</tr>
			<tr>
				<td align="right"><label for="Game">Game: </label>&nbsp;</td>
				<td align="left"><p class="center">
				<select tabindex="3" name="gamenum" id="Game" class="indexdropdown">
				<option value="1" selected="selected">Game #1</option>
				<option value="2">Game #2</option>
				</select>
				</p></td>
			</tr>
			<tr>
				<td align="right"><label for="Language">Language: </label>&nbsp;</td>
				<td align="left"><p class="center">
				<select tabindex="4" name="newlang" id="Language" class="indexdropdown">
				<option value="english" selected="selected">English</option>
				</select>
				</p></td>
			</tr>
			<tr>
				<td></td>
				<td><input class="indexyellow" alt="Login" name="submit" value="Login" tabindex="5" type="submit" />
				&nbsp;&nbsp; <a href="http://example.com/new.php" tabindex="6">
				<button class="indexyellow" tabindex="6">Join</button>
				</a> </td>
			</tr>
		</table>
		<h3>Current Game Information</h3>
			<a href="http://example.com/settings.php" tabindex="7">Settings</a><br />
			<a href="http://example.com/ranking.php" tabindex="8">Rankings</a><br />
			<a href="http://example.com/news.php" tabindex="9">BlackNova News</a><br />
      <h3>Help</h3>
			<a href="http://example.com/faq/index.htm" tabindex="10">FAQ</a><br />
			<a href="http://example.com/newplayer.php" tabindex="11">New Players Guide</a><br />
			<a href="mailto:%61%64%6d%69%6e@%65%78%61%6d%70%6c%65.%63%6f%6d" tabindex="12">Contact Us</a><br />
    </div>
	
	<div class="padd">
		<strong>What is BlackNova Traders (<acronym title="BlackNova Traders">BNT</acronym>)?</strong>
		<p>BlackNova Traders is a web based, multiplayer space exploration game
		inspired by the popular BBS games of TradeWars and Ultimate Universe. </p>
		<p><strong>Can I run this game on my server?</strong></p>
		<p>Yes! <acronym title="BlackNova Traders">BNT</acronym> is developed under the GNU General Public License, a freedom software
		license. Feel free to download the latest copy from our project page on <a href="http://sourceforge.net/projects/blacknova" tabindex="19">SourceForge</a>. <br /></p>
		<div class="thinline"></div>
		<p> <strong>Play on other servers</strong> </p>
		<p> <a href="http://bnt1.blacknova.net/" tabindex="16"> <acronym title="BlackNova Traders">BNT</acronym> Main Game</a><br />
		<a href="http://bnt2.blacknova.net/" tabindex="17"> <acronym title="BlackNova Traders">BNT</acronym> Secondary Game</a><br />
		<a href="http://play.blacknovatraders.com/" tabindex="18"> <acronym title="BlackNova Traders">BNT</acronym> Development Game</a></p>
	</div>
	<div style="clear: both;"></div>
</div>
<div class="foot">
	<div>
		<div style="float: right; width: 33%; text-align: right;"> <a href="http://example.com/docs/copyright.htm" tabindex="99">Copyright 2000 Ron Harwood and L. Patrick Smallwood</a> </div>
		<div style="float: right; width: 33%; text-align: center;"> <a target="_blank" href="http://example.com/showsource.php?file=index.php" tabindex="98" onclick="popUp(this.href,'elastic',400,400);return false;" rel="external">View Source</a> </div>
		<a href="http://sourceforge.net/projects/blacknova" tabindex="96"> Blacknova Traders </a>
	</div>
</div>
<!-- End Legally-required footer -->
<!-- Updates notice -->
<div align="center"> <strong>Updates are not occuring properly</strong> </div>
<!-- End Updates notice -->
<div align="center">Page generated in 0.225 seconds.</div>
</body>
</html>
I think that has the basic properties that you were looking for.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

Okay, I've taken your version, and made it 'fit' as close as I can to the original:

http://www.kabal-invasion.com/css-challenge/index2.html

However, it has some issues that I still need fixed.

First is the overlap on the far right between the "new user" section and the "Server Stats" section. Any way to prevent that?

Second is the grey line between "Help" and "Forums".. it seems to be part of the main div, and I can't see a way to remove it without breaking the color on the left.

Finally, resizing is far more brittle now.. in the original, at 800x600, it looked crowded, but it was all readable. In the new version, it overlaps, and is not readable.

Ideas?

(BTW, we can't go to xhtml, because the majority of the game is nowhere near xhtml-compliant, and shares the same doctype throughout - including this page).
User avatar
Zoram
Forum Contributor
Posts: 166
Joined: Sun Aug 18, 2002 3:28 pm
Location: Utah
Contact:

Post by Zoram »

I used a hight on the div with the forgot password and new user stuff... if you remove the height from that and the table with the login fields it should be alright.

For removing the grey line take the 'margin-left: 3px;' off the right class and put it as a style on the right2 div.

lets see if you still have resize issues after these changes.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

Zoram wrote:I used a hight on the div with the forgot password and new user stuff... if you remove the height from that and the table with the login fields it should be alright.

For removing the grey line take the 'margin-left: 3px;' off the right class and put it as a style on the right2 div.
Excellent! I did both, and that did indeed fix things considerably.

I also cleaned up a few minor issues with the fonts, and we're *really* close now.
Zoram wrote:lets see if you still have resize issues after these changes.
Unfortunately, we still do. If I resize to under 800x600, the text overlaps each other, instead of pushing each other out, like the original does. Any ideas?

I'm thinking we need absolute instead of float, but I dont see a way to do it without breaking the current look.

BTW, excellent job.. I love the use of H tags, and the code is definitely much more to my liking now.. just need to fix that one minor issue. :)
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post by neophyte »

try adding a min-width: xxxpx; to the center division. Then you will probably need to clear: both; on the right and left columns.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Roja,
still need help with converting that page to css? If so, if you point me to the current page you're working on, I might help.
Post Reply