[SGVLUG] web page funkiness
Douglas Burton
doug at augustarts.com
Thu Oct 6 17:37:06 PDT 2005
Emerson, Tom wrote:
>The key here is that the "read more..." link /follows/ the article, it doesn't /lead/ it. Unfortunately, this is an area of the site where we only have "indirect control" via the associated "css" page for the site/template. Here is the machine-generated HTML for that section of the page -- note that the "read more" link is essentially in the last row/cell of a "table", and the "October: puzzle pirates" sub-header is the first row/cell of the next table:
>
><table class="blog" cellpadding="0" cellspacing="0">
> <tr><td valign="top">
> <div>
> <table class="contentpaneopen">
> <tr>
> <td class="contentheading" width="100%">
> We're Back!
> </td>
> </tr>
> </table>
> <table class="contentpaneopen">
> <tr>
> <td valign="top" colspan="2">
> <div><span class="Subhead">Sgvlug ".org" is now back online!</span>[...]
> </td>
> </tr>
> <tr>
> <td align="left" colspan="2">
> <a href="index.php?option=com_content&task=view&id=34&Itemid=49" class="readon">
> Read more...</a>
> </td>
> </tr>
> </table>
> </div>
> <div>
> <table class="contentpaneopen">
> <tr>
> <td class="contentheading" width="100%">
> October 2005: Puzzle Pirates
> </td>
> </tr>
> </table>
> <table class="contentpaneopen">
>
>(cleaned up to be "human" readable ;)) while there are "<div>" markers surrounding the actual entry, the "div" is un-classified, so there isn't much for me to hang a style upon to put a little more space "between" articles. I -think- there is a way to assign a class to this div /because/ it is a sub-element of the (named) table class "blog", but I don't know CSS well enough to make that work. As such, I tried applying additional padding/margins/borders to the "readon" class, but other than adding a (short) line (I wanted it to extend across the entire page), I couldn't get any additionl/effective "space" between articles.
>
>Any thoughts?
>
>
The readon class is applied to a <a> tag, so you might try something like this:
a.readon {
margin: 1em 0;
width: 100%
border-bottom: 1px solid #f00;
}
You could also try a parent-child declaration like:
table.blog div {
margin: 1em 0;
width: 100%
border-bottom: 1px solid #f00;
}
It can be tricky to drill down through the cascade to the element definition you need. I haven't combed through the source very thoroughly yet, so let me know if my suggestions didn't do anything. I'll try to take a closer look tonight.
Doug
More information about the SGVLUG
mailing list