Section with image title bar : Section « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Section

Section with image title bar

  
<!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>
<title>Aquaria</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style rel="stylesheet" type="text/css">
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
  margin: 0;
  padding: 0;
}

body {
  background: #FFFFFF url(aquaria-images/img01.jpg) repeat-x;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #7F7772;
}

h1, h2, h3 {
  margin-bottom: 15px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  color: #333333;
}

h1 {
  font-size: 197%;
}

h2 {
  font-size: 152%;
}

h3 {
  font-size: 100%;
  font-weight: bold;
}

p, ul, ol {
  margin-bottom: 15px;
  line-height: 1.6em;
}

ul, ol {
  margin-left: 2em;
}

blockquote {
  margin-left: 1em;
  padding-left: 1em;
  background: url(aquaria-images/img09.gif) repeat-y;
  font-style: italic;
}

a:link {
  color: #0AAAFD;
}

a:hover, a:active {
  text-decoration: none;
  color: #FF6700;
}

a:visited {
  color: #7F7772;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 20px 0 0;
}

img.right {
  float: right;
  margin: 0 0 0 20px;
}

/* Menu */

#menu {
  width: 770px;
  height: 105px;
  margin: 0 auto;
}

#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu li {
  display: block;
  float: left;
  width: 122px;
  height: 65px;
  padding: 40px 0 0 0;
}

#menu a {
  display: block;
  width: 122px;
  height: 32px;
  padding: 13px 0 0 0;
  background: url(aquaria-images/img02.jpg) no-repeat;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  color: #FFFFFF;
}

#menu a:hover {
  background-image: url(aquaria-images/img03.jpg);
}

#menu .active {
  padding-top: 35px;
}

#menu .active a {
  height: 37px;
  padding-top: 16px;
  background-image: url(aquaria-images/img04.jpg);
  color: #327EBE;
}

#menu .active a:hover {
  background-image: url(aquaria-images/img04.jpg);
}

/* Header */

#header {
  width: 770px;
  height: 160px;
  margin: 0 auto;
}

/* Logo */

#logo {
  float: left;
  width: 250px;
  height: 160px;
  background: url(aquaria-images/img05.jpg) no-repeat;
}

#logo h1, #logo h2 {
  text-align: center;
}

#logo h1 {
  padding-top: 90px;
  background: url(aquaria-images/img07.jpg) no-repeat center center;
  letter-spacing: 8px;
  font-size: 197%;
}

#logo h2 {
  letter-spacing: 2px;
  font-size: 85%;
}

#logo a {
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
}

/* Banner */

#banner {
  float: right;
  width: 520px;
  height: 160px;
  background: url(aquaria-images/img06.jpg) no-repeat;
}

#banner a {
  float: right;
  padding: 120px 20px 0 0;
  text-decoration: none;
  text-align: right;
  font-size: 136%;
  font-style: italic;
  color: #FFFFFF;
}

/* Page */

#page {
  width: 760px;
  margin: 0 auto;
  padding: 20px 0 0 0;
}

/* Content */

#content {
  float: right;
  width: 510px;
}

.post {
  margin-bottom: 20px;
}

.post .title {
  padding: 0 20px;
}

.post .story {
  padding: 0 20px;
}

.post .meta {
  padding: 5px 20px;
  background: url(aquaria-images/img09.gif) repeat-x;
}

.post .meta p {
  margin: 0;
  font-size: 77%;
}

.boxed .title {
  height: 32px;
  margin: 0;
  padding: 8px 0 0 20px;
  background: url(aquaria-images/img08.jpg) no-repeat;
  letter-spacing: -1px;
  color: #FF3300;
}

.boxed .story {
  padding: 20px;
  border: 1px solid #FF8D17;
}

.boxed .meta {
  padding: 5px 10px;
  background: #FF8D17;
  color: #FFFFFF;
}

.boxed .meta a {
  color: #FFFFFF;
}

/* Sidebar */

#sidebar {
  float: left;
  width: 240px;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar li {
  margin-bottom: 15px;
}

#sidebar li ul {
  padding: 10px;
  border: 1px solid #0AAAFD;
  border-top: none;
}

#sidebar li li {
  margin: 0;
  padding: 3px 0;
  background: url(aquaria-images/img09.gif) repeat-x;
}

#sidebar li li.first {
  background: none;
}

#sidebar li h2 {
  height: 30px;
  margin: 0;
  padding: 10px 0 0 15px;
  background: url(aquaria-images/img10.jpg) no-repeat;
  letter-spacing: -1px;
  color: #327EBE;
}

#sidebar a:link {
  text-decoration: none;
}

#sidebar a:hover {
  text-decoration: underline;
}

#sidebar li a {
  padding-left: 10px;
  background: url(aquaria-images/img11.gif) no-repeat left center;
}

/* Footer */

#footer {
  clear: both;
  height: 100px;
  padding: 15px 0;
  background: #D1D1D1;
  border-top: 5px solid #999999;
  text-align: center;
}

#footer p {
  margin: 0;
  color: #999999;
}

