Two-level left menu bar : Menu « CSS Controls « HTML / CSS






Two-level left menu bar

  
<!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>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="description" content="Your description goes here" />
  <meta name="keywords" content="your,keywords,goes,here" />
  <meta name="author" content="Your Name or Company / Design Template: G. Wolfgang / April 14, 2006 / Email: gw@actamail.com / Favorite website: www.sda.org" />
<style type='text/css'>
/*****************************************************/
/*   Design:  GoFlexiblePro                          */
/*            Stylesheet for screen rendering        */
/*---------------------------------------------------*/
/*   Author:  G. Wolfgang                            */
/*   Email:   gw@actamail.com                        */
/*   Date:    April 14, 2006                         */
/*---------------------------------------------------*/
/*   You can use this stylesheet freely under the    */
/*   condition of giving proper author credits.      */
/*---------------------------------------------------*/
/*   Check out my favorite website: www.sda.org      */
/*****************************************************/

/*-----------------------------------------------------------------------*/
/* REMARK: FONT-SIZE DEFINITIONS                                         */
/*-----------------------------------------------------------------------*/
/* Relative font-sizes in "em" are used where necessary. To make the     */
/* "em"-units normed, the incoming font sizes are set to 1.0 em. The     */
/* font-size variations throughout the webpage are then expressed in     */
/* percentage values respective to the incoming font-size. To make       */
/* calculations easier, the font definition in "body" is such that       */
/* 1.0em = 10px. This makes life a real breeze!                          */
/*-----------------------------------------------------------------------*/

/*************************/
/* SECTION 1 - MAIN BODY */
/*************************/

/*-------------------------------*/
/* Section 1.1 - Page definition */
/*-------------------------------*/

body {
  font-size: 62.5%; margin: 0em auto; padding: 0em; background: url(GoFlexiblePro-img/background.gif) top center repeat-y; font-family: "trebuchet ms", verdana, arial, sans-serif;
}

#page-container {
  width: 780px; margin: 0px auto; padding: 0px; border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150); background-color: rgb(237,237,237);
}

/**********************/
/* SECTION 2 - HEADER */
/**********************/

/*--------------------------------------*/
/* Section 2.1 - Global navigation menu */
/*--------------------------------------*/

.nav-global-container {
  float: left; position: absolute; z-index: 3; width: 780px; top: 5px; background-color: transparent;
}

.nav-global ul {  
  float: right; margin: 0px; padding: 0px; list-style: none;
}  

.nav-global li {
  float: left; white-space: nowrap; text-transform: uppercase;
}

.nav-global li a {
  display: block; margin: 0px; padding: 0px 5px 0px 5px; border-left: solid 1px rgb(150,150,150); background-color: rgb(255,255,255); color: rgb(150,150,150); text-decoration: none; font-size: 100%;
}

.nav-global a:hover {
  background-color: rgb(255,255,255); color: rgb(0,0,0); text-decoration: underline;
}

.img-flag {
  display: block; height: 1.2em; margin: 0px; padding: 0px; border: solid 1px rgb(0,0,0);
}

/*-----------------------------------*/
/* Section 2.2 - Sitename and Banner */
/*-----------------------------------*/

.site-name  {
  clear: both; float: left; position: absolute; z-index: 1; width: 700px; top: 20px; margin: 0px; padding-left: 14px; background-color: transparent; color: rgb(225,225,225); font-weight: bold; font-size: 24px;
}

.site-slogan  {
  float: left; position: absolute; z-index: 2; width: 11.7em; top: 1.9em; left: 16px; margin: 0px; padding: 0px 3px 1px 3px; background-color: rgb(150,150,150);  color: rgb(225,225,225); font-weight: bold; font-size: 14px;
}

.img-header {
  clear: both; float: left; width: 780px; height: 110px; margin: 0px; padding: 0px;
}

/*------------------------------------*/
/* Section 2.3 - Main navigation menu */
/*------------------------------------*/

.nav-main {
  clear: both; float: left; width: 780px; margin: 0px; padding: 0px; border-top: solid 1px rgb(125,125,125); border-bottom: solid 1px rgb(125,125,125); background-color: rgb(190,190,190);
}

.nav-main ul {  
  list-style: none; margin: 0px; padding: 0px; font-weight: bold;
}  

.nav-main li {
  float: left; display: block; white-space: nowrap; background-color: inherit;
}

.nav-main li a {
  color: rgb(255,255,255); margin: 0px; padding: 0px 10px 0px 10px; border-right: solid 1px rgb(255,255,255); text-decoration: none; font-size: 130%;    
}

