we design the web!
Header

HTML and CSS for Multi Column Layouts 1

March 1st, 2010 | Posted by Isabel Tenbrink in Coding - (Comments Off on HTML and CSS for Multi Column Layouts 1)

A simple solution with Faux Columns

Professional web-designs often come along with a so-called multi column layout. Using the table-tags for displaying such a layout is outdated for years since for reasons of accessibility  it is recommended to use the table-tag(s) only for displaying table and not for structuring the design of a website.

In this little workshop I am going to show you how you can manage to realize a multi column layout (in our case three columns) without the obsolete table-construction.

So, lets first think about how we want to structure our website. Lets say we choose to build a website with a header and a footer, of course a part for the main content and two sidebars. One of these sidebars we will use to display our site-navigation, the other sidebar we can use for additional information, links  and other services.

At first we set up a struture for header, footer and content in HTML.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title>My MultiColumnLayout</title>
 <style type="text/css">
 body{
 font-family:verdana, arial;
 color:white;
 text-align:center; /*workaround for IE6 for centered page*/
 }

 #container{
 width:960px;
 background-color: grey;
 margin:auto;
 text-align:left;    /*resets workaround for IE6*/
 }

 #header    {
 width:940px;
 height:150px;
 margin: 0px 10px;
 background-color:green;
 }

 #content{
 width:940px;
 min-height:350px;
 margin: 0px 10px;
 }

 #footer    {
 width:940px;
 height:80px;
 margin:0px 10px;
 background-color:blue;
 }
 </style>
 </head>
 <body>
 <div id="container">
 <div id="header">
 This is my header
 </div><!-- header end-->
 <div id="content">
 <div id="sidebar_left">
 This is my left sidebar
 </div><!--sidebar_left end-->
 <div id="mainContent">
 This is my main Content
 </div><!--mainContent end-->
 <div id="sidebar_right">
 This is my right sidebar
 </div><!-- sidebar_right end -->
 </div><!-- content end -->
 <div id="footer">
 This is my footer
 </div><!-- footer end -->
 </div><!-- container end-->
 </body>
</html>

Have a look

I have already added some style-information into this code. In this case I chose to include the style sheet in our HTML-head, of course you can also create a separate style sheet which you can include by using the link-tag :

<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" />  

Do not forget to close the link-tag if you want to create a website in valid XHTML!

Now, lets see what this stylesheet is doing to our layout.

Our Elements:

#container
#header
#content
#footer

all contain a background-color definition and a height to give you a visual impression. These selector refer to ID-elements. ID’s are used for elements that are used only once on a single web-page while classes also can be used for several elements on the same page. In CSS ID’s are labelled by # while the label . is used for classes.

The #container-div encloses the divs #header, #content and #footer or the other way around, #header, #content and #footer are nested into the #container-div.

The #container-div is responsible for giving our website a certain background und position. In our case we decided to use a pixel-based width – that means the width is always the same – no matter what the visitors browser-view-port is. Of course you can also define a flexible width depending on the browser-view-port by using percentage-values instead of pixels, but this can cause trouble if you wish to create a multi column layout with different background-colors for you columns. In a later lesson I will show you how to solve problems like these, but for now we will work with this fix-width-layout.

This property and value “margin:auto;” forces the browser to display the web-page (#container) in the middle of the visitors browser-view-port. For elder versions of the Internet Explorer e.i.  margin:auto does not work, therefore we need to include the property “text-align” into the body-selector in our CSS-file. To prevent text-elements from being displayed centered in our page-section we need to reset this property in our #container and define text-align:left;.

Not very difficult so far… Now lets see how to create the famous multi-columns in our layout. For this we need to add some more style-information.

In our HTML-template we have already included the divs #sidebar_left, #mainContent and #sidebar_right, which are nested into our #content-div. Now we will go on and make these three divs display next to each other.

First we need to think about the width of each of our columns. We have a total width of 940px for our #content-div. Lets say our sidebars will get a width of 220px, the left sidebar gets a right margin of 10px and the right sidebar gets a left margin of 10px. All together we now have a width of 440px plus 20px for margins for our sidebars. That means there is a 480px width left for our mainContent. For displaying the columns next to each other we need to float them. Lets define these in our style sheet:

#sidebar_left    {
 width:220px;
 margin-right:10px;
 float:left;
 color: green;
 }

#mainContent    {
 width:480px;
 float:left;
 color:brown;
 }

#sidebar_right    {width:220px;
 margin-left:10px;
 color:navy;
 float:left;
 }

Have a look

Doesn’t look bad that far…

Now, lets see what happens if we have more content than on single line and add some random text-snippets and see what happens:

Have a look

The text flows over our footer – this is not, what we intended to see. Solving this is very simple. You need to clear the floatings of the sidebars and the mainContent by adding the clear-property to our #footer-selector in our style sheet:

#footer    {
 width:940px;
 height:80px;
 margin:0px 10px;
 background-color:blue;
 clear:both;
 }

Alternatively it’s possible to add a specific class for clearing floated divs:

.clearer    {clear:both;}

See, what this brings

Good so far… But now lets try to add some background-colors to our columns. Lets try to make our left sidebar yellow, our mainContent orange and our right sidebar white and add the needed background-color-definition to our columns:

#sidebar_left    {
 width:220px;
 margin-right:10px;
 float:left;
 color: green;
 background-color:yellow;
 }

#mainContent    {
 width:480px;
 float:left;
 color:brown;
 background-color:orange;
 }

#sidebar_right    {width:220px;
 margin-left:10px;
 color:navy;
 float:left;
 background-color:white;
 }

Now it looks like this

Not what we wanted to see…
The most simple way to give our columns different background-colors anyway  the usage of a background-image  that simulates the background-colors for us (Faux Columns). We include this into our #container-div:

#container{
 width:960px;
 margin:auto;
 text-align:left;    /*resets workaround for IE6  */
 background-image:url(bg.gif);
 background-repeat:repeat-y;
 }

The background-image is a graphic of 960px width and 1px height. The vertical repeat of the image suggests different background-colors for each column.

Have a look

This really simple multi column solution works in all common browsers. Enjoy!

About Tooltips in Menues and for Links

February 21st, 2010 | Posted by pixelhorse in Coding - (Comments Off on About Tooltips in Menues and for Links)

Tooltips are a good thing for a better usability in webdesign – you find a good description about them in wikipedia: http://en.wikipedia.org/wiki/Tooltip. They are shown when you hover a link or menu element. With css you can modify the tip as you like.

Design of tooltips for links – with javascript

A javascript based library by Walter Zorn you find here. Another Version at dyn-web.com. Based on the javascript library jQuery a plugin helps to design tooltips – find more about it here.

and css only

A better way for all users would be to use css  http://lixlpixel.org/css_tooltip/ and as whole popups here: http://meyerweb.com/eric/css/edge/popups/demo.html

Some love it some hate it

In case you design a menu an extra tooltip could disturb the user. Often tooltips are used to explain a link – but in a menu it’s clear and not good to use. What can you do – where does they come from? Each link with a title attribute will show a tooltip. So the easiest thing to do would be to delete the title attribut within the link.

Special Joomla: In the basic mainmenu there are no titles – fine – but some people think they need them, so you use the extended menu module to add them.

For SEO reasons, titles can be useful. They are good if they give extra information about the link – but in a menu you should avoid just to repeat the link name in the title.