First attempt at xhtml/css

Hey

This is my first go at coding, created a design in photoshop and now I am trying to convert it to xhtml/css!

Here is what the actual website should look like when finished. http://dl.dropbox.com/u/11365869/dakka/website/v1.8.png

Below is how far I have got so far:

Website: DAKKA

CSS: http://dl.dropbox.com/u/11365869/dakka/This_is_what_I_mean_Icecream/style.css

Are there any issues so far? The only thing I seem to be stuck on now is sorting out the fonts properly - and making the background for the content area. I’m not actually sure I have sliced it properly. Here are the sliced images: http://dl.dropbox.com/u/11365869/dakka/website/slicedimages.rar

Any help would be appriciated! Thanks!

Your relying on images WAY to much. Anything that is text (content) should not be an image. Instead the content should be marked up using the appropriate HTML tag based on purpose. Essentially, turning off images and css renders your site just about worthless. All your images are presentational, decorating content so they have no place in the HTML.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>DAKKA / Home</title>
</head>
<body>

	<div id="container">
	
		<div id="masthead">
			<p>DAKKA<br>multi-gaming community<span></span></p>	
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Servers</a></li>
				<li><a href="#">Forum</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</div>
		
		<div id="content">
			<div id="main-content">
				<h1>Welcome to DAKKA gaming!</h1>
				<p>...</p>
				<p>...</p>
			</div>
		</div>
		
		<div id="footer">
			<small>DAKKAgaming.com</small>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Servers</a></li>
				<li><a href="#">Forum</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
	
	</div>

</body>
</html>

btw the only images needed are the background tile and logo. The gradients and rounded corners can be achieved using CSS in most modern browsers. Any older browsers that do not support gradients or rounded corners can either gracefully degrade or use something like CSS PIE to take care of it. At this point in time images for gradients and rounded corners is an out-dated technique.

Hmm thanks that looks very helpful! What do I do regards to CSS though to get the text in the top right for example?

Heres what I’ve done so far: !

DAKKA

Only thing I’m stuck with now is so that the index page will have the homepage as red! Its becoming tricky as its using CSS for the majority of the navigation bar.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>DAKKA / Home</title>
	<link type="text/css" media="screen" rel="stylesheet" href="dakka.css">
</head>
<body class="home">

	<div id="container">
	
		<div id="masthead">
			<p>DAKKA<br><em>multi-gaming community</em><span></span></p>	
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Servers</a></li>
				<li><a href="#">Forum</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</div>
		
		<div id="content">
			<div id="main-content">
				<h1>Welcome to DAKKA gaming!</h1>
				<p>...</p>
				<p>...</p>
			</div>
		</div>
		
		<div id="footer">
			<small>DAKKAgaming.com</small>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Servers</a></li>
				<li><a href="#">Forum</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
	
	</div>

</body>
</html>


/*
* Global reset -----------------------------------------------------------------------------
*/
body,html {
	padding: 0;
	margin: 0;
}

/*
* Layout ----------------------------------------------------------------------------------
*/

body {
	background: transparent url(http://dl.dropbox.com/u/11365869/dakka/This_is_what_I_mean_Icecream/images/bg.png) repeat-x top left;
}

#container {
	margin: 39px auto 0 auto;
	width: 43em;
	
	/* positioning context for first menu inside masthead */
	position: relative;
	
	background-color: #262626;
	
	font-family: sans-serif;
	
	/* apply box shadow */
	-webkit-box-shadow: 15px 5px 50px 0;
	-moz-box-shadow: 15px 5px 50px 0;
	box-shadow: 15px 5px 50px 0;
}

#content {
	width: 70%;
	margin: 0 auto;
}

/*
* Masthead -------------------------------------------------------------------------------
*/

#masthead {
}

	#masthead p { /* branding */
		margin: 0 auto 0 auto;
		width: 500px;
		height: 189px;
		position: relative;
		color: #010101;
		top: -13px;
	}
	
	#masthead p em {
		color: #262626;
	}

	#masthead p span {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		
		background: transparent url(http://dl.dropbox.com/u/11365869/dakka/html/images/logo.png) no-repeat top left;
	}
	
	
#masthead ul { /* menus */
	overflow: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

	#masthead ul li {
		float: left;
	}
	
	#masthead p + ul {
		position: absolute;
		top: -28px;
		right: 0;
	}
	
		#masthead p + ul li {
			border-left: 1px solid #656565;
			padding: 0 .5em;
		}
		
		#masthead p + ul li:first-child {
			border: none;
		}
		
		#masthead p + ul li a {
			font-size: small;
			color: #656565;
			text-decoration: none;
		}
		
		#masthead p + ul li a:hover {
			color: #e1e1e1;
		}
		
	
	#masthead ul + ul {
		width: 75%;
		margin: 0 auto;
		
		/* rounded corner application */
		-moz-border-radius: .3em;
		-webkit-border-radius: .3em;
		border-radius: .3em;
	}
	
		#masthead ul + ul li {
			width: 25%;
			
			/* gradient application @todo: cross browser support */
			background-image: -moz-linear-gradient(#4e4e4e 50%, #070707 60%);
			background-image: -o-linear-gradient(#4e4e4e 50%, #070707 60%);
			background-image: -webkit-linear-gradient(#4e4e4e 50%, #070707 60%);
			background-image: -webkit-gradient(linear,0% 0%,0 100%,color-stop(50%,#4e4e4e),color-stop(60%,#070707));
			background-image: linear-gradient(#4e4e4e 50%, #070707 60%);
		}
	
		#masthead ul + ul li a {
			display: block;
			text-align: center;
			padding: .5em 0;
			border-left: 1px solid #6d6d6d;
			
			font-style: italic;
			text-transform: uppercase;
			text-decoration: none;
			color: #e1e1e1;
		}
		
		#masthead ul + ul li a:hover {
			background-color: rgba(240,67,67,.5);
		}
		
		#masthead ul + ul li:first-child a {
			border: none;
		}
		
/*
* Footer ---------------------------------------------------------------------------
*/
#footer {
	border-top: 1px solid #656565;
	padding: .5em 0 1em 0;
	margin: 0 auto;
	width: 60%;
	
	color: #656565;
}

	#footer small {
		text-align: center;
		width: 100%;
		display: block;
		color: inherit;
		margin-bottom: .25em;
	}
	
	#footer ul {
		list-style: none;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	
		#footer li {
			display: inline-block;
		}
		
		* html #footer li {
			display: inline;
		}


		*+html #footer li {
			display: inline;
		}
		
		#footer li:before {
			content: " - ";
		}
		
		#footer li:first-child:before {
			content: "";
		}
		
		#footer li a {
			color: inherit;
			text-decoration: none;
			font-size: small;
		}
		
		#footer li a:hover {
			text-decoration: underline;
		}

/*
* Home page ------------------------------------------------------------------------
*/
body.home h1 {
	background-color: blue;
	padding: .5em;
	
	background-color: #842c2c;
	font-size: 1.25em;
	color: #e1e1e1;
	font-family: sans-serif;
	font-weight: lighter;
	
	/* rouned corner application @todo: cross browser support */
	-moz-border-radius: .75em;
	-webkit-border-radius: .75em;
	border-radius: .75em;
}

body.home #content p {
	color: #e1e1e1;
}

NOTE: An effort has been made to maintain the integrity of the design intact in older browsers however, there will be some loss such as; gradients, rounded corners in IE. I would recommend looking into CSS PIE if its a big issue.

DISCLAIMER: Has not been tested in ANY version of IE.