.nav-main a:hover, .nav-main a.selected {
  background-color: inherit; color: rgb(110,110,110); text-decoration: none;
}

/*************************************/
/* SECTION 3 - FRONT-PAGE SIDEBANNER */
/*************************************/

.sidebanner-frontpage {
  clear: both; float: left; width: 160px; margin: 0px; padding: 0px;
}

.img-sidebanner {
  width: 160px; margin: 0px; padding: 0px; border: none;
}

/******************************/
/* SECTION 4 - SUB-NAVIGATION */
/******************************/

/*--------------------*/
/* Section 4.1 - Size */
/*--------------------*/

.nav-sub {
  clear: both; min-height: 400px; float: left; width: 160px; margin: 0px; padding: 0px; color: rgb(110,110,110);
}

/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .nav-sub {
  height: 400px;
} 
/* End IE-Hack */

/*--------------------*/
/* Section 4.2 - Menu */
/*--------------------*/

.nav-sub ul {  
  float: left; list-style: none; width: 160px; margin: 0px; padding: 0px; border-bottom: solid 1px rgb(200,200,200);
}  

.nav-sub li {
  margin: 0px; padding: 0px;
}

.nav-sub li.title {
  vertical-align: top; margin: 0px; padding: 10px 7px 10px 14px; text-transform: uppercase; color: rgb(175,175,175); font-weight: bold; font-size: 140%;
}

.nav-sub li.group a {
  display: block; min-height: 1.5em; margin: 0px; padding: 3px 7px 2px 10px; border-top: solid 1px rgb(200,200,200); border-left: solid 5px rgb(235,235,235); text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 120%;
}

/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .nav-sub li.group a {
  height: 1.5em;
}
/* End IE-Hack */
  
.nav-sub li a {
  display: block; min-height: 1.5em; margin: 0px; padding: 3px 7px 2px 10px; border-left: solid 5px rgb(235,235,235); color: rgb(110,110,110); text-decoration: none; font-size: 120%;
}

/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .nav-sub li a {
  height: 1.5em;
}
/* End IE-Hack */

.nav-sub li.group a:hover, .nav-sub li.group .selected {
  border-left: solid 5px rgb(175,175,175); background-color: rgb(225,225,225); text-decoration: none;
}

.nav-sub a:hover, .nav-sub .selected {
  border-left: solid 5px rgb(175,175,175); background-color: rgb(225,225,225); text-decoration: none;
}

.nav-sub-align {
  text-align: left;
}

/*******************************************************************/
/* SECTION 5 -  Extend left column height to footer                */
/*-----------------------------------------------------------------*/
/* TRICK: To nest the right two columns (content and sidebar) and  */
/* give them a minimum height and white background. Then let the   */
/* left column have transparent background so the light-grey color */
/* from the global page definition comes through. However, nesting  */
/* floats inside each other with identical widths may activate the */
/* IE character duplicating bug, where the last characters of the  */
/* last float statement are duplicated outside the float. The      */
/* correction for this is to reduce the sidebar float so that the  */
/* sum of the content and sidebar floats are 6px less than the     */
/* container holding them. See Section 7.1, where this is done.    */
/* ----------------------------------------------------------------*/
/* RESTRICTION: For situations where the left navigation menu is   */
/* expanding over the minimum 600px height, it must remain smaller */
/* than the right columns. Otherwise the global page grey back-    */
/* will shine through after the end of the content and sidebar     */
/* columns. This situation may arise when you have very long left  */
/* navigation menus, and short content and sidebars. If this is    */
/* your situation, then simply increase the minimum height of the  */
/* left column, as well as the container defined in this section.  */
/*******************************************************************/

/* Contain both right columns (content and sidebar) in one         */
/* container and extended to a minimum height of 600 px            */
/* The "!important" statement is for Firefox so that the           */
/* "height" statement still allows the container to grow and       */
/* not remain fixed size. Necessary because IE cannot render       */
/* the "min-height" property                                       */

.container-content-sidebar {
   float: left; width: 620px; min-height: 400px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}

/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .container-content-sidebar {
  height: 400px;
} 
/* End IE-Hack */

/* Put a buffer between sub-navigation column and      */
/* main-navigation so that the global page background  */
/* color does not come through in this place           */

.buffer {
   float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);  
}

/***********************/
/* SECTION 6 - CONTENT */
/***********************/

/*--------------------*/
/* Section 6.1 - Size */
/*--------------------*/

.content {
  float: left; width: 425px; margin: 0px; padding: 30px 20px 0px 20px; background-color: rgb(255,255,255);  
}

/*-------------------------*/
/* Section 6.2 - Pagetitle */
/*-------------------------*/

