I’m a bit of a novice when it comes to CSS. I’m using a canned template and modifying it to add a row-based list of events, hopefully without resorting to using a table. I drew a rudimentary mockup of what I’m trying to accomplish:
There are much better ways of doing this. , for starters you do not need to put the HR in a div, better yet you dont need the div at all!
.event {overflow:hidden; padding-bottom:20px; background:url(yourRuleImage.jpg) bottom center no-repeat #ccc; margin-bottom:1em;}
.event p.info {padding:5px ; overflow:hidden; margin:0;}
.event p { padding:0 0 0 60px;margin:0 0 1em 0; }
div.info {overflow:hidden; padding:5px 5px 20px 5px; background:url(yourRuleImage.jpg) bottom center no-repeat #ccc; margin-bottom: 0 0 1em 0;}
.event img { margin:0 10px 0 0 ; float:left; height:50px; width: 50px; }
.event .date{ float:right}
.event .title{ float:left;}
.event .title span{ display:block;}
<div class="event">
<p class="info"><img src="#" class="event_img" height="50" width="50" /><span class="title">Lorem Ipsum <span> evnet location</span></span> <span class="date">May 1, 2011</span></p>
<p> if you intend to add additional info it could easily go here under serparate and unclassified P tags, if not , you could simplify the whole code as shown bellow...</p>
<p> incidentally, consider using STRONG instead of span to add semantic weight to the title and location, that is unless the date is more important then use strong as the tag instead of span for class date</p>
</div>
<div class="event info"><img src="#" class="event_img" height="50" width="50" /><span class="title">Lorem Ipsum <span> evnet location</span></span> <span class="date">May 1, 2011</span></div>
you will need to create a an image (yourRuleImage.jpg or whatever ) to serve as your divider…
but would still appreciate some clarification as to the ‘proper’ way to do this, thanks!
Hi,
There was a Recent Thread that had a similar topic which was setting up a series of “Article Summaries” that stacked upon one another. The thread got pretty involved as we discussed the various ways to approach the markup while keeping it semantically correct. As well we discussed the importance of keeping block level elements separated from inline elements.
I see a lot of similarity here with what you are doing, you are basically setting up a series of “Event Summaries” and I believe the code I ended being content with there would be suitable here too.
Of course yours needs a slight tweak to get the date on the right side with a float. I would nest the date in a span and float it right, then I would nest the span and the image in a div since they are inline elements. From there it is straightforward with an H3 (or whatever level is appropriate) for the heading and a <p> tag for the other text.
Something like this, that keeps you from having to use several classes while using appropriate elements. You can also set your HR image as the BG image on the .event div
Thank you both so much for the info!! I’ve been working on this for hours ripping my hair out! What you both showed makes total sense, but I find that when I’m starting something from scratch it’s hard to figure out the proper way to get started. I’m actually signing up for Sitepoint’s css class to try to get a better grasp but I gather that will take a while.
BTW the way I had those HR tags in there was how templatemonster had structured it, I just copied and pasted it from a different template page. I’m sure their coding isn’t the greatest
I hate to say it, but that REALLY starts to look like tabular data to me… making these not table tags semantically incorrect. Clearly defined columns with related rows…
that said I’m seeing WAY too many tags beign thrown at this…
I tend to like to threat the date as part of the heading, but that’s me. Float the span, text-align:right the h3. Tends to look better when CSS is disabled.
But again, I smell tabular data. it’s not “don’t ever use tables” it’s “don’t use tables around non-tabular data”… I mean, it even has an element (the month/year) suitable for a CAPTION tag.