enflexion Technology Blog

Two Column Left Menu Header Footer CSS Template

2007-11-21T15:36:00.001-08:00

I have uploaded a tutorial for creating a CSS Two Column Template with a header and a footer. Click the image above to view the tutorial or download the template as a Zip file below:

http://www.enflexion.com.au/support/2columnleft/2columnleft.zip

Designing Web Templates for Sliced Bread

2007-11-14T13:24:00.000-08:00

This tutorial shows you how to create the templates and CSS style sheets for use in a website managed by Sliced Bread Content Management Tool. This tutorial does assume that you have knowledge of designing with CSS. The project files can be downloaded as a zip file here:

Download Project Files

In this tutorial we have designed a basic centred template with a left hand menu and a block out homepage. The template has a footer, header an accessible CSS styled Drop Down Menu, and a CSS side menu. The template uses only CSS for formatting and has been tested for IE6, IE 7, FireFox, Safari and Opera.

Click the image to view the template in a web browser.

The code below shows the full template with an internal page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Hompeage</title> <link rel="stylesheet" media="all" href="styles/styleone.css" type="text/css"> <link rel="stylesheet" media="print" href="styles/print.css" type="text/css"> <link rel="stylesheet" media="screen" href="styles/screen.css" type="text/css"> <script type="text/javascript"><![CDATA[//><!]]> </script> </head> <body> <div id="maincontainer"> <div id="header"> </div> <div id="menu"> <ul id="nav"> <li><a href="/index.shtml">HOME</a></li> <li><a href="/company/index.shtml">COMPANY</a><ul> <li><a href="/company/history.shtml">HISTORY</a></li> <li><a href="/company/staff.shtml">STAFF</a></li> <li><a href="/news/index.shtml">NEWS</a></li> <li><a href="/employment/index.shtml">EMPLOYMENT</a></li> </ul></li> <li><a href="/services/index.shtml">SERVICES</a></li> <li><a href="/clients/index.shtml">CLIENTS</a></li> <li><a href="/contact/index.shtml">CONTACT</a></li> </ul> </div> <a name="top"></a> <div id="one"> <div id="advert"> </div> <div id="advertside"> </div> </div> <div id="two"> <div id="box_one"> </div> <div id="box_two"> </div> <div id="box_three"> </div> </div> <br clear="all" /> <div id="footer"><div id="left"><a href="#top">^Return to Top</a></div> <div id="right"><a href="/docs/copyright.shtml">Copyright</a> <a href="/docs/privacy.shtml">Privacy</a> <a href="/docs/legal.shtml">Legal</a></div></div> </div> </body> </html>
How Sliced Bread Templates Work

Designing a web template or converting a design to use Sliced Bread is pretty easy. You just have to remember that Sliced Bread requires you to split up a webpage design into parts. There are three main parts to a design:

The Main Template which is common to the whole website is quite often the header and footer of a website, although your design will have whatever you need in the main template.

<script type="text/javascript"><![CDATA[//><!]]> </script> </head> <body> <div id="maincontainer"> <div id="header"> </div> <div id="menu"> <ul id="nav"> <li><a href="/index.shtml">HOME</a></li> <li><a href="/company/index.shtml">COMPANY</a> <ul> <li><a href="/company/history.shtml">HISTORY</a></li> <li><a href="/company/staff.shtml">STAFF</a></li> <li><a href="/news/index.shtml">NEWS</a></li> <li><a href="/employment/index.shtml">EMPLOYMENT</a></li> </ul> </li> <li><a href="/services/index.shtml">SERVICES</a></li> <li><a href="/clients/index.shtml">CLIENTS</a></li> <li><a href="/contact/index.shtml">CONTACT</a></li> </ul> </div> <a name="top"></a> <$maincontent> <br clear="all" /> <div id="footer"><div id="left"><a href="#top">^Return to Top</a></div> <div id="right"><a href="/docs/copyright.shtml">Copyright</a> <a href="/docs/privacy.shtml">Privacy</a> <a href="/docs/legal.shtml">Legal</a></div></div> </div>

Don't call the stylesheets, they are called when the page is assembled by Sliced Bread. Where the Section Template is inserted into the template use the code <$maincontent>.

Save this file as template.txt
Section Templates

The Section Templates which are the groups of pages that are uniquely linked together and those you want to have menu's automaticaly created for. Just think of the Section Template as like tags or chapters of a book.

Where the page content is inserted into the template use the code <$maincontent>.

Internal Page Section Template


<div id="main">
<div id="side">
<div id="sidemenu">
<ul>
<$menu>
</ul>
</div>
</div>
<div id="content">
<div id="crumbs">You are here &raquo; <a href="/index.shtml">Home</a> &raquo; <$title></div>
<$maincontent>
</div>
</div>

Section templates do not have to be the same as each other and in fact they are extremely powerful when used well, for example the Hompage design uses a totally different Section Template. Also by using Section Templates you can'lock' casual users out of parts of the page so they can only edit the content you as a designer want them to.

Homepage Section Template

<div id="one"> <div id="advert"><$maincontent></div> <div id="advertside"> </div> </div> <div id="two"> <div id="box_one"> </div> <div id="box_two"> </div> <div id="box_three"> </div> </div>

Then finally we have the unique page content which you manage in Sliced Bread and is totally unique.

Stylesheets

There are three stylesheets that are inserted into Sliced Bread:

screen.css - The styleshet called for web broswers, generally has all main strucural elements and anythingwe don't want when we print the page.

styleone.css - The common stylesheet across the website.

print.css - The stylesheet called when the page is printed.

Inserting section menus

Using Sliced Bread you can automatically inserts lists of pages within sections by using the code:

<$list> or <$menu>

<$list> inserts a full formed unordered list, wheras <$menu> inserts onlye the list items.

There are lots more advanced features in Sliced Bread but this is an introduction to designing a template for Sliced Bread.

Accessibile Drop Down Menu

2007-11-13T12:25:00.000-08:00

If you want to create an accessible drop down menu that uses unordered lists then this script is definitely for you! This way you don't have to have bucket loads of javascript which bloats yous website, and you do have excellent SEO for the menu as they are just unordered lists.

Bug Fix to force the hover of the menu

To force the menu to appear and disapear when you roll your mouse over it you need to insert some conditional Javascript code into the head of the page.

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>
</script>

The Menu

The menu is based on unordered lists, when you want to insert a drop down menu you insert another fully formed unordered list between the end of the link and the end of the ordered list item.

The enflexion website menu uses this to create the drop down menu as shown below:


<ul id="nav">

<li><a href="/index.shtml">HOME</a></li>

<li><a href="/about/index.shtml">ABOUT US</a><ul>

<li><a href="/about/ourphilosophy.shtml">OUR PHILOSOPHY</a></li>

<li><a href="/about/methodologies.shtml">OUR METHODOLOGY</a></li>

<li><a href="/about/news/index.shtml">ENFLEXION NEWS</a></li>

</ul>

</li>

<li><a href="/packages/index.shtml">WEBSITES</a> 

<ul>

<li> <a href="/packages/index.shtml">PACKAGE SOLUTIONS</a></li>

<li> <a href="/packages/quickstart.shtml">QUICK START PACKAGE</a></li>

<li> <a href="/packages/standard.shtml">STANDARD PACKAGE</a></li>

<li> <a href="/packages/business.shtml">BUSINESS PACKAGE</a></li>

<li> <a href="/packages/ecommerce.shtml">ECOMMERCE PACKAGE</a></li>

<li> <a href="/packages/faqs/index.shtml">PACKAGES FAQ</a></li>

</ul>

</li>

<li><a href="/services/index.shtml">SERVICES</a> 

<ul>

<li><a href="/services/design.shtml">DESIGN & DEVELOPMENT</a></li>

<li><a href="/services/consulting.shtml">CONSULTING & ADVICE</a></li>

<li><a href="/services/project.shtml">PROJECT MANAGEMENT</a></li>

</ul>

</li>

<li><a href="/products/index.shtml">PRODUCTS</a>

<ul>

<li><a href="/products/sliced/index.shtml">SLICED BREAD CONTENT MANAGEMENT</a></li>

<li><a href="/products/intranet/index.shtml">INTRANET IN A BOX</a></li>

<li><a href="/products/sliced/commerce/shopping.shtml">SHOPPING CART</a></li>

</ul>

</li>

<li><a href="/research/index.shtml">RESEARCH</a>

<ul>

<li><a href="/research/index.shtml">WEBFLEXION OVERVIEW</a></li>

<li><a href="/research/archive.shtml">ARCHIVED ARTICLES</a></li>

<li><a href="/research/blog/index.shtml">TECHNOLOGY BLOG</a></li>

</ul></li>

<li><a href="/clients/index.shtml">CLIENTS</a>

<ul>

<li><a href="/clients/testimonials.shtml">TESTIMONIALS</a></li>

<li><a href="/clients/case.shtml" >CASE STUDIES</a></li>

</ul></li>

<li><a href="/contact/index.shtml">CONTACT</a></li>

</ul>

The CSS

#nav, #nav ul { float:left; list-style: none; background: #5fc601; font-weight: bold; padding: 0px; margin: 0; font-size:13px; font-family: arial; } #nav a { display: block; width: 72px; color: #fff; text-decoration: none; padding: 8px; font-family: arial; text-align: center; border-right: 2px solid #fff; height: 14px; } #nav li { float: left; padding: 0; width: 90px; margin-right: 0px; font-family: arial; } #nav li ul { position: absolute; left: -1000px; height: auto; width: 150px; font-weight: bold; border: 1px solid #fff; margin: 0; } #nav li li { width: 150px; font-size:11px; border-top: 1px solid #fff; padding: 0; margin:0; } #nav li ul a { width: 140px; height: auto; font-size:11px; padding: 5px; font-family: arial; text-align: left; }

#nav li ul ul { margin: -1.75em 0 0 14em; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { background: #ad0925; }

You can see the entire code in operation here at the enflexion Website Design website.

Creating Equal Column Designs with Javascript and CSS

2007-11-12T19:33:00.000-08:00

If you have a CSS template design where you want the design to have a full background colour all aligned, or you just want to have the design that has all equal columns you can use the pre-built Javascript library.

The library is available from Dynamic Drive.

Instructions

Start by inserting the code <script src="equalcolumns.js" type="text/javascript"></script> into the head of your HTML file.

Then download the file equalcolumns.js by right clicking on the link and selecting Save As.

You will then need to change the line:

ddequalcolumns.columnswatch=["leftcolumn", "rightcolumn", "contentwrapper"]

Change the names of the columns from your CSS file you want to make equal. If you only have two columns you can just name the first two entries and leave the final one blank.

Remove Background Flicker from divs in IE6

2007-11-12T19:05:00.000-08:00

There is an annoying bug with IE6 when you use a background image in a div. The browser constantly tries to load the image from the server creating a flicker and can also trick the web server into thinking you are waging a Denial Of Service Attack.

This can result in the web server denying your IP address.

To prevent this you can use a conditional Javascript which is called in the head of your html document:


<script>

  

(function(){



  /*Use Object Detection to detect IE6*/

  var  m = document.uniqueID /*IE*/

  && document.compatMode  /*>=IE6*/

  && !window.XMLHttpRequest /*<=IE6*/

  && document.execCommand ;

  

  try{

    if(!!m){

      m("BackgroundImageCache", false, true) /* = IE6 only */ 

    }

    

  }catch(oh){};

})();

</script>

Welcome to the enflexion Technology Blog

2007-11-12T18:40:00.001-08:00

The enflexion technology blog will list tips tricks and ideas for simple web design using our products:

Over the next couple of days we will be posting much of our internal library of HTML & CSS snippets in categories so that our code library is totally open for all to use!