.content-pagetitle {
  width: 390px; margin: 0px 0px 10px 0px; padding: 0px;
}

.content-pagetitle p {
  padding: 0px; margin: 0px; font-weight: bold; font-size: 140%;
}

/*----------------------------------*/
/* Section 6.3 - Extra container    */
/*----------------------------------*/
/* To ensure that no problems arise */
/* with right and left floatings    */
/* and make the implementation      */
/* robuster.                        */
/*----------------------------------*/

.contentbox-container-full {
   float: left; width: 425px; margin: 0px 0px 1.5em 0px; padding: 0px;
}

.contentbox-container-left {
  float: left; width: 205px; margin: 0px 0px 1.5em 0px; padding: 0px;
}

.contentbox-container-right {
  float: right; width: 205px; margin: 0px 0px 1.5em 0px; padding: 0px;
}

/*-----------------------------*/
/* Section 6.4 - Content title */
/*-----------------------------*/

.contentbox-title-noshading-noline {
  display: block; margin: 0px; padding: 0px; background-color: transparent; text-transform: none; font-weight: bold; font-size: 150%;
}

.contentbox-title-noshading-line {
  display: block; margin: 0px 0px 0.2em 0px; padding: 0px; border-bottom: solid 2px rgb(135,135,135); background-color: transparent; text-transform: none; font-weight: bold; font-size: 150%;
}

.contentbox-title-shading {
    margin: 0px; padding: 1px 0px 2px 3px; background-color: rgb(225,225,225); font-weight: bold; font-size: 150%;  
}

/*--------------------------------*/
/* Section 6.5 - Contentbox size  */
/*--------------------------------*/

/* No shading */
.contentbox-noshading {
  margin: 0px; padding: 0.7em 0px 0px 0px; background-color: transparent;
}

/* Shading */
.contentbox-shading {
  margin: 0px; padding: 7px 10px 5px 10px; background-color: transparent;
}

/*-------------------------------*/
/* Section 6.6 - Contentbox text */
/*-------------------------------*/

/* Heading */
h1 {
  clear: left; margin: 1.0em 0px 1.0em 0px; font-weight: bold; font-size: 150%;
}

h2 {
  clear: left; margin: 1.5em 0px 1.0em 0px; font-weight: bold; font-size: 140%;
}

h3 {
  clear: left; margin: 1.0em 0px 0.6em 0px;  font-weight: bold; font-size: 130%;
}

h4 {
  clear: left; margin: 0.5em 0px 0.5em 0px;  font-weight: bold; font-style: italic; font-size: 130%;
}

/* Paragraph text */
p {
   clear: left; margin: 0em 0px 0.5em 0px; padding: 0px; font-size: 130%;
}

/* Quote */
p.quote {
   clear: left; margin: 0em 30px 0.6em 30px;  line-height: 120%; font-size: 120%;
}

/* Embedded */
.embed {
   float: left; width: 120px; margin: 2px 7px 2px 0px; padding: 5px 5px 5px 5px; background-color: rgb(225,225,225); font-style: italic; font-weight: bold;  line-height: 1.2em; font-size: 180%;
}

.embed-caption {
   float: left; margin: 5px 0px 0px 0px; padding: 0px; font-style: italic; font-weight: normal; line-height: 1.2em; font-size: 50%;
}

/* Unordered list */
.content ul {
  margin: 0px 10px 0px 10px; padding: 0px 0px 0px 30px; list-style-type: disc; list-style-position: outside; font-size: 130%;
}

/* Ordered List */
.content ol {
  margin: 0px 10px 0px 17px; padding: 0px 0px 0px 30px; list-style-type: decimal; list-style-position: outside; font-size: 130%;
}

/*--------------------------*/
/* Section 6.7 - Datatables */
/*--------------------------*/

.tabledata {
  clear: left; margin: 0.5em 0px 0.2em 30px; border: solid 1px rgb(150,150,150); empty-cells: show; border-collapse: collapse; background-color: rgb(225,225,225);
}

.tabledata tr {
  margin: 0px; padding: 0px;
}

.tabledata td {
  padding: 2px 7px 2px 7px; border: solid 1px rgb(150,150,150); text-align: left; font-size: 120%;
}

.tabledata th {
  margin: 0px; padding: 2px 7px 2px 7px; border: solid 1px rgb(150,150,150); empty-cells: show; text-align: left; font-size: 120%;   
}

p.tabledata-caption {
  margin: 0em 0px 10px 30px; padding: 0px; clear: both; text-align: left; font-size: 120%;
}

/*----------------------*/
/* Section 6.8 - Images */
/*----------------------*/

