Explore the Premium Content

CSS Tabs for Beginners

Tabs are a staple of website navigation. They provide a great visual metaphor for users, and they nicely round off otherwise boxy layouts. This beginning level tutorial is about creating tabs in XHTML and CSS, keeping your mark-up solid, but the visuals more interesting. The method will work in most modern browsers, and we'll cover a few exceptions and workarounds for those it doesn't work with later on.

 

You'll need basic knowledge of HTML and CSS. Fortunately, if you're using Dreamweaver MX2004, it'll help you by autocompleting the CSS and providing basic XHTML pages to work with. Watch out for problems with plain old Dreamweaver MX, as it's CSS rendering isn't perfect, so Design View may not look as it does in a browser.

 

The tutorial will take you through the changes we make to the CSS showing how the different alterations affect the end result. The full source code is included at the end of the article, as is a quick example of how to customise the technique.

Read More

CSS: User-customisable Site #3

In the previous two tutorials of this series we've built up a web site that uses a CSS layout, carefully structuring the layout, colors and font sizing into stylesheets that can work independently of each other. In the first part of the tutorial we created our base XHTML document and a set of default stylesheets that made up the default look and feel of the web site.

 

Last time we created new stylesheets in order to be able to apply different stylesheets dependent on user preference. To test these stylesheets we had to change which stylesheet was attached in the code, so in this tutorial we will look at how we can develop a system to let the user change and set their stylesheet choices for the site directly from the browser.

 

I will be using a very simple ASP script in order to demonstrate how to create a script to change the stylesheets, however this would be equally easy to develop in any other language.

Read More

CSS: User-customisable Site #2

This is the second part of my three part series about using CSS to create a site that is customisable by the user, being able to change not only the text size used on the site but also the color schemes and layout. I am assuming throughout these tutorials that you are comfortable with the basics of CSS and how to use external CSS stylesheet in your documents.

In the first part of the tutorial we created our XHTML document and a set of default stylesheets that made up the default look and feel of the web site. In this tutorial we will create additional stylesheets that will be eventually be part of the user self selection.

 

Read More

CSS: User-customisable Site #1

This three-part tutorial will take you through the process of building a site that uses CSS to not only allow the user to change the color scheme and font size of the site, but allows them more precise control over the layout and colors used – allowing them to select x color scheme with y layout and z text styling – in any combination that they wish.

In this first part we will plan our layout and create the default stylesheets for the site, splitting the styles into those used for layout, color and font styles. Next time we will create our alternate stylesheets and in the final tutorial will look at ways to allow the user to select which stylesheets they want to use to view the site.

Because we move pretty fast, this tutorial is for those who have a basic understanding of CSS and is therefore not for newbies.

Read More

Next Step CSS: Image Replacement Techniques

There are times when your design calls for images as headings rather than just text - maybe you want a font more interesting than the verdana/ TNR web-safe clones, maybe you want imagery and texture. For a while now, the leading "image replacement technique" has been FIR - Fahrner Image Replacement but this has been deprecated by the CSS police due to accessibility concerns. In this tutorial, Rachel details other emerging image replacement techniques, looks at the pros and cons of each and shows how you apply them to your own pages.

This is the first tutorial in a new series called "Next Step CSS" which goes further into the intricacies of CSS than is can be accurately rendered by Dreamweaver's Design View. For this reason there is some hand-coding required and so we emphasise that this is NOT FOR NEWBIES who don't like to handcode.

Read More

CSS/ JS: Show-hide help on forms

Rachel provides all the code and shows you how to provide help within a form which can be toggled on or off via a button on the form, using CSS, XHTML and some JavaScript that degrades properly for users without JavaScript or CSS support. The same technique can be used to show or hide areas of any page - for example, to unhide a news story if the headline is clicked, for example. Read More

Creating a site map from styled lists

In this tutorial we will look at how to lay out a site map using nested lists and CSS, discussing why nested lists are the most appropriate way to lay out a site map and how we can use CSS to style the site map to show the different sections within a site in a clear way. This tutorial also demonstrates some key concepts in CSS usage – showing how CSS styles 'cascade' and are inherited by elements within a parent element, a fact that we use to our advantage in this tutorial.

Read More

CSS Curved boxes layout

CSS layouts can often seem a bit “boxy” – while divs with CSS borders applied are nice and clean in terms of mark-up they can look a bit boring in comparison to old style table layouts that make use of curved images carefully placed in table cells to give rounded corners on page elements.

 

In this tutorial we will learn one method of creating curved boxes in CSS layouts and we will also look at how the method can be used within a CSS layout to create a less boxy look and feel for a three column design.

 

 

Read More

Positioning footers with CSS

It's a common problem faced by nearly all of us as we transition from tables-based layouts to CSS. After the simplest layouts have been achieved, moving presentational font tags and other deprecated tags into CSS files,  a whole host of questions come to mind as to how to complete tasks that seemed simple using tables. Positioning a footer that 'sticks' to the bottom of the browser window is one such issue and in this article we will look at two ways in which we can achieve a footer for a CSS layout. We also investigate how to get over Internet Explorer's dislike of one aspect of our solution, and deliberately throw IE into "Quirks Mode" in order to acheive a cross-browser solution to the footer problem.

Read More

Animating Draw Layers

In previous articles I showed you how to set up draw layers and how to add behaviours to a draw layer to create dynamic content. Dreamweaver MX (and the updated Dreamweaver MX 2004) also provides controls that allow you to animate draw layers through the use of a standard Timeline interface. Although not as sophisticated as the ones found in Flash or Director, the concepts are much the same. Dreamweaver will generate all of the DHTML code needed to animate one or more layers on the Web page.

 

This article is suitable for those using Dreamweaver MX and MX2004 with the newest update from Macromedia that restored the timeline to MX 2004.

Read More

Many Boxes: a CSS Layout

A popular layout style for sites that have lots of small chunks of content is to lay it out in lots of small boxes – an example is the BBC web site. With a tables-based layout, this would usually mean creating a grid with the table cells and putting content into each cell. In this article we will look at creating a layout which uses this boxy effect using CSS for layout.

Once we have created a three column layout to contain our boxes using CSS, we can explore how to position our boxes within that, so that content never overlaps, regardless of how much text is in each box, or whether the user resizes text. Then we explore how to change the CSS to make the layout less "boxy", but retain the same markup.

The code is supplied, and will work with Dreamweaver MX and MX 2004, but the tutorial uses the Insert Div Tag dialogue that is only available with MX 2004.

Read More

CSS Layouts: Fixed widths and float

This tutorial will take you through the process of building a modern page design using CSS for layout and bearing in mind best practice in terms of document structure. The layout that we will be building demonstrates two useful techniques in terms of CSS layouts. We are going to design a page with a fixed width, centered layout and we will also be using the float property within this layout – so if you have been wondering how to do a fixed width layout or how float can be used for CSS positioning then this tutorial will hopefully answer some of your questions!

As this is quite a complex tutorial and we skip through some of the things quite quickly that are covered in other tutorials I have included the CSS and XHTML files in the code download, so you can compare your results with mine or use mine as a starting point for experimenting with this layout.

Read More