Explore the Premium Content

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

Free: Remaking DMXzone in CSS and XHTML

Read for free the trials and tribulations of our intrepid tech team as they wade through 6000 articles-worth of tag spag hell, nested table horror, and emerge victorious with a fully validating CSS and XHTML site that loads twice as fast, renders better and is more maintainable!

The ASP and JavaScript we used to convert the all our articles into xhtml and the full DMXzone.com CSS file is included for download too!

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

Night of the Image Map

In this free tutorial, Stuart Robertson shows how to make an old-school image map for navigation, using CSS and XHTML:

"When the other designer sent me his concept for the site, I began to despair. He wanted the page to look like an old weathered book, with rough edges and grungy textures. The menu items were scattered about the page. How could I turn a well-structured document into something that looked so organic? I thought about image maps.

They were horribly outdated, but an image map would make things so much easier than chopping the background image into dozens of pieces and trying to use CSS to stitch it back together. It might have been crazy to think about using them again, but the old ways seemed to hold the answer. I decided to go back into the laboratory and see if I could .."

 

This article was originally published by A List Apart, and is reproduced by kind permission.

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

Free! CSS Drop Shadows

In this free article, Sergio Villarreal shows how to use CSS to make drop shadows, in a way that works across all modern browswers and conforms to Web Standards.

This article was originally published by A List Apart and is reproduced by kind permission. It's copyright © 1998–2004 A List Apart Magazine, Happy Cog Studios, and Sergio Villarreal.

 

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

Free! CSS Sprites: Image Slicing’s Kiss of Death

In this free article Dave Shea shows how to use an innovative new CSS technique which he calls CSS Sprites that works in all modern browsers (except Opera 6), and replaces old-school image slicing and dicing (and the necessary JavaScript) with standard CSS and HTML lists.

This article was originally published by A List Apart and is reproduced by kind permission. It's copyright © 1998–2004 A List Apart Magazine, Happy Cog Studios, and Dave Shea.

 

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