/* No border */
.img-left-noborder {
  float: left; margin: 0.3em 7px 3px 0px;
}

.img-right-noborder {
  float: right; margin: 0.3em 0px 3px 7px;
}

/* Border */
.img-left-border {
  float: left; margin: 0.3em 7px 3px 0px; border: solid 1px rgb(150,150,150);
}

.img-right-border {
  float: right; margin: 0.3em 0px 3px 7px; border: solid 1px rgb(150,150,150);  
}

/***********************/
/* SECTION 7 - SIDEBAR */
/***********************/

/*-----------------------------------------------*/
/* Section 7.1 - Size                            */
/*-----------------------------------------------*/
/* Because of IE float-rendering bug, the width  */
/* must be reduced by 6px, otherwise it will     */
/* duplicate characters after the last float     */
/* Reason: IE may not alwys allow nested floats  */
/* have identical widths, but inside float must  */
/* be smaller than outside float. This IE-bug is */
/* somewhat unpredictable. See Section 5 header  */
/* for more details on this topic.               */
/*-----------------------------------------------*/

.sidebar {
   float: right; width: 144px; margin: 0px ; padding: 57px 5px 0px 0px; background-color: rgb(255,255,255);
}

/*-----------------------*/
/* Section 7.2 - Textbox */
/*-----------------------*/

.sidebarbox-noborder {
  width: 140px; margin: 0em 0px 1.0em 0px; padding: 0px;
}

.sidebarbox-border {
  width: 130px; margin: 0px 0px 1.0em 0px; padding: 4px 4px 4px 4px; border: solid 1px rgb(200,200,200);
}

/*-----------------------------*/
/* Section 7.3 - Textbox title */
/*-----------------------------*/

.sidebarbox-title-noshading-noline {
   display: block; margin: 0px 0px 0.5em 0px; padding: 1px 0px 1px 0px;font-weight: bold; font-size: 120%;
}

.sidebarbox-title-noshading-line {
  display: block; margin: 0px 0px 0.5em 0px; padding: 1px 0px 1px 0px; border-bottom: solid 1px rgb(135,135,135); background-color: transparent; font-weight: bold; font-size: 120%;
}

.sidebarbox-title-shading {
  display: block; margin: 0px 0px 0.5em 0px; padding: 2px 5px 2px 5px; background-color: rgb(225,225,225); font-weight: bold; font-size: 120%;
}

/*------------------------------*/
/* Section 7.4 - Paragraph text */
/*------------------------------*/

.sidebarbox-noborder p {
  margin: 0px 4px 0.4em 4px; padding: 0px; background-color: transparent; font-size: 110%;
}

.sidebarbox-border p {
  margin: 0px 0px 0.4em 0px; padding: 0px; background-color: transparent; font-size: 110%;
}

/**********************/
/* SECTION 8 - FOOTER */
/**********************/

/* Somehow not possible to use percentage values to scale the font-size here. */
/* Therefore the is the font-size definition given in the generic CSS-class   */
/* "footer-font", even though those generic font classes should all have a    */
/* normed size of 1.0em. But making footer an exception will not hurt us.     */

.footer {
  clear: both; width: 780px; margin: 0em 0px 0px 0px; padding: 5px 0px 5px 0px; border-top: solid 1px rgb(200,200,200); border-bottom: solid 1px rgb(200,200,200); background-color: rgb(255,255,255); text-align: center;  
}

/***************************************************/
/* SECTION 9 - HYPERLINKS FOR NON-NAVIGATION TEXTS */
/***************************************************/

.content a, .sidebar a {
  color: rgb(0,0,0); text-decoration: underline;
}

.content a:hover, .sidebar a:hover {
  color: rgb(110,110,110); text-decoration: none;
}

.content a:visited, .sidebar a:visited {
  color: rgb(110,110,110);
}

.footer a {
  color: rgb(150,150,150); text-decoration: underline;
}

.footer a:hover {
  color: rgb(0,0,0); text-decoration: none;
}

/********************************/
/* SECTION 10 - GENERIC CLASSES */
/********************************/

/*------------------------------------------*/
/* Section 10.1 - Global default fonts      */
/*------------------------------------------*/
/* Only applied to the main div-statements  */
/* for the basic page regions.              */
/*------------------------------------------*/

.nav-global-font {
  font-size: 1.0em;
}

.nav-main-font {
  font-size: 1.0em;
}

.nav-sub-font {
  font-size: 1.0em;
}

.content-font {
  font-size: 1.0em; line-height: 1.7em; color: rgb(110,110,110);
}

