Last night I got a message from someone who wanted a design made (he had the picture, I had to remake it down to every cell padding), but he didn't realize that the design was done originally in CSS. Since he was offering a good amount of money for the design, I took a whack at it:
Code:
<html>
<head>
<style type="text/css">
td.top { border-style: solid; border-color: #B4B2B3; border-width: 1px 1px 1px 1px; background-image: url(DESIGN/gradient.gif); padding: 12px 4px 4px 5px }
td.left { border-style: solid; border-color: #B4B2B3; border-width: 0px 1px 0px 1px; background-color: #E3E1E2; padding: 11px 8px 8px 7px}
td.right { border-style: solid; border-color: #B4B2B3; border-width: 0px 0px 1px 0px; }
td.bottom { border-style: solid; border-color: #B4B2B3; border-width: 0px 1px 1px 1px; background-color: #E3E1E2; padding: 11px 9px 10px 0px}
td.add { border-style: solid; border-width: 1px 1px 1px 1px; border-color: #D4D2D3; background-color: #EDEBEC; padding: 7px 6px 6px 6px }
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.style2 {font-size: 10}
.style3 {
color: #3c8732;
font-weight: bold;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Do***ent</title>
</head>
<body>
<div align="center">
<table width="700" cellpadding="0" cellspacing="0">
<tr>
<td cl***="top" colspan="2" height="53" valign="top">
<table width="100%" height="43" cellpadding="0" cellspacing="0">
<td width="50%" valign="top">
<span cl***="style2">Logged in as<strong> tombarry</strong><br>
<a href="#">Logout</a>
</span>
</td>
<td width="50%">
<div align="right">
<br>
<br>
System Status: <span cl***="style3">ok</span>
</div>
</td>
</table>
</td>
</tr>
<tr>
<td cl***="left" width="187"><p><strong>Home</strong><br>
<br>
Service Control<br>
Rights Management<br>
System Integrity<br>
Settings<br>
<br>
Database Management<br>
<br>
Users<br>
<br>
Logout <br>
<br>
<br>
</p>
<div align="center">
<table width="170">
<tr>
<td cl***="add">
<strong>Update Available
</strong><br>
<br>
???? has been released and is ready to be installed.<br>
<br>
<a href="#">Update Details </a></td>
</tr>
</table>
</div> <br></td>
<td cl***="right" width="511"> </td>
</tr>
<tr>
<td cl***="bottom" colspan="2" height="42"><div align="right">Powered by ????<br>
Connected to main hub at ???? </div>
</td>
</tr>
</table>
</div>
</body>
</html>
Anyways, I really liked doing this and I know thats not even close to how much CSS there is to learn, and I wanted to know where I should start learning it? I've really been putting it off and I've been using Dreamweaver for everything, I figure this is my chance to learn to code clean and learn CSS at the same time!
Any sites that offer CSS tutorials are great. I already read alot at AListApart.com and a few other sites but I really need a beginners tutorial, sort of like a walkthrough.
Thanks,
Tyler