 Feed |
Sometimes you would like to use vertical lines along the text (or other content) on your pages, and you'd like those lines to adapt to the length of that text. Usually that has been solved by using images and background colours in tables, but why use such table tricks these days?
Using CSS for this task not only makes it all easier and better, it also give you a lot more options. Let's have a look at a typical question, and how to solve it with CSS:
"I need to use vertical lines in a table cell, which need to be the same height as the text content of the cell, regardless of the visitor's screen resolution and window size. Does anyone know any way of getting this to work? (I don't want borders, just two vertical lines)."
First we set up the style sheet definition:
<style type="text/css">
<!--
.borders { border-right-color: red; border-left-color: blue;
border-left-style: dashed; border-right-style: solid;
border-right-width: 1px; border-left-width: 3px;
padding-right: 6px; padding-left: 6px;}
-->
</style>
Here I've used different colours for the right and left line, and different styles too. But how do I use it? You can use this definition not only in table cells, but also in div-layers, paragraphs, tables and more:
<p class="borders"> blah blah blah</p>
<table class="borders">...
<th class="borders">...
<td class="borders">...
<div class="borders">...
...
(If you use it both in table and td/th-tags, you'll get it double up, of course.) The padding I use in the definition ensures that there IS some padding between text and lines when using this with other tags than the td tags.
But how does this look in use?
This is an example of a simple blockquote which has got the borders style applied to it. How much work would it be to make this work with tables? Quite a bit, and if you would like to use it again several times, the amount to write (and download) builds up fast. All that's needed now with CSS, is to write <blockquote class="borders"> and it's all taken care of.
When I said there are a lot of options possible when using CSS, I meant it. As an example, here's the border-styles you can use:
Combine border width, style and colour with border top, right, left and bottom to get a taste ;-)
(Those of you who use Dreamweaver 4, do read the included CSS Reference as you often need to do some hand coding to get everything as you want - and there's a lot to learn from it.)
Be the first to write a comment