fluidity : Design 2 « Templates « HTML / CSS

HTML / CSS » Templates » Design 2 
fluidity
     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Fluidity.com</title>
<style type='text/css'>
/* A fluid template for business or fun */
/* By Dave Reeder, www.davereederdesign.com */

body margin: 0; padding: 0; background: #262626}

{margin: 0; padding: 0; border: 0; font-family: "Trebuchet MS", Arial, sans-serif; }


/*------------Basic styles------------*/

p, h1, h2, h3, span#copyright, span#design margin: 0 10px; color: #fff; font-weight: normal; text-decoration: none; background: transparent }

font-size: 0.8em; line-height: 1.4em; text-align: justify }
h1 font-size: 1.3em; line-height: 1.4em; letter-spacing: 0.25em }  /* site heading */
h2 font-size: 1.0em; line-height: 1.4em; color: #FFA000 }  /* site heading */
h3 font-size: 0.8em; line-height: 1.4em; color: #FFA000  }        /* sub headings */
span#copyright font-size: 13px; line-height: 35px }  /* sets the copyright styles */
span#design {  float: right; font-size: 13px; line-height: 35px }  /* floats the design link into position */
span.validation {  float: right; margin-right: 10px; /* floats the validation buttons */
.validation img {  margin: 0/* floats the validation buttons */

div padding: 10px 0;}

#hdrimg a {color: #06FF00; text-decoration: none; font-weight: normal;}
#hdrimg a strong {color: #fff; text-decoration: none; font-weight: normal;}
#hdrimg a:hover {color: #fff; text-decoration: none; font-weight: normal;}
#hdrimg a:hover strong {color: #06FF00; text-decoration: none; font-weight: normal;}

{color: #06FF00; text-decoration: none}
a:hover {color: #fff; text-decoration: underline}


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

#hdrimg {      /* Large image */
  float: left;       
  width: 100%;
  margin-bottom: 5px;
  background: url('fluidity-images/hdr.gif') repeat-x;
  height: 170px;    /* ie5x hack begins here */     
  voice-family: "\"}\"";
  voice-family: inherit;
  height: 150px;
}
html>body #hdrimg {
  height: 150px;        /* ie5x hack ends here */
}

.rowcontainer {            /* Used to keep the divs in a row.  you can use this for any size of divs */
  float: left;
  margin-bottom: 5px;
  width: 100%;
  overflow: hidden;
  background: #333;
}

#bttmbar float: left; width: 100%; height: 35px; background: url('fluidity-images/hdr.gif') bottom repeat-x }    /* Bottom copyright bar */


/*------Columns: Note they dont add up to 100%, this is intentional to avoid problems!----------*/ 

.fullcolumn float: left; width: 99%;}    /* Full width column for a one column site */
      
.halfcolumn float: left; width: 49%;}    /* Half width column for a two column site. */

.onethirdcolumn float: left; width: 33%; }    /* One third width column for a three column site */

.quartercolumn float: left; width: 24.5}    /* One quarter width column for a four column site */


/*------------------------------Main Navigation------------------------------------------*/

#nav position: absolute; top: 145px; left: 0px; height: 25px; width: 100}

ul#nav  margin: }

#nav li  /* Main nav list items */
{
  font-size: 13px;
  float: left;
  list-style: none;
  text-align: center
}

#nav li a {   /* Main nav styles for all links */
  display: block; /* Although display:block suggests a vertical list the float:left property under #nav li causes the menu to float inline */
  margin-left: 5px; /* adds a gap between the tabs */
  width: 90px;   /* width of the tab */
  line-height: 25px; /* height of the tab */
  text-decoration: none;
}
   
#nav a:link, #nav a:visited  background: url('fluidity-images/tab.gif') no-repeat -25px }

#nav a:hover, #nav a:active background: url('fluidity-images/tab.gif') no-repeat 0 0 }

#nav a#current background: url('fluidity-images/tab.gif') no-repeat 0 0 }


/*-----------------------------------Other tags-----------------------------------------*/

acronym border-bottom: 1px dashed #999; cursor: help }

/* lists */
ul margin: 5px 0 5px 35px; list-style: url('fluidity-images/bullet.gif') }
ol margin: 5px 0 5px 35px; list-style: decimal }
ol li, ul li color: #fff; font-size: 0.8em; line-height: 1.4em }

hr margin: 10px 0px; height: 1px; background: #444; color: #444 }  /* rule styling */

