we design the web!
Header

The best free templates

March 15th, 2010 | Posted by pixelhorse in Design - (0 Comments)

Sometimes you need a quick layout or nobody wants to pay for the design.  This is when your looking for free templates – we did it and found some amazing ones.

In all cases you have to take care if free is really free. Sometimes adapting is possible, sometimes there are a free and a licensed version as well.

I think, individual is the best way even for developers, because adapting an exsisting code is often more complicated than coding in your style.

Another point is inspiration. Creative people have ideas but looking at examples will give us new ideas, too. This doesn’t mean copy but modify and take parts. In the best case it’s just an idea and it doesn’t look as a copy afterwards.

Here are some resources for free templates and inspiration

TEMPLATES

http://chocotemplates.com/

http://cssmayo.com/

http://www.freewebtemplates.com/

http://www.styleshout.com/

http://www.freewebsitetemplates.com/

http://www.cssplay.co.uk/ – more a coding resource, but endless

http://www.templateworld.com/free_templates.html

PSD

http://freepsdfiles.net/

http://photoshopcandy.com/category/free-psds/

EMAIL

http://freemailtemplates.com/

Maybe it started in 1999 with the http://www.womendesignersgroup.net/ that women arrived in webdesign. The next milestone – I don’t know but later in 2007 when this article about women in webdesign was written: http://www.zeldman.com/2007/04/19/women-in-web-design/ by a man :-(.

Ok let’s go on, here http://whdb.com/2008/100-awesome-webmaster-blogs-by-and-for-women/ a really large list is published – about active female webdesigners.

What happend elsewhere? In germany the http://www.webgrrls.de/ network started in 1997 – unfortunately it is not free to participate.

I think it’s time to talk a bit about our work. We do it and we can show it.

Write a comment if you are a webdesign-related woman! Say hi and leave a url – that’s enough, don’t loose time.

HTML and CSS for Multi Column Layouts 1

March 1st, 2010 | Posted by odras in Coding - (1 Comments)

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 - (1 Comments)

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.

Welcome to webdesign women!

If you are a woman related to webdesign your welcome to participate.

If not you’re welcome to view this women made webdesign blog for all in webdesign interested people.

My hope is to develop another important source for webdesign related topics. The main difference to other blogs should be not really visible or readable, maybe you cold read between the lines. So what is the main difference? It is made by women not by men. That’s all.

Our authors can introduce themselfes, their work, and of course leave a link on the blogroll. We are a network, so connections are welcome.

For all more or less active users I offer a link in the blogroll – this is a free backlink to your homepage. So: Let’s talk about webdesign and make ourselves more visible.

Come on. Join us! It’s free. REGISTER NOW.

Get Adobe Flash player