|
pageoneresults -> Styling Paragraphs (6/2/2003 0:50:28)
|
First, let' s take a look at this page here...
[url=" http://www.gobcafunds.com/glossary/" ]Glossary of Financial & Investment Terms[/url]
Take a close look at what appears to be a single row table at top and bottom. Now, look a the See: sections with the line at left and bottom. Now, how did they do that?
Here' s the formula. Of course this does require CSS and a little bit of document structure planning.
The A thru Z tables, are not tables. That is a <p> tag that has been styled using these attributes...
/* This is the specific p class for the single row table effect. */
p.terms{
color:#000;
background:#eee;
border:1px solid #999;
letter-spacing:2px;
padding:1px 0 2px 0;
}
p.terms a{
font-weight:bold;
}
/* This is the specific p class for the left/bottom border effect display:block; */
p.see{
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
margin:0 0 0 15px;
padding:1px 0 3px 5px;
}
p.see a{
font-variant:small-caps;
}
Remember, most of what you do with tables, cells and border attributes, can be done using css and various block and inline level elements.
Now, if you did not want the bottom border of the See: paragraph to run the length of its container element (<div>), you would assign this attribute to the class...
/* This is the specific p class for the left/bottom border effect display:inline; */
p.see{
display:inline;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
margin:0 0 0 15px;
padding:1px 0 3px 5px;
}
p.see a{
font-variant:small-caps;
}
|
|
|
|
