Stay N Tom

Showing a slice of what it means to be Thomas.

Pages

Wednesday, April 10, 2013

I can weave the fabric of code!!

Hello, I am ______ ____ and I am here to teach more layout. I now use adobe dreamweaver to punch in my code. So last time I did this:





     I have a weird feeling...  BABOOM!


Hi I can be your table of contents side bar!
I'm the main page Want to know how I did this? Well I'll tell you how. It is by FLOATING! Floating is a very useful tool to put things in the right order. It can make your website look very pretty.






This time we're going to do this or something like it(when I said we I mean all of us, I don't want to do it alone):
Feature
Column One
Column Two
Column Three
© Copyright 2013






Well here is the code:






<div class="container_12 clearfix">
<div class="grid_12" id="top">
<h1>
Logo</h1>
<div id="nav">
<ul>
<li><a href="http://www.blogger.com/tom.staynalive.com">Home</a></li>
<li><a href="http://www.blogger.com/tom.staynalive.com">Products</a></li>
<li><a href="http://www.blogger.com/tom.staynalive.com">Services</a></li>
<li><a href="http://www.blogger.com/tom.staynalive.com">About</a></li>
<li><a href="http://www.blogger.com/tom.staynalive.com">Contact</a></li>
</ul>
</div>
</div>
<div class="grid_12" id="feature">
Feature</div>

<div class="article grid_4">
Column One</div>
<div class="article grid_4">
Column Two</div>
<div class="article grid_4">
Column Three</div>
<div class="grid_12" id="bottom">
© Copyright 2013</div>

<style href="css/960_12_col.css" type="text/css">

#nav, #feature, .article, #bottom {
background-color: #efefef;
margin-top: 20px;
padding: 10px 0px 5px 0px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}

#feature, .article {
height: 100px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}

li {
display: inline;
padding: 5px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}

#top {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}

</style>

2 comments:

  1. Thank you great blog input. need to buy template some day, reviewed a whole bunch template makers and now this pretty template.

    ReplyDelete
    Replies
    1. Could you explain?

      I don't get what your saying.

      Delete