Question

How would code this in css and html? Should I do it with absolute? Or float it somehow? Any Ideas?

Answer 1

I would do it using css positioning while keeping in mind good markup. So basically, make the code reflect that the <h1> is the big east conference and each of the teams be list items.
Like this:

<h1>The Big East</h1>
<ul>
<li>Team 1</li>
<li>Team 2</li>
...
</ul>

This way the code makes sense to screen readers and is most SEO compliant.
Now, as far as how to then arrange the images, you can do it completely in CSS. So for the h1 you just do something like this:

h1{background-image:url(images/bigeast.png);text-indent:-9999px;display:block;overflow:hidden;}

The indent just sends the text outside of the h1 so it can’t be seen while keeping the good markup intact. Just do the same with all of the li’s and you’ll have all of your images in place. Then simply set all of the positions on the elements to absolute and position them on the page with something like left:238px; and top:20px;
I know it seems like a pain, but it’s really not all that hard, especially if you use firebug.
Make sense?