HTML and CSS RSS HTML and CSS RSS

Layout Sample #2

essential essential is offline Offline Nov 19th, 2008, 12:47 pm |
0
A two columned fixed layout with vertical navigation sample. Now all it needs is your great imagination. Hope you find this useful, and help you all the way in your web activities. Enjoy...
Show Printable Version Show Printable Version
Quick reply to this message  
Code Snippet
•
•
•
•
HTML and CSS Syntax
Toggle Plain Text
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>Layout Sample #2</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. <!--
  8. html, body { margin: 0; padding: 0; }
  9. body {
  10.      background: #000;
  11.      color: #696969;
  12.      font: normal 80%/1.5em Verdana, Helvetica, Arial, sans-serif;
  13.      text-align: center;
  14. }
  15. #wrapper {
  16.      width: 800px;
  17.      margin: 0 auto;
  18.      text-align: left;
  19.      padding: 0;
  20. }
  21. #header {
  22.      background: SlateBlue;
  23.      width: 548px;
  24.      height: 130px;
  25.      margin: 0;
  26.      float: left;
  27.      padding: 0;
  28.      padding-right: 20px;
  29. }
  30. #logo {
  31.      border: thin solid #444;
  32.      width: 556px;
  33.      height: auto;
  34.      margin: 5px 0 10px 5px;
  35.      float: left;
  36.      clear: both;
  37.      padding: 0;
  38.      background: #EAEAEA;
  39.      position: relative;
  40. } 
  41. #logo h1 {
  42.      margin: 5px 0 0 15px;
  43.      padding: 0;
  44.      float: left;
  45. }
  46. p { 
  47. margin: 50px 5px 2px 20px;
  48. }
  49. #side-bar {
  50.      float: right;
  51.      position: relative;
  52.      width: 230px;
  53.      height: 600px;
  54.      margin: 0;
  55.      background: #fff;
  56. }
  57. #wrap {
  58.      width: 546px;
  59.      margin: 0;
  60.      padding: 0;
  61.      float: left;
  62.      overflow: visible;
  63. }
  64. #side-block {
  65.      width: 30px;
  66.      height: 468px;
  67.      float: left;
  68.      position: relative;
  69.      margin: 0;
  70.      padding: 0;
  71.      background: SlateBlue;
  72.      border-right: 2px solid #000;
  73. }
  74. #side-block a:link, #side-block a:visited {
  75.      margin: 0;
  76.      padding: 0;
  77.      color: SlateBlue;
  78.      text-decoration: none;
  79.      font: bold 12px Arial, sans-serif;
  80. }
  81. #side-block a:active, #side-block a:hover, #side-block a.current {
  82.      margin: 0;
  83.      padding: 0;
  84.      color: #fff;
  85.      text-decoration: none;
  86.      font: bold 12px Arial, sans-serif;
  87. }
  88. #side-block span {
  89.      float: left;
  90.      text-align: center;
  91.      display: block;
  92.      margin: 1px 0 1px 2px;
  93.      padding: 3px 0 3px 0;
  94.      width: 26px;
  95.      background: #000;
  96. }
  97. #footer {
  98.      width: 800px;
  99.      height: 30px;
  100.      float: left;
  101.      magin: 0;
  102.      padding: 0;
  103.      position: relative;
  104.      background: SlateBlue;
  105. }
  106. #footer p {
  107.      margin: 0;
  108.      padding: 7px 5px 0 30px;
  109.      color: #eee;
  110.      font: 500 12px Arial;
  111. }
  112. #content {
  113.      width: 520px;
  114.      height: 468px;
  115.      overflow: hidden;
  116.      float: left;
  117.      margin: 0;
  118.      padding: 0;
  119.      background-color: transparent;
  120. }
  121. /* Additional Classes */
  122. .mini-nav {
  123.      width: 0 auto;
  124.      position: absolute;
  125.      right: 10px;
  126.      top: 5px;
  127.      margin: 0 auto;
  128. }
  129. .mini-nav a:link, .mini-nav a:visited {
  130.      text-decoration: none;
  131.      font: bold 10px Arial, sans-serif;
  132.      color: MediumSlateBlue;
  133.      text-transform: capitalize;
  134. }
  135. .mini-nav a:active, .mini-nav a:hover, .mini-nav a.current {
  136.     text-decoration: none;
  137.      font: bold 10px Arial, sans-serif;
  138.      color: #708090;
  139.      text-transform: capitalize;
  140. }
  141. .mini-nav p {
  142.       position: relative;
  143. }
  144. .nav {    
  145.      background: #E9E9E9;
  146.      border-top: 2px solid #000;
  147.      border-right: 2px solid #000;
  148.      width: 568px;
  149.      height: 468px;
  150.      margin: 0;
  151.      float: left;
  152.      padding: 0;
  153. }
  154. .nav #content h3 {
  155.      color: Midnightblue;
  156.      margin: 7px 0 7px 17px;
  157. }
  158. .nav #content p {
  159.      margin: 4px 0 3px 17px;
  160. }
  161. -->
  162. </style>
  163. <script type="text/javascript">
  164. <!--
  165. /* Remove this script when applying this template. */
  166. var filler = ['You are welcome to modify this template.', ' Layout sample #2 by essential -', 'if you have comments or suggestions, don\'t hesitate to drop-in a mail over my inbox!', 'Template #2/ released: 11-19-2008 -'];
  167. var filler2 = ['This is just a sample layout!', 'All contents must be filled according to you!', 'Time to bring out those great ideas!', 'Links waiting to be filled!']
  168. function textFiller(preloaded, message)
  169. { for ( var x = 0; x < message; x++ ) 
  170. { document.write( preloaded[Math.floor(Math.random() * 4)] + ' ' ); }
  171. }
  172. //-->
  173. </script>
  174. </head>
  175. <body>
  176. <div id="wrapper">
  177. <div id="side-bar">
  178. <!--Mini Nav Sample-->
  179. <div class="mini-nav"> 
  180. <a href="#" class="current">Home</a> | <a href="#">About</a> | <a href="#">Site Map</a> 
  181. </div><!--mini-nav-->
  182. <p><script type="text/javascript">textFiller(filler2,23);</script></p>
  183. </div><!--#side-bar-->
  184. <div id="wrap">
  185. <div id="header">
  186. <div id="logo"><h1> W E L C O M E ! </h1></div>
  187. </div><!--#header-->
  188. <div class="nav">
  189. <div id="side-block">
  190. <!--Sample Navigation-->
  191. <span><a href="#" class="current">H<br />O<br />M<br />E</a></span><span><a href="#">M<br />U<br />S<br />I<br />C</a></span>  <span><a href="#">M<br />O<br />V<br />I<br />E<br />S</a></span> 
  192. </div>
  193. <div id="content">
  194. <h3>Feel free to ask!</h3>
  195. <p><script type="text/javascript">textFiller(filler,11);</script></p> </div>
  196. </div>
  197. </div>
  198. <div id="footer"><p>&copy; 2008 yourdomain.com</p></div>
  199. </div>
  200. </body>
  201. </html>

Quick Comment
•
•
•
•
•
•
•
•
Message:
•
•
•
•


Similar Threads
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC