This is part 2 of the video series on how to code a website (taking a template from image form to it's XHTML/CSS version).
Go back and Watch part 1 if you haven't!
Video notes:
In this video we took our HTML from part 1 and altered it just alittle and added in our CSS styles.
This video assumes you have at least a basic understanding of CSS and it's elements.
<!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" lang="en">
<head>
<title>Geniva Requiem</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="#" title="Genieva Requiem">Genieva Requiem</a></h1> <!--for SEO-->
<a href="#" title="Genieva Requiem"><img src="images/logo.png" alt="Genieva Requiem" /></a>
</div>
<div id="slogan">
<h4><a href="#" title="Another free template form Fire Studios">Another free template from Fire Studios</a></h4>
</div>
<div style="clear: both"></div>
<div id="nav">
<ul>
<li><a href="#" title="Templates">Templates</a></li>
<li><a href="#" title="Graphics">Graphics</a></li>
<li><a href="#" title="Tutorials">Tutorials</a></li>
<li><a href="#" title="Members">Members</a></li>
</ul>
</div>
</div>
<div id="sidebar">
<div class="box">
<h2>Side-bar</h2>
<p>This is some random content, since I can't be bothered to read and re-type the content from the preview image. This is some random content, since I can't be bothered to read and re-type the content from the preview image.</p>
</div>
<div class="box">
<h2>Lists</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</div>
</div>
<div id="main">
<div id="main-top"><img src="images/content-top-corner.png" alt="" /></div>
<div id="content">
<h1>Heading:</h1>
<p>Proceded by normal content. Genieva Requiem is by far the weirdest name I’ve ever made up to use as a template name. The headings and content coloring are the same as the side bar but different sizes I believe (too lazy to look). The main point of this template that would make it desierable is the hieghtening navigation bar on the hover and when on the active page. I don’t know yet if I’m going to do that with AJAX or a simple Gradual Element Fader. If I can find a javascript that would do that I’ll take that option.</p>
<h2>:hover stuff:</h2>
<p>When the template is working, if you move your mouse over the sidebar the border will change to a turquoise similar to the active navigation tab. I’m not completely certian as to what will happen to the Main Content when hovered over, but I doubt I’ll do anything that might make the graphical border even harder. Also the Navigation will be going up when hovered over. I might make a color change in the footer on hover.</p>
<h3>Notes to self:</h3>
<p>Need to make sure and design the:</p>
<ul>
<li><blockquote></li>
<li><xmp></li>
<li><code>/<pre></li>
</ul>
<h4>Side-notes:</h4>
<p>This content area is turning out to be more difficult to achieve. But I have an idea on how I use some CSS to minimize editing my HTML. I'm off to CSS syntax land!</p>
</div>
<div id="main-bottom"><img src="images/content-bottom-corner.png" alt="" /></div>
</div>
<div id="footer">
<p>Genieva Requiem copyright © 2008 <a href="http://fire-studios.com" title="Fire Studios">Fire Studios</a>
<br />
Designed by: <a href="http://fire-studios.com" title="Fire Studios">Fire Studios</a></p>
</div>
</body>
</html>
/** Main **/
* {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
html {overflow: auto; background: #f0f0f0;}
body {margin: 0px auto; min-width: 975px; max-width: 1280px; font: normal 15px georgia; color: #79948c;}
a {text-decoration: none; color: #1E5D9C;}
a:hover {text-decoration: underline;}
p {line-height: 140%; text-indent: 1em; margin-bottom: 10px;}
img {border: none;}
h1 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
h2 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
h3 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
h4 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
h5 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
h6 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
ol {margin-left: 4em; margin-bottom: 10px; margin-top: -7px;}
ol li {line-height: 140%;}
ul {margin-left: 4em; margin-bottom: 10px; margin-top: -7px;}
ul li {line-height: 140%;}
/** Header **/
#header {background: #6a6a6a url(images/header-bg.png) top left repeat-x; height: 156px; margin-bottom: 23px;}
#header #logo {float: left; width: 537px; height: 43px; margin: 10px 10px;}
#header #logo h1 {visibility: hidden;}
#header #logo img {margin-top: -40px; float: left;}
#header #slogan {float: right; width: 300px; height: 43px; margin: 5px 5px 5px 5px;}
#header #slogan a {font: italic normal 19px "Gill Sans MT"; color: #ffffff; text-transform: capitalize;}
#header #nav {float: right;}
#header #nav ul {margin-top: 0px;}
#header #nav ul li {float: left; width: 136px; height: 43px; list-style: none; display: inline; background: transparent url(images/nav.png) top no-repeat; padding-left: 10px; text-align: center; margin-top: 47px;}
#header #nav ul li a {margin-left: -10px; color: #ffffff; font: bold 21px arial; line-height: 43px; padding: 20px 20px 20px 20px;}
#header #nav ul li:hover {background: transparent url(images/nav-hover.png) top no-repeat; height: 73px; margin-top: 17px;}
#header #nav ul li a:hover {padding-bottom: 70px;}
/** Side-bar **/
#sidebar {float: left; width: 269px; margin-left: 50px; overflow: hidden;}
#sidebar .box {background: transparent url(images/sidebar.png) bottom no-repeat; width: 269px; height: 253px; margin-right: 15px;}
#sidebar .box h2 {padding-top: 10px; text-align: center; padding-bottom: 10px;}
#sidebar .box p {padding: 0px 20px 30px 20px;}
#sidebar .box ul, #sidebar .box ol {padding: 0px 20px 10px 20px; margin-left: 2em;}
/** Main Content **/
#main {float: right; width: 752px; background: url(images/content-left-repeat.png) left repeat-y;}
#main #main-top {background: url(images/content-top-repeat.png) top right repeat-x; margin-bottom: -10px;}
#main #main-bottom {background: url(images/content-bottom-repeat.png) bottom right repeat-x; margin-top: -10px;}
#main #content {width: 687px; float: right; background: #efefef url(images/content-grad.png) top left repeat-x; padding: 10px 20px 10px 20px;}
/** Footer **/
#footer {clear: both; text-align: center; padding-top: 15px;}
Nice work, Fire G!
I defiently like the navigation on this layout!
Your clear: both div techique is awesome. Can't wait for part 3!
9nGood idea.9u I compleatly agree with last post. sco
This is my project укладка ламината 8d
Hi
I like your posts, It makes me thinking.
Thank you for your website ;)
I made on photoshop backgrounds for youtube, myspace and more
my backgrounds:http://tinyurl.com/5b8ksl
take care and thank you again!
I really liked this post. Can I copy it to my site? Thank you in advance.
@Krisbelucci: Sure, but you must state (and link) that this is the original article.
(...) is other interesting source of information on this issue(...)