Two color text header

Here’s a nice HTML and CSS trick – making text split with different colors.

Two tone title in CSS

The trick is to make 2 DIVs with the same text content in the same place (using CSS position) and make the top one a different color and only half height (setting the height to slightly over half a line using height: 0.6em and overflow: hidden)

Demo here.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Natural language web design program

I’ve been playing around with natural language processing again. It’s really nice to communicate with a program using text commands rather than messing about with buttons and dialog boxes.

I’ve been working on a natural language web page designer. This is a very rough beta version for testing so have a play and send me feedback (what works/doesn’t work, things which aren’t clear in the helpfile).

Some knowledge of HTML and CSS is useful but not essential. Look at the example code and I’m sure you’ll get the idea.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Making a 2 column layout using CSS: an introduction to “float” and “clear”

The CSS “float” property makes a block move as far to the left as possible and makes everything try to flow round it to the right. We can use this to make columns. If we set the width on the left column and the width on the right column and float both to the left then we get nicely lined up columns.

2 column layout using CSS

2 column layout using CSS


(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

The CSS box model: explaining borders, margins and padding

CSS makes laying out content quite simple. However, an understanding of the “box model”, used to position objects in the page, is essential (read to the end because the thing that’ll catch you out every time is there). I’ve coloured the elements in this diagram to show them:
Diagram of padding, borders and margins in the CSS box model
Note that the contents and padding will have the background color or image which is assigned to the content. The margin does not.
(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Centering a page using CSS

There’s a great trick here. Some pages on your site will have more content than others. When the user goes from one page to another and the vertical scrollbar appears or disappears then the centered page shifts. To fix this, I use CSS to always show scrollbars so that content centers consistently.
(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter