Using border to highlight section title : Section « CSS Controls « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » CSS Controls » Section 




Using border to highlight section title
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>andreas03 - No Images</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style rel="stylesheet" type="text/css">
/* andreas03 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . 
Free to use for any purpose as long as the proper credits are given to the original author.

Version: 1.2
(Nov 28, 2005)

Screen layout - no images: */
body {
  margin: 0;
  padding: 30px 0;
  font: 76% tahoma, verdana, sans-serif;
  background: #047;
  color: #222;
}

#thetop {
  margin: 0;
}

#container {
  width: 720px;
  margin: auto;
  padding: 20px 20px 0 20px;
  background: #fff;
  color: #222;
}

{
  text-decoration: none;
  background-color: inherit;
  color: #26c;
}

a:hover {
  text-decoration: underline;
}

a img {
  border: 0;
}

{
  margin: 0 0 15px 0;
  line-height: 1.5em;
}

#main p,#sidebar p {
  padding: 0 0 0 10px;
}

#logo {
  float: left;
  width: 240px;
  margin: 0 20px 0 0;
  padding: 0 0 25px 0;
  background: #eee;
  border: 4px solid #dde;
  text-align: center;
  color: #555;
  overflow: auto;
}

#logo h1 {
  margin: 50px 5px 1px 5px;
  letter-spacing: -3px;
}

#logo a {
  background-color: inherit;
  color: #26a;
  text-decoration: none;
}

#logo a:hover {
  background-color: inherit;
  color: #69e;
}

#tagline {
  text-align: center;
  font-size: 1.2em;
}

#intro p {
  line-height: 1.5em;
}

#main {
  float: left;
  width: 530px;
  margin-right: 20px;
  padding: 0;
}

.headerstyle {
  display: block;
  margin: 30px 0 10px 0;
  padding: 5px 0 5px 8px;
  background: #eee;
  color: #222;
  border-top: 1px solid #ddd;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-left: 1px solid #ddd;
  text-decoration: none;
}

#sidebar {
  width: 155px;
  float: right;
  margin-top: 20px;
  font-size: 1em;
  line-height: 1.3em;
}

#sidebar p {
  font-size: 0.9em;
}

.sidelink {
  display: block;
  width: 140px;
  margin: 3px 10px 2px 0;
  padding: 5px 0 5px 8px;
  font-size: 1.1em;
  font-weight: bold;
  text-align: left;
  background: #eee;
  color: #26c;
  border-top: 1px solid #ddd;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-left: 1px solid #ddd;
}

.sidelink:hover,.menuheader {
  background: #fff;
  color: #222;
  border-top: 1px solid #ddd;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  border-left: 1px solid #ddd;
  text-decoration: none;
}

#footer {
  margin: auto 20px auto;
  width: 760px;
  background: #fff;
  padding: 0 0 5px 0;
  font-size: 0.9em;
  color: #888;
  text-align: center;
}

h1,h2,h3,h4 {
  margin: 0 0 10px 0;
  font-weight: normal;
}

h1 {
  font-size: 2.8em;
}

h2 {
  margin: 0 0 4px 0;
  font-size: 1.8em;
}

h3 {
  margin: 20px 0 8px 0;
  font-size: 1.4em;
}

h4 {
  margin: 10px 0 5px 0;
  font-size: 1.2em;
}

.clear {
  clear: both;
  margin: 0;
}

.right {
  text-align: right;
}

.internallink {
  font-size: 0.9em;
  text-align: center;
}

.block {
  padding: 20px;
  background: #eee;
  color: #222;
  border: 2px solid #ddd;
}

.credit {
  color: #888;
  background-color: inherit;
}

.hide {
  display: none;
}
/* Original open source design by Andreas Viklund - http://andreasviklund.com
Released through OSWD.org */

</style>
</head>
<body>
<div id="thetop"> <a id="top"></a>
  <p class="hide">Skip to: <a href="#sitemenu" accesskey="2">Site menu</a> | <a href="#maincontent" accesskey="3">Main content</a></p>