img {margin: 0 10px/* all images styling */
img.right {float: right}  /* right floating images */
img.left {float: left}   /* left floating images */

</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="hdrimg"> <span class="validation"> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="fluidity-images/fluidcss.gif" alt="" /></a> <a href="http://validator.w3.org/check?uri=referer"><img src="fluidity-images/fluidxhtml1.1.gif" alt="" /></a> </span>
  <h1><a href="http://www.free-css.com/"><strong>fluidity</strong>.com</a></h1>
  <ul id="nav">
    <li><a href="http://www.free-css.com/" id="current">home</a></li>
    <li><a href="http://www.free-css.com/">about</a></li>
    <li><a href="http://www.free-css.com/">blog</a></li>
    <li><a href="http://www.free-css.com/">contact</a></li>
    <li><a href="http://www.free-css.com/">links</a></li>
  </ul>
</div>
<!-- end of hdr img -->
<div class="rowcontainer">
  <div class="fullcolumn">
    <h2>Welcome to Fluidity.com</h2>
    <p>Hello and welcome to fluidity.com a template by <acronym title="Dave Reeder Design">drd</acronym><br />
      I wanted to finish 2005 with something a bit different.  Although this template appears to be simple and the <acronym title="Cascading Style Sheets">CSS</acronym> is quite small, it is highly versatile.  Fluidity.com is a <acronym title="Expands when you resize the window">fluid</acronym> layout which has all the CSS needed to create one, two, three or four column layouts.<br />
      Because Fluidity.com uses a row div called "rowcontainer" to keep the columns together, you can mix and match the number of columns on one page just like I have in the standard configuration of the template.</p>
    <h3>A note from the author</h3>
    <p>You can see more of my work on my site: www.davereederdesign.com.  If you have any problems using the template or simply want to say "hi" then it would be great to hear from you!</p>
    <p>Hope you have fun with the template,<br />
      <br />
      -Dave</p>
  </div>
</div>
<div class="rowcontainer">
  <div class="halfcolumn">
    <h3>Careful testing</h3>
    <p>Careful testing of any webpage should be top priority, so I've validated the code and tested the template in the following browsers: </p>
    <ul>
      <li>Internet Explorer 5.5</li>
      <li>Internet Explorer 6.0</li>
      <li>Mozilla Firefox 0.8</li>
      <li>Opera 7.54u2</li>
      <li>Netscape 7.2</li>
    </ul>
  </div>
  <div class="halfcolumn">
    <h3>Controlling the columns</h3>
    <img src="fluidity-images/sample.gif" alt="" class="right" />
    <p>Of course, the columns do <em>not</em> have to be of equal proportions.  You could specify one column that was a quarter of the screens width and another which was three quarters.  Simply specify a column in the xhtml with a class name that corresponds to the relevent column in the CSS. <br />
      <br />
      Now I'll leave you with some Lorem Ipsum to fill the rest of the space :)</p>
  </div>
</div>
<div class="rowcontainer">
  <div class="onethirdcolumn">
    <h3>Example of three columns!</h3>
    <p>Nam ac ligula. Morbi cursus nonummy leo. Duis aliquet. Quisque rhoncus, odio eget malesuada imperdiet, magna lectus iaculis velit, in tincidunt odio sapien nec lacus. Curabitur ullamcorper metus ac justo.<br />
      <br />
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer volutpat leo sit amet eros. Sed vestibulum porta sapien. Nunc venenatis tortor ut massa. Aliquam ut eros. Sed tempus nibh id felis. Cras vehicula tincidunt orci. Mauris viverra, diam id volutpat condimentum, dolor nisl pretium nisi, ut blandit nisi neque tempus lectus. In ultricies metus quis est. Integer lobortis pretium elit. Curabitur et turpis. Morbi vitae sem at odio sagittis consequat. </p>
  </div>
  <div class="onethirdcolumn">
    <h3>Example of three columns!</h3>
    <p> Proin arcu sem, tempor vel, luctus sagittis, dictum sit amet, lectus. Phasellus leo ante, elementum id, pellentesque non, cursus eget, purus. Aenean lobortis laoreet quam. Nullam enim. Aenean malesuada, diam in tempor feugiat, nibh arcu feugiat eros, ut rutrum dolor diam sed nulla. Etiam sit amet nisl at dui cursus auctor. Nunc vulputate est et leo. Curabitur dolor leo, vulputate elementum, egestas viverra, gravida eget, nisi. Suspendisse sed odio. Duis sed dolor. Nulla euismod ipsum vitae quam. Sed sed libero. Nam sed mauris eu sem fermentum varius. Aliquam porttitor consectetuer ipsum. Duis sagittis ipsum sed justo. Vestibulum consectetuer. </p>
  </div>
  <div class="onethirdcolumn">
    <h3>Example of three columns!</h3>
    <p>Quisque sed nisi et quam aliquam volutpat. Aliquam erat volutpat. Vivamus id ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ac lorem. Proin venenatis rutrum nisl. Donec molestie laoreet tortor. Maecenas velit. Vivamus pulvinar pellentesque eros. Nulla feugiat. Quisque sit amet nulla mattis dolor adipiscing bibendum. Nam odio urna, convallis eu, vestibulum eu, molestie in, libero. </p>
  </div>
</div>
<div class="rowcontainer">
  <div class="quartercolumn">
    <h3>Example of four columns!</h3>
    <p>Morbi metus diam, faucibus tincidunt, mattis et, tristique in, massa. Pellentesque ac nulla in neque interdum suscipit. Nunc sodales. Curabitur a mauris. Maecenas eu elit at tortor convallis congue. <br />
      <br />
      Donec id tortor ut ligula sagittis feugiat. Integer cursus. Vestibulum tellus lectus, tincidunt sed, imperdiet eu, congue et, diam. In eget diam a tortor pulvinar mattis. </p>
  </div>
  <div class="quartercolumn">
    <h3>Example of four columns!</h3>
    <p> Quisque et tellus. Nulla egestas rutrum massa. Etiam nisi. Morbi mauris urna, auctor vel, ullamcorper et, cursus luctus, magna. Fusce tristique. Vestibulum varius auctor dolor. Donec bibendum faucibus nibh. <br />
      <br />
      Duis dapibus blandit erat. Nam orci. Ut justo. Fusce ornare neque vitae leo. Nullam laoreet. Etiam adipiscing, arcu nec dapibus laoreet, nunc nibh facilisis erat, quis ultricies purus odio at tellus. </p>
  </div>
  <div class="quartercolumn">
    <h3>Example of four columns!</h3>
    <p>Curabitur at velit id massa gravida tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi convallis. Sed aliquam nunc non quam. Nulla porttitor convallis erat. Cras venenatis. Quisque id dolor. Vivamus vitae purus. Duis posuere, risus sit amet viverra bibendum, augue eros pellentesque nibh, vitae mollis nisl libero nec justo. </p>
  </div>
  <div class="quartercolumn">
    <h3>Example of four columns!</h3>
    <p>Ut a nunc. Ut quam. Proin ullamcorper, leo ut varius luctus, nulla purus ultricies nibh, ac ornare libero elit non elit. Donec cursus vestibulum mi. Sed risus. Pellentesque justo. Nunc ac elit. </p>
  </div>
</div>
<div id="bttmbar"> <span id="design">design: <a href="http://www.davereederdesign.com/">davereederdesign.com</a></span><span id="copyright">Copyright &copy; 2005 Yourcopyright. All Rights Reserved</span> </div>
<!-- end of bttmbar -->
</body>
</html>

   
    
    
    
    
  
Related examples in the same category
1.metamorph_drop
2.metamorph_energybolt
3.metamorph_exit
4.metamorph_global
5.metamorph_glowing
6.metamorph_host
7.metamorph_icybreeze
8.metamorph_interiordesign
9.metamorph_interstate60
10.metamorph_lotr
11.metamorph_lyrics_lt
12.metamorph_melancholy_lt
13.metamorph_mercuryworld
14.metamorph_metaform
15.metamorph_models
16.metamorph_nuke
17.metamorph_oldheavens
18.metamorph_palmbeach
19.metamorph_strongrey_lt
20.metamorph_thames
21.metamorph_transitional
22.metamorph_tropic
23.metamorph_truncata
24.metamorph_tubes
25.metamorph_tunel
26.ablaze
27.aboutfruts
28.abrasive
29.abscond
30.abstraction
31.acallia-development
32.accomplishable
33.actualbiz
34.adhesive
35.adios
36.advantage
37.aero-solutions
38.aerolyk
39.affection
40.agency
41.ahoy
42.al-infolabs
43.alexx-c
44.alieninvasion
45.alpha
46.altered
47.altruism
48.ambiance
49.amoreira
50.angryhornet
51.anibanner01
52.AnotherSquare
53.anther
54.anthropod
55.Antikoerperchen
56.antiquity
57.aphotic
58.applique
59.aprilshowers
60.Arbenting-MinimalistResumeTemplate
61.expanding-portfolio
62.experience
63.expertvision
64.exploitable
65.ezine02
66.familiar
67.favorite-cakes
68.featherlight
69.featuring
70.femflex1
71.fernando1
72.fertilization
73.Fibre
74.fibreglass
75.filaments
76.findingpeace
77.firerescuesquad
78.fivestar
79.Flair Template
80.flair
81.flan2
82.flange
83.flattering
84.flavour
85.fleur
86.flightandfight
87.fluidsolution
88.flyover-builders
89.WP-Bliss
90.website-design
91.website-traffic
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.