Directory World
Telecommunications Directory

Free CSS Layouts And Templates

As a web-developer you don’t have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you’ll find many templates, which include basic (X)HTML/CSS-markup.

You can start from there, learning and exploring the possibilities of CSS and modifying templates for your exquisite taste. Below you’ll find a list of resources which offer free, gorgeous and valid CSS-based templates - usually with images and full layout structure, such as headers, navigation bars, content containers, sidebars and footers.

Usually developers require a link to the site where the template was downloaded from. So before using these templates it might be useful to take a look at the license agreement the developer provides. Links checked: June/19 2008.
(X)HTML- and CSS-Templates

* Open Source Templates
15 impressive templates
* OSWD
Hundreds of templates and layouts of all possible kinds.
* OSWT
A huge collections with search- and sort-functions. With annoying advertisement.
* Maxdesign
23 layouts and design solutions
* CSSplay
Stu Nicolls presents dozens of free professional layouts. Sometimes a permission to use layouts is required.

Screenshot
* Changingman
Beautiful liquid 3-col-layout.
* Mollio
Seven variations of one template, incl. style guides as .pdf-files.
* Six Shooter Media
15 Templates
* Yahoo! UI Library: Grids CSS
A complex solution for many problems you might ever have: grid design is a principle well-known from image editors and layout tools.
* CSS Design Templates
12 Templates
* ThreeColumnLayouts, by CSS Discuss
Collection of 3-column-templates, gathered from a dozen of sources on the Web.
* CSS Intensivstation
15 Layouts

Screenshot
* CSSFILL
Small collection for personal web-sites
* CSS Frames Layouts
Frames are also possible with CSS

Screenshot
* Ex-Designz
98 (X)HTML-based CSS-templates
* Code-Sucks
6 templates and various layouts with 2-4 columns.
* Jimmy Lin
8 simple templates
* Layout Gala
40 professional Layouts for fresh and serious online-presentations.
* Little Boxes
16 Layouts, classic.
* Solucija
19 Templates

min-height for IE

min-height for Internet Explorer

A New Solution

Assuming each and all you folk know how min-height is ’supposed’ to work, would it be all that bold that it’s safe to say that…well… can’t we just do this? (because that’s what I’ve decided to do after throwing IE5.x out the window)

CSS: min-height with !important

selector {
min-height:500px;
height:auto !important;
height:500px;
}

Assuming IE6 will not fix the correct implementation for the !important declaration and assuming that if IE7 does, they’ll also implement min-height correctly since at the pace they’re going they’re fixing CSS like mad crazy cows. Is that too many assumptions? But wouldn’t you agree?

The above snippet of CSS works like a charm in IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

read all

Min-Height for Internet Explorer

Cascading Style Sheet

/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/

Click here to see demo

Maximum and Minimum Height and Width in Internet Explorer

Behold the seventh wonder of the virtual world: max/min-height and max/min-width properties are possible in Internet Explorer! Indeed, by taking advantage of IE’s proprietary CSS attribute, expression, you too can whip IE widths and heights into desirable proportions. The CSS expression attribute enables JavaScript commands to be executed within Internet Explorer. JavaScript via CSS? Thanks, Microsoft!

Why is this so great? Well, because in other, standards-compliant browsers, max/min-height and max/min-width properties are easily accomplished with this simple bit of CSS..

[the contents of this division will be at most 333px in width on compliant browsers]

Of course, this is waaay tooo easy for Internet Explorer, which completely fails to understand the max-width attribute. Fortunately, IE supports its own expression attribute, which enables us to use JavaScript expressions to manipulate (X)HTML document properties such as max-width and max-height. For example, to specify a width property value via the expression attribute, we could use this:

div {
width: expression(333 + "px");
}

..Which is equivalent to this:

div {
width: 333px;
}

The down side to using IE’s expression attribute is that it fails when JavaScript is disabled (or otherwise missing) in the user’s browser. Nonetheless, establishing max/min-widths/heights (as well as other properties) remains an important tool in the web developer’s toolbox. So, without further ado, here are a few generalized examples for slapping IE widths and heights into proper shape..

max-width in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes) and include in your document via conditional comment. In this example, we are setting the max-width at 777px 1 for IE and all standards-compliant browsers:

* html div#division {
width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
max-width: 777px; /* this sets the max-width value for all standards-compliant browsers */
}

In this example, we are setting the max-width at 33em for IE and all standards-compliant browsers:

* html div#division {
width: expression( document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" );
max-width: 33em; /* this sets the max-width value for all standards-compliant browsers */
}

min-width in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the min-width at 333px 1 for IE and all standards-compliant browsers:

* html div#division {
width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); /* set min-width for IE */
min-width: 333px; /* sets min-width value for all standards-compliant browsers */
}

max-height in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px 1 for IE and all standards-compliant browsers:

* html div#division {
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
}

