Here’s a nice HTML and CSS trick – making text split with different colors.
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)
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.
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
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:
Note that the contents and padding will have the background color or image which is assigned to the content. The margin does not.
(more…)
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…)
