Re: Sightly OT: Design Questions

[<Matt.Haas@xxxxxxxxxxx>]

Mike,

You may want to take a look at some of the articles at
http://www.alistapart.com. You'll have to do some digging but there are
a couple of really good articles on site layout using CSS. Also, Eric
Meyer's web site http://meyerweb.com/ has some good stuff on it.

Matt

-----Original Message-----
From: web400-bounces@xxxxxxxxxxxx [mailto:web400-bounces@xxxxxxxxxxxx]
On Behalf Of Mike
Sent: Thursday, February 08, 2007 12:18 AM
To: Web Enabling the AS400 / iSeries
Subject: Re: [WEB400] Sightly OT: Design Questions

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