.sidebar-font {
  font-size: 1.0em; line-height: 1.4em; color: rgb(110,110,110);
}

/* Percentage value does not work in "footer", so we     */
/* cannot give the normed size of "1.0em" here and scale */
/* it up inside the "footer". Thus we define the final   */
/* font-size here the way it will appear on screen.      */
.footer-font {
  font-size: 1.1em; color: rgb(150,150,150);
}

/*--------------------------------------*/
/* Section 10.2 - Horizontal alignments */
/*--------------------------------------*/

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

/*-------------------------------------*/
/* Section 10.3 - Title decoration box */
/*-------------------------------------*/

.box-on {
  float: left; width: 1.0em; margin-right: 0.2em; padding-left: 0.3em;
}

.box-off {
  display: none;
}

/*---------------------------*/
/* Section 10.4  Text colors */
/*---------------------------*/

/* Basic Colors */
.txt-white {
  color: rgb(255,255,255);
}

.txt-black {
  color: rgb(0,0,0);
}

/* Grey */
.txt-grey01 {
  color: rgb(242,242,242);
}

.txt-grey02 {
  color: rgb(230,230,230);
}

.txt-grey03 {
  color: rgb(217,217,217);
}

.txt-grey04 {
  color: rgb(204,204,204);
}

.txt-grey05 {
  color: rgb(191,191,191);
}

.txt-grey06 {
  color: rgb(178,178,178);
}

.txt-grey07 {
  color: rgb(153,153,153);
}

.txt-grey08 {
  color: rgb(127,127,127);
}

.txt-grey09 {
  color: rgb(89,89,89);
}

.txt-grey10 {
  color: rgb(51,51,51);
}

/* Yellow */
.txt-yellow01 {
  color: rgb(254,252,232);
}

.txt-yellow02 {
  color: rgb(253,249,201);
}

.txt-yellow03 {
  color: rgb(253,246,185);
}

.txt-yellow04 {
  color: rgb(252,243,162);
}

.txt-yellow05 {
  color: rgb(251,239,139);
}

.txt-yellow06 {
  color: rgb(250,236,116);
}

.txt-yellow07 {
  color: rgb(249,233,93);
}

.txt-yellow08 {
  color: rgb(249,230,69);
}

.txt-yellow09 {
  color: rgb(248,227,46);
}

.txt-yellow10 {
  color: rgb(247,224,23);
}

/* Blue */
.txt-blue01 {
  color: rgb(238,237,249);
}

.txt-blue02 {
  color: rgb(222,220,242);
}

.txt-blue03 {
  color: rgb(205,202,236);
}

.txt-blue04 {
  color: rgb(189,185,229);
}

.txt-blue05 {
  color: rgb(172,167,223);
}

.txt-blue06 {
  color: rgb(155,149,217);
}

.txt-blue07 {
  color: rgb(139,132,210);
}

.txt-blue08 {
  color: rgb(122,114,204);
}

.txt-blue09 {
  color: rgb(106,97,197);
}

.txt-blue10 {
  color: rgb(89,79,191);
}

/* Green */
.txt-green01 {
  color: rgb(237,246,229);
}

.txt-green02 {
  color: rgb(220,238,204);
}

.txt-green03 {
  color: rgb(202,229,178);
}

.txt-green04 {
  color: rgb(185,220,153);
}

.txt-green05 {
  color: rgb(167,211,127);
}

.txt-green06 {
  color: rgb(149,203,102);
}

.txt-green07 {
  color: rgb(132,194,76);
}

.txt-green08 {
  color: rgb(114,185,51);
}

.txt-green09 {
  color: rgb(97,177,25);
}

.txt-green10 {
  color: rgb(79,168,0);
}

/* Red */
.txt-red01 {
  color: rgb(252,235,233);
}

.txt-red02 {
  color: rgb(248,216,211);
}

.txt-red03 {
  color: rgb(245,196,188);
}

.txt-red04 {
  color: rgb(242,177,166);
}

.txt-red05 {
  color: rgb(238,157,144);
}

.txt-red06 {
  color: rgb(235,137,122);
}

.txt-red07 {
  color: rgb(232,118,100);
}

.txt-red08 {
  color: rgb(229,98,77);
}

.txt-red09 {
  color: rgb(225,79,55);
}

.txt-red10 {
  color: rgb(222,59,33);
}

/*----------------------------------*/
/* Section 10.5 - Background colors */
/*----------------------------------*/

/* Basic Colors */
.bg-white {
  background-color: rgb(255,255,255);
}

.bg-black {
  background-color: rgb(0,0,0);
}

/* Grey */
.bg-grey01 {
  background-color: rgb(242,242,242);
}

