How would code this in css and html? Should I do it with absolute? Or float it somehow? Any Ideas?
+1
A:
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?
Munzilla
2010-09-07 02:13:51
So then do: <ul><li>image1</li><li>image2</li><h1>big east image</h1>? but what about the css make the first 5 images float left but what about the h1 and the 2 images to the left and right of the big east?
Jacinto
2010-09-07 02:38:37
made some updates to better clarify. Let me know if you need more clarification.
Munzilla
2010-09-07 03:09:41
Would you put the styling for each li as <li class="1></li> or <li style="top:20px; right:50px;">
Jacinto
2010-09-07 03:23:14
I would definitely not use inline styling. So this way if you know that all of the li's are going to be absolutely positioned you could add styles all at once like li{position:absolute;...etc.} and just target the team specific classes and set their top and left styles.
Munzilla
2010-09-07 04:39:19