Forum Moderators: not2easy
I want to keep the H3 for "forum title" because that is semantically correct.
I also want to keep the P for "forum description" because that is also semantically correct.
For the rest, I don't mind changing out divs or any other element name...
Also note that this is in a template and gets repeated for each forum title.
I'm applying a background color to the outer div with a desired space between each forum title section so the page isn't one huge background color... that's why I have at the end.
I hope someone can come up with some css that will get the image to float to the left of all three lines of text....
<div class="forumdetail"><h3><a href="#">$forumtitle</a> <small class="forumpostcount">(x posts)</small></h3>
<p class="forumdesc">$forumdescription <span class="sponsorforum">Sponsored by <a href="#">$sponsor</a></span></p>
<p class="forumattach"><img src="attachment.php" alt="thumbnail" width="50" height="50"></p>
</div>
Let's see, I tried:
float:left
1. On the img, with the image above everything else and no surrounding div.
2. Surrounding the img with a p tag, which helped a bit.
3. Adding clear:both to various elements, which helped FF and hurt IE (or vice versa)
4. Putting the img underneath the div, just under the H2, at the bottom...etc..
At some point I almost got it working right, but it bled into the next set of the above code (as I said, it's a template that gets called once for each forum).
I will try to move it up again...but where did you mean? Right under the div? Where should the clear's be? And what type of clear? Left? Both?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.forumdetail {
margin: 0px;
padding: 10px;
background: #ccf;
border-bottom: 3px solid #fff;
}
.forumdetail IMG {
float: left;
}
.forumdetail H3, .forumdetail P {
margin-left: 70px;
}
</style>
</head>
<body>
<div class="forumdetail">
<img src="image_on.gif" alt="thumbnail" width="50" height="50">
<h3>Some title</h3>
<p class="forumdesc">Some description</p>
<p class="forumattach">Some stuff</p>
</div>
<div class="forumdetail">
<img src="image_on.gif" alt="thumbnail" width="50" height="50">
<h3>Some title</h3>
<p class="forumdesc">Some description</p>
<p class="forumattach">Some stuff</p>
</div>
<script>
</script>
</body>
</html>