.bg-grey02 {
  background-color: rgb(230,230,230);
}

.bg-grey03 {
  background-color: rgb(217,217,217);
}

.bg-grey04 {
  background-color: rgb(204,204,204);
}

.bg-grey05 {
  background-color: rgb(191,191,191);
}

.bg-grey06 {
  background-color: rgb(178,178,178);
}

.bg-grey07 {
  background-color: rgb(153,153,153);
}

.bg-grey08 {
  background-color: rgb(127,127,127);
}

.bg-grey09 {
  background-color: rgb(89,89,89);
}

.bg-grey10 {
  background-color: rgb(51,51,51);
}

/* Yellow */
.bg-yellow01 {
  background-color: rgb(254,252,232);
}

.bg-yellow02 {
  background-color: rgb(253,249,201);
}

.bg-yellow03 {
  background-color: rgb(253,246,185);
}

.bg-yellow04 {
  background-color: rgb(252,243,162);
}

.bg-yellow05 {
  background-color: rgb(251,239,139);
}

.bg-yellow06 {
  background-color: rgb(250,236,116);
}

.bg-yellow07 {
  background-color: rgb(249,233,93);
}

.bg-yellow08 {
  background-color: rgb(249,230,69);
}

.bg-yellow09 {
  background-color: rgb(248,227,46);
}

.bg-yellow10 {
  background-color: rgb(247,224,23);
}

/* Blue */
.bg-blue01 {
  background-color: rgb(238,237,249);
}

.bg-blue02 {
  background-color: rgb(222,220,242);
}

.bg-blue03 {
  background-color: rgb(205,202,236);
}

.bg-blue04 {
  background-color: rgb(189,185,229);
}

.bg-blue05 {
  background-color: rgb(172,167,223);
}

.bg-blue06 {
  background-color: rgb(155,149,217);
}

.bg-blue07 {
  background-color: rgb(139,132,210);
}

.bg-blue08 {
  background-color: rgb(122,114,204);
}

.bg-blue09 {
  background-color: rgb(106,97,197);
}

.bg-blue10 {
  background-color: rgb(89,79,191);
}

/* Green */
.bg-green01 {
  background-color: rgb(237,246,229);
}

.bg-green02 {
  background-color: rgb(220,238,204);
}

.bg-green03 {
  background-color: rgb(202,229,178);
}

.bg-green04 {
  background-color: rgb(185,220,153);
}

.bg-green05 {
  background-color: rgb(167,211,127);
}

.bg-green06 {
  background-color: rgb(149,203,102);
}

.bg-green07 {
  background-color: rgb(132,194,76);
}

.bg-green08 {
  background-color: rgb(114,185,51);
}

.bg-green09 {
  background-color: rgb(97,177,25);
}

.bg-green10 {
  background-color: rgb(79,168,0);
}

/* Red */
.bg-red01 {
  background-color: rgb(252,235,233);
}

.bg-red02 {
  background-color: rgb(248,216,211);
}

.bg-red03 {
  background-color: rgb(245,196,188);
}

.bg-red04 {
  background-color: rgb(242,177,166);
}

.bg-red05 {
  background-color: rgb(238,157,144);
}

.bg-red06 {
  background-color: rgb(235,137,122);
}

.bg-red07 {
  background-color: rgb(232,118,100);
}

.bg-red08 {
  background-color: rgb(229,98,77);
}

.bg-red09 {
  background-color: rgb(225,79,55);
}

.bg-red10 {
  background-color: rgb(222,59,33);
}

/******************************/
/* SECTION 11 - MISCELLANEOUS */
/******************************/

/* Horizontal line */
hr {
  clear: both; width: 425px; height: 1px; border: none;
}

/* HTML-code examples */
.showcode {
  font-family: monospace; font-weight: bold; font-size: 13px; color: rgb(255,0,0);
}

/* Hide HTML-tags. Good when no pagestyle supported by browser */
.hide {
  display: none;
}

br {
  clear: both;
}
</style>



  <title>GoFlexiblePro - Content Page</title>
</head>