min-height in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the min-height at 333px 1 for IE and all standards-compliant browsers:

* html div#division {
height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* sets min-height for IE */
min-height: 333px; /* sets min-height value for all standards-compliant browsers */
}

read all

How to make a simple CSS menu ?

Making a simple Menu is very easy

The HTML code for our CSS menu

• Services


• About us


• Contact us

That's it! Quite simple really.

Removing the bullets

First thing we'll do is remove the bullets, by creating a new CSS rule:

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

The important CSS command is the first one, list-style: none, which says that we don't want any kind of bullet in our navigation menu. The others are also important to ensure maximum control over the layout and to make sure the text displays in the centre of the box.

With this new CSS rule our menu now looks like:

• Services²
• About us²
• Contact us

Displaying the menu items inline

To get these menu items all on to one line we'll insert this CSS rule:

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

The float CSS command is the really important one here as that aligns the menu items up against each other. The margin CSS command gives each menu item no margin to the top or bottom and a 0.15em margin to the left and right.

Our CSS navigation menu now looks like:

• Services²
• About us²
• Contact us²

Now we're getting there! One word of warning, by using float: left, whatever you place below your CSS navigation menu will display alongside the menu and not below it. To get round this, be sure to assign clear: both to whatever's next in the HTML document.

Making the boxes

Right, we've got the menu items all lined up next to each other, so now let's make them look good too. Our final CSS rule is:

#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

Bit long, eh? Let's go through it, bit-by-bit. The background CSS command is perhaps the most important. In it, we specify the URL of the background image, for there to be a white background behind this image, for the image to be in the bottom-left of the box and for it to be repeated along the x-axis (i.e. horizontally). If we didn't specify the background image to be in the bottom of the box it would be placed in the top left corner. This would cause the white background colour to be visible below the background image, and not above like it is now.

We've specified the height to be double the size of the text at 2em. By specifying the height in terms of em, the height of the box will resize accordingly should a user resize the text³ on their browser. A line height equal to the height of the box must be specified too, as this is what positions the text in the middle of the box and not at the top.

IE 5 on Mac

You may have noticed the float: left in the above CSS rule. This is there solely for the benefit of IE 5 on Mac - without it, our CSS navigation boxes will stack up on top of each other in this browser. We don't however want other browsers to use this rule, so we need to cancel it for every browser except IE 5 on Mac:

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

The CSS command here, float: none, will cancel out the float: left CSS command because when two CSS commands are specified for the same selector, the second one always takes precedence. This will work for all browsers except IE 5 on Mac, which will be unable to read the second command because of the slashes and stars. (If you really want to know how and why this works, read Commented Backslash MacIE5 CSS Hack⁴ by Sam Foster.)

No wrapping please!

There's just one final CSS rule we need to create, and that's to assign a width to our CSS menu navigation. This is optional, but if we don't assign one then menu items on the right may be pushed below the others if users resize their screens. Our new CSS command is:

#nav-menu
{
width:30em
}

Pretty self-explanatory, really!

The finished product

Our final CSS code, all in one place is:

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:30em
}

So, here it is, our CSS navigation menu, in all its glory:

click here

Top 71 CSS Menus Navigation Tabs

Articles / Tutorials on lists, menus, navigations and tabs.

