Re: Sightly OT: Design Questions

[Mike <koldark@xxxxxxxxx>]

My site: http://podcastmike.com/index.php <http://podcastmike.com>
My CSS: http://podcastmike.com/style.css

The layout works great. The problem comes in the "Show" area where I have a
div table (that is a table without the <table> tags). (Funny, I can't find
the site I referenced now.) The problem is that the table keeps aligning
under the left link menu.

Here is the CSS I got from the site to get the tables to work (modified of
course):
div.row
{
   padding-top: 10px;
   clear: left;
}

div.row span.img
{
   float: left;
   width: 25%;
   text-align: center;
}

div.row span.desc
{
   float: left;
   width: 75%;
   text-align: left;
}

and my XHTML:
<div>
           <div class="row">
               <span class="img">
                   <img src="images/shadow250.png" alt="" style="border:
none; height: 170px;
                       left: -6px; margin-bottom: -20px; margin-right:
-170px; opacity: 1.00; position: relative;
                       top: -6px; width: 170px;" />
                   <a href="http://newmusictoday.net";>
                       <img src="images/NewMusicToday300.jpg" alt=""
style="border: none; height: 150px;
                           opacity: 1.00; position: relative; width:
150px;" />
                   </a>
               </span>
               <span class="desc"><a href="http://newmusictoday.net";
style="font-size: larger;">
                       New Music Today </a>
                       <br />
                       New Music Today is a 6-7 minute Monday thru Friday
podcast that plays one new song
                       each day.
               </span>
           </div>
           <div class="row">
               <span class="img">
                   <img src="images/shadow250.png" alt="" style="border:
none; height: 170px;
                       left: -6px; margin-bottom: -20px; margin-right:
-170px; opacity: 1.00; position: relative;
                       top: -6px; width: 170px;" />
                   <a href="http://mikeshotdish.com";>
                       <img src="images/mhd300.jpg" alt="" style="border:
none; height: 150px;
                           opacity: 1.00; position: relative; width:
150px;" />
                   </a>
               </span>
               <span class="desc"><a href="http://mikeshotdish.com";
style="font-size: larger;">
                       Mike's Hotdish </a>
                       <br />
                       Cooking up hot music with every serving.
               </span>
           </div>
       </div>

I had changed "clear: left;" from "clear: both;" and it fixed part of the
problem (it was aligning under the Ad before) but not the whole thing. I am
sure it has to do with this clear part but I am not sure on the correct
value.

If there is a better way to display this table, I am all for it. I am mostly
doing this for my personal education on learning some CSS. I started from an
open-source template and continued on from there to get to where I am at
now.

Thanks for any help offered. I didn't think you guys would want an
non-System i web question on the list.

On 2/7/07, Milan Zdimal <milanz@xxxxxxxxx> wrote:
> What's your question? I'm sure I can answer it. =)
>
> Milan