<body>
  <div id="page-container">

    <!-- HEADER -->
    <!-- Global Navigation -->
    <h3 class="hide">Global Navigation</h3>
    <div class="nav-global-container">
      <div class="nav-global nav-global-font">
        <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact</a></li>
           <li><a href="#">Impressum</a></li>                                    
          <li><a href="#"><img class="img-flag" src="./img/flag_uk.gif" title="Website in English" alt=""/></a></li>
          <li><a href="#"><img class="img-flag" src="./img/flag_spain.gif" title="Website en Espanol" alt=""/></a></li>
          <li><a href="#"><img class="img-flag" src="./img/flag_france.gif" title ="Website en Francais" alt=""/></a></li>
          <li><a href="#"><img class="img-flag" src="./img/flag_germany.gif" title ="Website auf Deutsch" alt=""/></a></li>          
        </ul>
      </div>
    </div>        

    <!-- Sitename and Banner -->
    <div class="site-name">
      Your Sitename.
      <div class="site-slogan">
        Your slogan.
      </div>
    </div>                 
    <div><img class="img-header" src="./img/header.jpg" alt=""/></div>
    
    <!-- Main Navigation -->                    
    <h3 class="hide">Top Navigation</h3>    
    <div class="nav-main nav-main-font">      
      <ul>
        <li><a href="index.html">Front Page</a></li>
        <li><a href="content.html" class="selected">Content Page</a></li>
        <li><a href="options.html">Options</a></li>      
      </ul>
    </div>
    
    <!-- Sub-Navigation -->
    <h3 class="hide">Left Navigation</h3>
    <div class="nav-sub nav-sub-font nav-sub-align">
    <div class="buffer"></div>
      <ul>
        <li class="title">Navigation title</li>
        <li class="group"><a href="content.html">Group link 1</a></li>    
        <li><a href="#" class="selected">Sublink 1-1</a></li>
        <li><a href="#">Sublink 1-2</a></li>
        <li><a href="#">Sublink 1-3</a></li>
        <li class="group"><a href="#">Group Link 2</a></li>
        <li><a href="#">Sublink 2-1</a></li>
        <li><a href="#">Sublink 2-2</a></li>
        <li><a href="#">Sublink 2-3</a></li>
        <li><a href="#">Sublink 2-4</a></li>        
        <li class="group"><a href="#">Group link 3 asdf asdf a</a></li>
        <li class="group"><a href="#">Group link 4</a></li>
        <li class="group"><a href="#">Group link 5</a></li>
      </ul>
    </div>
            
    <!-- WRAP CONTENT AND SIDEBAR -->
    <div class="container-content-sidebar">            

    <!--   CONTENT -->
    <h3 class="hide">Content</h3>
    <div class="content content-font">

      <!-- Page title -->    
      <div class="content-pagetitle"><p>WELCOME -- GoFlexiblePro</p></div>
      
      <div class="contentbox-container-left">
        <div class="contentbox-title-shading bg-blue07 box-on">&nbsp;</div>
        <div class="contentbox-title-shading">Tested Browsers</div>
        <div class="contentbox-noshading">
          <p><b>GoFlexiblePro</b> has been tested for the following browsers:</p>
          <ul>
            <li><b>Firefox 1.5</b> - OK</li>
            <li><b>Explorer 6</b> - OK</li>
            <li><b>Explorer 7 Beta2</b> - OK</li>            
            <li><b>Safari 2</b> - OK</li>
          </ul>         
       </div>
      </div>

      <div class="contentbox-container-right">
        <div class="contentbox-title-shading bg-green07 box-on">&nbsp;</div>
        <div class="contentbox-title-shading">Stable code</div>
        <div class="contentbox-noshading">
          <p>The code is clean and stable. Only one minor hack necessary to adjust for IE6 height properties. The code is also compatible with IE7 Beta2. In this way your site is safe for the future.</p>         
        </div>
      </div>
      
      <div class="contentbox-container-full">
        <div class="contentbox-title-shading bg-red07 box-on">&nbsp;</div>
        <div class="contentbox-title-shading">Basic Concepts</div>
        <div class="contentbox-noshading">
          <p><b>GoFlexiblePro</b> is a flexible template where a number of options can be set independently of each other. The template offers options layout, pictures, text, tables, colors as well as a stylesheet for printing.</p>
          <p>Some of these options, especially text and background colors, are controlled by applying multiple generic CSS-classes directly to the class statements in the HTML-code. In this way the webdesigner has the advantages of 1) global default settings for the entire site, and 2) at the same time the flexibility to locally modify the appearance, without having to alter the CSS-code. This may come very handy. Also note that the layout appearance is optimized for use with the font "Trebuchet MS", but it works well for other fonts like Verdana as well.</p>
          <p><b>GoFlexiblePro</b> is suited for any kind of website, be it personal, business, organization or portal. You will have a powerful tool in your hand to make your website appear the way you want.</p>
          <p><b>GoFlexiblePro. It's yours. Enjoy it.</b></p>          
        </div>
      </div>          
    </div>

    <!-- SIDEBAR -->
    <h3 class="hide">Sidebar</h3>    
    <div class="sidebar sidebar-font">

      <div class="sidebarbox-border bg-yellow03">
        <div class="sidebarbox-title-shading bg-yellow07">News and Links</div>
        <p>Use this column for news, events, links, ad banners, or other things.</p>              
        <p><a href="#">Link A</a></p>
        <p><a href="#">Link B</a></p>    
      </div>                        

      <div class="sidebarbox-border bg-blue02">
        <div class="sidebarbox-title-shading bg-blue05 txt-white">Check out options!</div>
        <p>This page shows only the basics of <b>GoFlexiblePro</b>. More options for  layout, picture, color and text, are found under <a href="options.html">Options</a>.</p>
      </div>                        
    
      <div class="sidebarbox-border bg-green02">
        <div class="sidebarbox-title-shading bg-green05 txt-white">It's free of charge</div>
        <p>Enjoy the template at no cost. Feel free to retain my name as designer in the footer as a sign of your appreciation.</p>                 
      </div>      
  
      <div class="sidebarbox-border bg-red02">
        <div class="sidebarbox-title-shading bg-red05 txt-white">Any questions?</div>
        <p>I am Gerhard, feel free to check one of my <a href="http://www.sda.org">favorite websites</a>. If you have any questions, simply mail me at <a href="mailto:gw@actamail.com">gw@actamail.com</a>.</p>                 
      </div>      
    </div>
    
    <!-- END WRAP CONTENT AND SIDEBAR -->
    </div>    
    
    <!-- FOOTER -->
    <h3 class="hide">Footer</h3>
    <div class="footer footer-font">
       Copyright &copy; 2006 Your Company | All Rights Reserved<br />Design: Made in Austria | Author: <a href="mailto:gw@actamail.com">G. Wolfgang</a> 
    | <a href="http://www.ehostinfo.com/">Web Hosting </a>&nbsp;| <a href="http://validator.w3.org/check?uri=referer" title="Validate code as W3C XHTML 1.1 Strict Compliant">W3C XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/" title="Validate Style Sheet as W3C CSS 2.0 Compliant">W3C CSS 2.0</a>
    </div>
  </div>
