[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 &quot;.org&quot; is now back online!</span>[...]
>      </td>
>      </tr>
>      <tr>
>      <td align="left" colspan="2">
>      <a href="index.php?option=com_content&amp;task=view&amp;id=34&amp;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