Advertisement
Guest User

Untitled

a guest
Aug 12th, 2010
216
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.03 KB | None | 0 0
  1. <html>
  2.     <head>
  3.    
  4.     <style>
  5. * {
  6.     padding: 0;
  7.     margin: 0;
  8. }
  9.  
  10. html {
  11.     background-color: #fff;
  12.     height: 100%;
  13.     width: 100%;
  14.     }
  15.  
  16. body{
  17.     text-align: left;
  18.     font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
  19.     font-size: 12px;
  20.     line-height: 20px;
  21.     height: 100%;
  22.     width: 100%;   
  23.     overflow: hidden;
  24.     }
  25.  
  26. #container {
  27.     min-width: 100%;
  28.     height: auto !important;
  29.     height: 100%;
  30.     min-height: 100%;
  31.     margin: 0 auto;
  32.     }
  33. * html #container {
  34.     height: 100%;
  35.     width: 100%;
  36.     }
  37.  
  38. div#container div#header {
  39.     height: 50px;
  40.     width: 100%;
  41.     background-color: gray;
  42.     }
  43.    
  44. div#container div#header div#logo {
  45.     height: 50px;
  46.     width: 200px;
  47.     }
  48.    
  49. div#container div#main {
  50.     margin: 0 auto;
  51.     width: 100%;
  52.     height: 100%;
  53.     }
  54.  
  55. ul#menu {
  56.     margin: 0;
  57.     padding: 0;
  58.     list-style-type: none;
  59.     width: auto;
  60.     position: relative;
  61.     display: block;
  62.     height: 30px;
  63.     font-size: 12px;
  64.     font-weight: bold;
  65.     background: transparent url(./img/nav_bg.png) repeat-x top left;
  66.     font-family: Arial, Helvetica, sans-serif;
  67.     border-bottom: 1px solid #000000;
  68.     border-top: 1px solid #000000;
  69.     }
  70.  
  71. ul#menu li {
  72.     display: block;
  73.     float: left;
  74.     margin: 0;
  75.     padding: 0;
  76.     }
  77.  
  78. div#container div#main div#content-left {
  79.     float: left;
  80.     padding-right: 300px;
  81.     width: auto;
  82.     }
  83.  
  84. div#container div#main div#content-right {
  85.     width: 298px;
  86.     border-left: 2px solid gray;
  87.     position: absolute;
  88.     float: right;
  89.     }
  90.  
  91. div#container div#footer {
  92.     bottom: 0;
  93.     position: absolute;
  94.     clear: both;
  95.     height: 40px;
  96.     line-height: 40px;
  97.     width: 100%;
  98.     margin: 0 auto;
  99.     text-align: center;
  100.     }  
  101.    
  102.     </style>
  103.    
  104.     </head>
  105.         <body>
  106.             <div id="container">
  107.                 <div id="header">
  108.                     <div id="logo">
  109.                         &nbsp;
  110.                     </div>
  111.                 </div>
  112.  
  113.                
  114.                 <div id="main">
  115.  
  116.                     <div id="menu">
  117.                         <ul id="menu">
  118.                             <li><a href="#"  title="#">Item 1</a></li>
  119.                             <li><a href="#"  title="#">Item 2</a></li>
  120.                             <li><a href="#"  title="#">Item 3</a></li>
  121.                         </ul>
  122.                     </div>
  123.                    
  124.                     <div id="content-left">
  125.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere, lacus ut tincidunt rutrum, sapien lacus suscipit orci, a euismod risus augue sit amet lectus. Pellentesque sit amet lacus diam. Nullam vehicula ultricies dolor, sed placerat mi condimentum eu. Nullam at sollicitudin urna. Maecenas fringilla aliquet risus, nec ornare metus volutpat ut. Praesent velit justo, vulputate eget scelerisque sed, feugiat quis sem. Suspendisse vitae enim tortor, nec consectetur ipsum. Pellentesque non odio venenatis justo ornare eleifend. Etiam et sem placerat dui feugiat sagittis in id erat. Nunc placerat tortor quis lectus aliquet quis imperdiet massa elementum. Donec laoreet diam sit amet eros vestibulum feugiat. Nulla dignissim dignissim faucibus. Integer varius dignissim turpis, pellentesque tristique risus dapibus eu. Duis eleifend metus mauris. Fusce posuere sapien vel nisi viverra vehicula sodales purus ultrices. Vivamus ac neque nec enim vulputate ornare.
  126.                     </div>
  127.  
  128.                                
  129.                     <div id="content-right">
  130.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius nisi purus, sit amet iaculis erat. Aenean quis est libero, non tempus nisl. Sed egestas venenatis dolor, id fringilla ligula sollicitudin id. Nullam ac aliquet libero. Morbi vehicula mauris ac nunc dapibus scelerisque. Vivamus at leo sed ligula hendrerit commodo vitae in tortor. Vestibulum eget pellentesque metus. Maecenas mollis posuere ipsum, nec interdum nunc egestas vitae. Morbi a sodales elit. Nullam euismod nisl quis ligula pretium sagittis. Nullam eget augue id nunc iaculis sollicitudin vel in erat. Nulla sed porttitor eros. Proin leo dui, tempor vitae condimentum ut, tristique vel metus.
  131.                     </div>
  132.  
  133.                 </div>
  134.                                
  135.                 <div id="footer">
  136.                     Etiam bibendum interdum molestie. Nam eget sem ante. Suspendisse potenti. Vestibulum laoreet luctus magna, posuere dictum risus bibendum ut. Aenean ullamcorper semper sodales. Nulla nec eros ac erat interdum blandit commodo eget tortor.
  137.                 </div>
  138.  
  139.             </div>
  140.         </body>
  141.     </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement