Header text along with top links

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="author" content="Luka Cvrk (www.solucija.com)" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
/*

  project: watchthis!
  author: luka cvrk (www.solucija.com)

*/
/* global reset */
* {
  margin: 0;
  padding: 0;
}

*
:focus,:active {
  outline: 0;
}

body {
  font: .9em Georgia, "Times New Roman", Sans-Serif;
  background: #fff url(WatchThis-images/bg.gif) repeat-x;
  color: #333;
}

a {
  color: #A82A15;
  text-decoration: none;
}

img {
  border: 0;
}

h1 {
  float: left;
  margin: 20px 0 50px;
  font-size: 4em;
  color: #fff;
}

h2 {
  font-size: 2.4em;
  font-weight: normal;
  margin: 0 0 20px;
}

h2 a:hover {
  background: #A82A15;
  color: #fff;
}

.hr {
  color: #ccc;
}

p {
  margin: 5px 0 15px;
  line-height: 1.6em;
}

#content {
  margin: 0 auto;
  width: 900px;
}

#top {
  float: right;
  margin: 38px 0 30px 0;
}

#top li {
  list-style: none;
  display: inline;
}

#top li a {
  float: left;
  padding: 6px 20px;
  margin: 3px 2px 0 0;
  color: #ccc;
}

#top li a.current {
  color: #fff;
  background: #A82A15;
}

#top li a:hover {
  background: #808080;
  color: #fff;
}

#intro {
  clear: both;
  padding: 15px 0 1px 20px;
  border: 1px solid #dedede;
  font-size: 1.3em;
  background: #eee;
  margin: 0 0 30px;
}

#left {
  float: left;
  width: 500px;
  margin: 0 0 15px;
}

#right {
  float: right;
  width: 280px;
}

#right h3 {
  border-bottom: 1px solid #ccc;
  margin: 0 0 10px;
}

#right img {
  margin: 0 3px 3px 0;
  border: 2px solid #eee;
  padding: 2px;
}

#right li {
  list-style: none;
}

#right li a {
  display: block;
  border-bottom: 1px solid #ccc;
  padding: 5px 5px;
}

#footer {
  clear: both;
  padding: 15px 0;
  border-top: 1px solid #ccc;
}

#r {
  float: right;
}
</style>


  <title>WatchThis!</title>
</head>
<body>
  <div id="content">
    <h1><span class="hr">watch</span>this!</h1>
    <ul id="top">
      <li><a class="current" href="#">Home</a></li>
      <li><a href="#">New Stuff</a></li>
      <li><a href="#">Interviews</a></li>
      <li><a href="#">Startups</a></li>
    </ul>
    
    <div id="intro">
      <p>Phasellus augue diam, <a href="#">vestibulum non</a>, iaculis eget, tristique sed, lectus. Sed pede. Nullam egestas ante a mauris. Aliquam metus turpis, luctus ac, sagittis eget, <a href="#">elementum tincidunt</a>, massa.</p>
    </div>
    <div id="left">
      <h2><a href="#">Cum sociis natoque penatibus et magnis dis parturient montes</a></h2>
      <h3>Donec lacinia tristique ante</h3>
      <p>Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam blandit ultricies nisl. Nullam dapibus, mauris id scelerisque feugiat, sapien augue porta ipsum, ut blandit tellus enim vel mauris. Praesent accumsan metus vel ipsum. Maecenas aliquam blandit mi. Pellentesque dolor magna, posuere vel, condimentum id, accumsan ac, diam. Phasellus vel leo. Aenean velit nisl, hendrerit eget, rutrum quis, lobortis nec, libero. Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilisis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.</p>
      <br />
      <h2><a href="#">Cum sociis natoque penatibus et magnis dis parturient montes</a></h2>
      <h3>Donec lacinia tristique ante</h3>
      <p>Maecenas aliquam blandit mi. Pellentesque dolor magna, posuere vel, condimentum id, accumsan ac, diam. Phasellus vel leo. Aenean velit nisl, hendrerit eget, rutrum quis, lobortis nec, libero. Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilisis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.</p>
    </div>
    <div id="right">
      <h3>Popular Stuff</h3>
      <a href="#"><img src="images/site.gif" alt="site" /></a>
      <a href="#"><img src="images/site.gif" alt="site" /></a>
      <a href="#"><img src="images/site.gif" alt="site" /></a>
      <a href="#"><img src="images/site.gif" alt="site" /></a>
      <a href="#"><img src="images/site.gif" alt="site" /></a>
      <a href="#"><img src="images/site.gif" alt="site" /></a>
      <br /><br />
      <h3>Latest Comments</h3>
      <ul>
        <li><a href="#">In cursus rhoncus ante. Quisque...</a></li>
        <li><a href="#">Mauris magna sem, pellentesque sit am...</a></li>
        <li><a href="#">Nullam egestas ante a mauris. Aliqu...</a></li>
        <li><a href="#">Etiam blandit ultricies nisl. Nullam...</a></li>
        <li><a href="#">In cursus rhoncus ante. Quisque...</a></li>
        <li><a href="#">Mauris magna sem, pellentesque sit am...</a></li>
        <li><a href="#">Nullam egestas ante a mauris. Aliqu...</a></li>
      </ul>
    </div>
    <div id="footer">
      <p>Design: <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Luka Cvrk</a> 
      ? <a href="http://www.ehostinfo.com/">Web Hosting</a> &middot; Released under a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Licence</a></p>
    </div>
  </div>
</body>
</html>
Related examples in the same category

1.	h1, h2, h3 text-align: center;
2.	h1 text-decoration: underline;
3.	h1 text-shadow: 0.2em 0.2em;
4.	H1 text-transform: uppercase;
5.	h1 text-align: center;
6.	h1 text-align: right;
7.	H1 text-align: left;
8.	h2 text-transform: none;
9.	h2 text-transform: uppercase;
10.	h1.complex { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
Header text along with top links : Header text « Tags « HTML / CSS

Related examples in the same category
