Single column template - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:1 Column

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. 1 Column

Description

Single column template

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--from  w  ww.j  a v  a2  s .  c o m-->
   background-color:Chartreuse;
}

#main {
   background-color:yellow;
   padding-left:.6em;
}

h1 {
   text-align:center;
   background-color:blue;
}

#menu {
   text-align:center;
}

#menu li {
   position:relative;
   top:19px;
   display:inline;
   padding:5px 31px 0px 2px;
}

#menu a {
   color:pink;
   background:OrangeRed;
   padding:.2em .3em .3em .3em;
}

#menu li.current a {
   background:white;
}

abbr {
   border-bottom:2px dotted grey;
   text-decoration:none;
}
</style> 
 </head> 
 <body> 
  <h1>Lorem ipsum dolo</h1> 
  <ul id="menu"> 
   <li> <a href="one.html">Lorem ip</a> </li> 
   <li class="current"> <a href="two.html">Lorem ip</a> </li> 
   <li> <a href="three.html">Lorem ipsu</a> </li> 
   <li> <a href="four.html">Lorem ips</a> </li> 
   <li> <a href="five.html">Lorem ips</a> </li> 
  </ul> 
  <div id="main"> 
   <h2 id="first">Lorem ipsum d</h2> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
   <p>Lorem ipsum dolor sit amet, co</p> 
   <ul> 
    <li> <abbr title="Cascading StyleSheets">Lor</abbr> </li> 
    <li>Lorem</li> 
   </ul> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ulla<code>Lore</code>Lorem ip</p> 
   <h2 id="next">Lorem ipsum </h2> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus </p> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus sed quam pharetra, tincidunt tortor in, pharetra nisl. Maecenas aliquam luctus mauris, vitae venenatis diam imperdiet vel. Donec tortor diam, pretium vitae nibh vitae, consectetur lacinia sem. Proin luctus facilisis volutpat. Ut semper</p> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus sed quam pharetra, tincidunt tortor in, pharetra nisl. Maecenas aliquam luctus mauris, vitae venenatis diam imperdiet vel. Donec tortor diam, pretium vitae nibh vitae, consectetur lacinia sem. Proin luctus facilisis volutpat. Ut semper</p> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus sed quam pharetra, tincidunt tortor in, pharetra nisl. Maecenas aliquam luctus mauris, vitae venenatis diam imperdiet vel. Donec tortor diam, pretium vitae nibh vitae, consectetur lacinia sem. Proin luctus facilisis volutpat. Ut semper</p> 
  </div>  
 </body>
</html>

Related Tutorials