</body>
</html>

   
    
  








Related examples in the same category

1.Use show or hide UL with link
2.Horizontal menu
3.CSS only menu with mouse over
4.Left bar menu
5.Menu bar with highlight
6.Menu with highlight
7.fixed width floated menu
8.Mouse hover left bar
9.Left navigation bar
10.Use UL and LI to wrap link menu
11.Tab Menu
12.Left bar menu list
13.Top tab menu bar
14.Navigation menu on the top
15.Wide and tall menu
16.Shading menu bar
17.Top menu bar with arrow icon
18.3D top bar background
19.Left menu bar aligned to the bottom
20.Indented vertical menu
21.Single column layout with top menu bar
22.Right section bar with shading menu
23.Right menu bar with image background
24.Right menu bar with section
25.Top menu bar
26.Using top arrow to indicate top menu selection
27.Wide and tall top menu bar
28.List menu bar with background image
29.Two level menu bar
30.Top menu with arrow indication
31.Two column, two leve top menu bar
32.List menu with image
33.Menu List item
34.List menu bar
35.Top menu list bar with bold bottom
36.Side menu bar
37.Scrollable section in side menu bar
38.Selected menu item indication
39.Card layout with top menu bar
40.Side menu bar with lot of space in between
41.HTML skeleton code for creating a two-level horizontal drop menu
42.using jQuery to toggle a hidden menu
43.Vertical menu
44.Horizontal menu bar
45.Vertical menu bar
46.sliding door menu
47.horizontal list menu
48.Sub navigation menu
49.Pure css menu
50.Two column layout with menu on the left
51.Navigation menu horizontal
52.Pure CSS drop-down menu
53.Menu item with border
54.Vertical menu on the left
55.LI menu
56.Mouse hover effect for left menu
57.Post item layout with menu
58.Left menu bar with mouse hover effect
59.a:hover background: transparent url(img/menu_arrow.gif) bottom center no-repeat;
60.Menu item with border 2
61.Link menu
62.Left menu bar with thicker border
63.Change border and background with mouse hover for left menu bar
64.Nested left menu bar
65.Vertical menu bar 2
66.Fixed left menu bar
67.Dark background for menu bar
68.Link menu item with side bar
69.Tag like top menu bar
70.Two line top menu bar
71.Menu item separated with border
72.Using arrow image to indicate current menu selection
73.Two level top menu bar
74.Tab menu bar with mouse hover effect
75.Menu bar with background image
76.Two level side menu bar
77.Left bar with news item
78.Continue read link