</div>
<div id="container">
  <div id="main">
    <div id="logo">
      <h1>[<a href="" accesskey="4">your site title</a>]</h1>
      <span id="tagline">Your striking site slogan!</span> </div>
    <div id="intro">
      <h2><a id="maincontent"></a>Speed and accessibility!</h2>
      <p>This website template is made for all of you who want a quick-loading and solid XHTML/CSS website with light use of images and a strong focus on accessibility. The template conforms to the WCAG 1.0 Triple-A rating, and it works in all common browser types.</p>
    </div>
    <div class="clear"></div>
    <h3 class="headerstyle">The idea behind the design</h3>
    <p>The andreas03 template has a small file size, a simple layout for easy editing, good accessibility features and semantic markup. Five small images have been used for the design, adding only kilobytes to the template load size (which is approximately 12kb).</p>
    <p>The images are linked from the stylesheet, which means that they will not show up in browsers that does not support CSS. They can also be safely removed, since the images do not affect the layout in any way. In CSS-enabled browsers the removed images will be replaced by a background color. In browsers with no CSS support, there will be no difference. See examples of this by looking at the alternate versions listed under the menu.</p>
    <p class="internallink"><a href="#top">Back to top</a> ]</p>
    <h3 class="headerstyle">What is 'accessibility' and why is it important?</h3>
    <p>Accessibility is about making your website available and understandable for everyone, including users with disabilities. W3 explains it in a great way at the <a href="http://www.w3.org/WAI/intro/accessibility.php">Web Accessibility Initiative</a>.</p>
    <p>This template allows visitors to use the following accesskeys:<br />
      <strong>- </strong>Back to top | <strong>- </strong>Skip to site menu | <strong>- </strong>Skip to main content | <strong>- </strong>Return to index.html</p>
    <p>You can easily change these or add more accesskeys to make the site fit your needs, for example to allow easy access to each site menu link. Adding a logical tab order is recommended! And finally: the template allows browser-based font resizing, making sure that site visitors can enlarge the font size without breaking the page layout in any way.</p>
    <p class="internallink"><a href="#top">Back to top</a> ]</p>
    <h3 class="headerstyle">Open source is freedom!</h3>
    <p>If you like this layout and would like to use it in any way, you are free to do so. This design is released as open source, which means that you are free to make any changes you may want to. I kindly ask that you leave the "Design by Andreas Viklund" link in the footer, but you are free to remove it if you want (or needto. If you use this design for commercial purposes, please consider making a symbolic donation through my website.</p>
    <p>Good luck with your new design!</p>
    <p class="block"><strong>Additional information: </strong>Download more of my free website templates from <a href="">OSWD.org</a>!</p>
    <p class="internallink"><a href="#top">Back to top</a> ]</p>
  </div>
  <div id="sidebar">
    <h2 class="sidelink menuheader"><a id="sitemenu"></a>Site menu:</h2>
    <a class="sidelink" href="">Home</a> <span class="hide"> | </span> <a class="sidelink" href="">Another page</a> <span class="hide"> | </span> <a class="sidelink" href="">Number three</a> <span class="hide"> | </span> <a class="sidelink" href="">Sample button</a> <span class="hide"> | </span> <a class="sidelink" href="">Even more</a> <span class="hide"> | </span> <a class="sidelink" href="">And a last one</a> <span class="hide"> | </span> <a class="hide" href="#top" accesskey="1">Top of page</a>
    <h3>Important note</h3>
    <p>This template conforms to <a href="http://www.section508.gov">Section 508</a> and to W3C's <a href="http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505">WCAG 1.0</a>, level Triple-A. The code is valid XHTML 1.1 and CSS (no warnings).</p>
    <h3>Alternate versions</h3>
    <p>Included in this template are the following example files:<br />
      - <a href="">Home</a><br />
      - <a href="noimg.html">No images version</a><br />
      - <a href="text-only.html">No CSS version</a></p>
    <p>andreas03 v1.2<br />
      (Nov 282005)</p>
    <h3>Regular links</h3>
    <p> - <a href="">Website Templates</a><br />
      - <a href="">Open Web Design</a><br />
      - <a href="">OSWD.org</a><br />
      - <a href="">Lagoona MP3s</a> </p>
  </div>
  <div class="clear">&nbsp;</div>
</div>
<div id="footer">
  <p>&copy; 2005 Your name. Design by <a href="http://andreasviklund.com/" class="credit">Andreas Viklund</a>.</p>
</div>
</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.Section with image title bar
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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.