1. 11 CSS navigation menus : at Exploding Boy
2. 12 more CSS Navigation Menus. : at Exploding Boy
3. 14 Free Vertical CSS Menus : at Exploding Boy
4. 2-level horizontal navigation : demo at Duoh
5. Absolute Lists: Alternatives to Divs : An approach of using lists instead of divs at evolt
6. Accessible Image-Tab Rollovers : demo at Simplebits
7. ADxMenu : multiple menu examples at aPlus
8. A drop-down theme : at CSS Play
9. Bookend Lists: Using CSS to Float a Masthead : at WebSiteOptimization
10. Bulletproof Slants : demo at Simplebits
11. Centered Tabs with CSS : at 24ways
12. Clickable Link Backgrounds : A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS ; but that is also clickable.
13. Create a Teaser Thumbnail List Using CSS: Part 1 : lists of items made up of a title, short description, and thumbnail.
14. Creating Indented Navigation Lists : A multi-level indented list
15. Creating Multicolumn Lists : at Builder.com
16. cssMenus - 4 Level Deep List Menu : at SolarDreamStudios
17. CSS and Round Corners: Build Accessible Menu Tabs : at SitePoint
18. CSS-Based Tabbed Menu : a simple tabbed menu.
19. CSS-based Navigation : demo at Nundroo
20. CSS: Double Lists : A single list that appears in two columns
21. CSS Mini Tabs (the UN-tab, tab) : demo at Simplebits
22. CSS only dropdown menu : at CSS Play
23. CSS only flyout menus : at CSS Play
24. CSS only flyout/dropdown menu : at CSS Play
25. CSS only flyout menu with transparency : at CSS Play
26. CSS only vertical sliding menu : at CSS Play
27. CSS Swag: Multi-Column Lists : at A List Apart
28. CSS Tabs : tabs without any images
29. CSS Tabs : list of various tab solutions
30. CSS tabs with Submenus : at Kalsey.
31. dTree Navigation Menu : Javascripts Tree at Destroydrop
32. Definition lists - misused or misunderstood? : appropriate uses of definition lists
33. Do You Want To Do That With CSS? - Multiple Column Lists : multi-column lists.
34. Drop-Down Menus, Horizontal Style : at A List Apart
35. Float Mini tabs : at Web-Graphics
36. Flowing a List Across Multiple Columns : A table without using tables.
37. Free Menu Designs V 1.1 : ready-to-download block menusat e-lusion
38. FreeStyle Menus : XHTML compliant, CSS-formatted menu script at TwinHelix
39. Hidden tab menu : at CSS Play
40. How to Style a Definition List with CSS : at WebReference
41. How to Style an Unordered List with CSS : at WebReference
42. How to Use CSS to Position Horizontal Unordered Lists : at WebReference
43. Hybrid CSS Dropdowns : at a List Apart
44. Inline Mini Tabs : at Web-Graphics
45. Intelligent Menus : CSS and PHP menu at PhotoMatt.net
46. Inverted Sliding Doors Tabs : at 456BereaStreet
47. Light Weight Multi Level Menu : at CssCreator
48. List Display Problems In Explorer For Windows : list hack for IE
49. Listamatic : simple lists; various styles.
50. Listamatic2 : nexted lists; various styles
51. Menus galleries in CSS and XHTML : multiple examples and downloads at Alsacreations
52. Mini-Tab Shapes : demo at Simplebits
53. Mini-Tab Shapes 2 : demo at Simplebits
54. More than Just Bullets : at W3.org
55. Multiple Column Lists : at css-discuss
56. A Navbar Using Lists : A lightweight nav bar at WestCiv
57. Navigation Matrix Reloaded : at SuperfluousBanter
58. Remote Control CSS : examples of lists styled differently
59. Remote Control CSS Revisited - Caving in to peer pressure : multi-column remote control
60. Rounding Tab Corners : by Eric A. Meyer.
61. Simple CSS Tabs : at SilverOrange
62. Simplified CSS Tabs : demo at Simplebits
63. Sliding Doors : at A List Apart
64. Spruced-Up Site Maps : sitemaps as lists
65. Styling Nested List : at SimpleBits
66. Suckerfish Dropdowns : at HTMLDog
67. Tabtastic : Gavin Kistner.
68. Tabs Tutorial at BrainJar
69. Taming Lists : at A List Apart
70. Turning a List into a Navigation Bar : at 456BereaStreet
71. Ultimate css only dropdown menu : at CSS Play

read all

Useful links for CSS

Some of the useful sites to learn CSS

www.w3schools.com
www.devshed.com
www.html.net
www.sitepoint.com
www.csszengarden.com
www.tizag.com
www.cssplay.co.uk
www.sitepoint.com

What is CSS?

* CSS stands for Cascading Style Sheets
* Styles define how to display HTML elements
* Styles are normally stored in Style Sheets
* Styles were added to HTML 4.0 to solve a problem
* External Style Sheets can save you a lot of work
* External Style Sheets are stored in CSS files
* Multiple style definitions will cascade into one

Maybe you already heard about CSS without really knowing what it is. In this lesson you will learn more about what CSS is and what it can do for you.

CSS is an acronym for Cascading Style Sheets.

What can I do with CSS?

CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see!

HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today.

After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your website a new great look.
What is the difference between CSS and HTML?

HTML is used to structure content. CSS is used for formatting structured content.

Okay, it sounds a bit technical and confusing. But please continue reading. It will all make sense to you soon.

Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web, the language HTML was only used to add structure to text. An author could mark his text by stating "this is a headline" or "this is a paragraph" using HTML tags such as "h1" and "p".

As the Web gained popularity, designers started looking for possibilities to add layout to online documents. To meet this demand, the browser producers (at that time Netscape and Microsoft) invented new HTML tags such as for example "font" which differed from the original HTML tags by defining layout - and not structure.

This also led to a situation where original structure tags such as "table" were increasingly being misused to layout pages instead of adding structure to text. Many new layout tags such as "blink" were only supported by one type of browser. "You need browser X to view this page" became a common disclaimer on web sites.

CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers. At the same time, separation of the presentation style of documents from the content of documents, makes site maintenance a lot easier.

Which benefits will CSS give me?

CSS was a revolution in the world of web design. The concrete benefits of CSS include:

* control layout of many documents from one single style sheet;
* more precise control of layout;
* apply different layout to different media-types (screen, print, etc.);
* numerous advanced and sophisticated techniques.

Useful Links for CSS

www.w3schools.com
www.devshed.com
www.html.net
www.sitepoint.com