#footer a {
  color: #999999;
}

#footer a:hover {
  color: #FFFFFF;
}
</style>
</head>
<body>
<div id="menu">
  <ul>
    <li class="active"><a href="" accesskey="1">Home</a></li>
    <li><a href="" accesskey="2">Blogs</a></li>
    <li><a href="" accesskey="3">Photos</a></li>
    <li><a href="" accesskey="4">Links</a></li>
    <li><a href="" accesskey="5">About</a></li>
    <li><a href="" accesskey="6">Contact</a></li>
  </ul>
</div>
<!-- end #menu -->
<div id="header">
  <div id="logo">
    <h1><a href="">Aquaria</a></h1>
    <h2><a href="">By Free CSS Templates</a></h2>
  </div>
  <div id="banner"><a href="">Lorem ipsum dolor amet veroeros!</a></div>
</div>
<!-- end #header -->
<div id="page">
  <div id="content">
    <div class="post">
      <h1 class="title">Welcome to Aquaria!</h1>
      <div class="story">
        <p><strong>Aquaria</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  photo is from <a href="">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em><strong>Enjoy :)</strong></em></p>
      </div>
      <div class="meta">
        <p class="date">Posted on February 22, 2007 by Admin</p>
        <p class="file">Filed under <a href="">Uncategorized</a> | <a href="">Edit</a> | <a href="">28 Comments</a></p>
      </div>
    </div>
    <div class="post boxed">
      <h2 class="title">A Few Examples of Common Tags</h2>
      <div class="story">
        <p><strong></strong>This is an example of a paragraph followed by a blockquote. In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat lorem ipsum dolorem.</p>
        <blockquote>
          <p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio</p>
        </blockquote>
        <h3>Heading Level Three</h3>
        <p>An unordered list example:</p>
        <ul>
          <li>List item number one</li>
          <li>List item number two</li>
          <li>List item number three </li>
        </ul>
        <p>An ordered list example:</p>
        <ol>
          <li>List item number one</li>
          <li>List item number two</li>
          <li>List item number three</li>
        </ol>
      </div>
      <div class="meta">
        <p class="date">Posted on February 22, 2007 by Admin</p>
        <p class="file">Filed under <a href="">Uncategorized</a> | <a href="">Edit</a> | <a href="">28 Comments</a></p>
      </div>
    </div>
  </div>
  <!-- end #content -->
  <div id="sidebar">
    <ul>
      <li>
        <h2>Archives</h2>
        <ul>
          <li class="first"><a href="">June 2007</a> <i>(2)</i></li>
          <li><a href="">May 2007</a> <i>(31)</i></li>
          <li><a href="">April 2007</a> <i>(30)</i></li>
          <li><a href="">March 2007</a> <i>(31)</i></li>
          <li><a href="">February 2007</a> <i>(28)</i></li>
          <li><a href="">January 2007</a> <i>(31)</i></li>
        </ul>
      </li>
      <li>
        <h2>Categories</h2>
        <ul>
          <li class="first"><a href="">Donec Dictum Metus</a></li>
          <li><a href="">Etiam Rhoncus Volutpat</a></li>
          <li><a href="">Integer Gravida Nibh</a></li>
          <li><a href="">Maecenas Luctus Lectus</a></li>
          <li><a href="">Mauris Vulputate Dolor Nibh</a></li>
          <li><a href="">Nulla Luctus Eleifend</a></li>
          <li><a href="">Posuere Augue Sit Nisl</a></li>
        </ul>
      </li>
      <li>
        <h2>Blog Roll</h2>
        <ul>
          <li class="first"><a href="">Donec Dictum Metus</a></li>
          <li><a href="">Etiam Rhoncus Volutpat</a></li>
          <li><a href="">Integer Gravida Nibh</a></li>
          <li><a href="">Maecenas Luctus Lectus</a></li>
          <li><a href="">Mauris Vulputate Dolor Nibh</a></li>
          <li><a href="">Nulla Luctus Eleifend</a></li>
          <li><a href="">Posuere Augue Sit Nisl</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end #sidebar -->
  <div style="clear: both;">&nbsp;</div>
</div>
<!-- end #page -->
<div id="footer">
  <p id="legal">Copyright &copy; 2007 Aquaria. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
  <p id="links"> <a href="">Privacy Policy</a> | <a href="">Terms of Use</a> | <a href="http://validator.w3.org/check/referer"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
</div>
<!-- end #footer -->
</body>
</html>








Related examples in the same category

1.3D section bar
2.Scrollable section
3.Section on the left
4.Red section title bar
5.Shading section bar
6.Line separated sections
7.Single column layout with two-level top section
8.Right section with boxes
9.Box section with dark background
10.Section title background image
11.Leaving space beteen section
12.Using Padding to add space beteen two sections
13.Even distributed section
14.Using border to highlight section title
15.Using border to highlight section title 2
16.Section with shading background image
17.White content area and gray outsider
18.Post by date
19.Date block
20.Read more for link set
21.Using Wider border for summary row
22.Information panel with columns of links