SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict tedleonard's Avatar
    Join Date
    Jun 2000
    Location
    Dark side of the moon
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Table-less divs alignment problem

    Hello all,

    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:

    http://www.jerseyraces.com/race_calendar.jpg

    I apologize, my photoshop skills are almost as atrocious as my css skills.

    Here's the code I'm working with:

    Code:
    <div class="event">
    <img src="#" class="event_img" height="50" width="50" />
    <p class="event_title">Lorem Ipsum</p>
    <p class="event_date">May 1, 2011</p>
    	                
     </div>
                    
    <div class="hr2">
    <hr />
    </div>
    Code:
    .event {
    	width:auto;
    	float:left;
    	clear:right;
    }
    .event_img { margin-left:5 px; float:left; height:50px; width: 50px; }
    
    .event_title{
    	float:left;
    }
    .event_date{
    	float:right;
    }
    I've tried a whole bunch of different tweeks but no luck. I'm totally lost, can someone give me a hand?

    Here's the URL of the page I'm working on: JerseyRaces.com - Jersey Loves Competition

    Thanks so much in advance for any help you could provide.
    New Jerseyans: Beat your traffic ticket!
    http://www.njtrafficfines.com

  2. #2
    SitePoint Addict tedleonard's Avatar
    Join Date
    Jun 2000
    Location
    Dark side of the moon
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Made some progress, but would still appreciate some clarification as to the 'proper' way to do this, thanks!
    New Jerseyans: Beat your traffic ticket!
    http://www.njtrafficfines.com

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,729
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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!

    Code:
    .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....

    anyway.. I hope that helps

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Here is what I had done there:
    Article Summaries

    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

    Hope you find it useful

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font: 100%/1.2 arial, helvetica, sans-serif;
        background: #FFF;
    }
    #wrap {
        width: 760px;
        margin: 0 auto;
        padding: 40px 0;
        background: #222;
    }
    .event {
        width: 680px;
        margin: 0 auto;
        padding:0 0 20px 0;
        background: #333 url([url]http://www.jerseyraces.com/images/homepage16.gif[/url]) repeat-x 0 100%;
        color:#FFF;
        overflow:hidden; /*contain floats*/
    }
    .event img {
        float: left;
        width: 50px;
        height: 50px;
        margin: 10px;
    }
    .event span {
        float: right;
        padding:10px;
    }
    .event h3 {
        font: bold 1.2em/1.2 arial;
        margin: 15px 0 0;
    }
    .event p {
        margin: 5px 0;
        overflow:hidden;
    }
    </style>
     
    </head>
    <body>
     
    <div id="wrap">
        <div class="event">
            <div>
                <img src="http://www.jerseyraces.com/images/runner1.jpg" alt="Event image" width="50" height="50">
                <span>May 1, 2011</span>
            </div>
            <h3>Event Title</h3>
            <p>Jersey City, NJ</p>                
        </div>
        <div class="event">
            <div>
                <img src="http://www.jerseyraces.com/images/runner1.jpg" alt="Event image" width="50" height="50">
                <span>May 1, 2011</span>
            </div>
            <h3>Event Title</h3>
            <p>Jersey City, NJ</p>                
        </div>                
    </div>
     
    </body>
    </html>

  5. #5
    SitePoint Addict tedleonard's Avatar
    Join Date
    Jun 2000
    Location
    Dark side of the moon
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    The info is greatly appreciated. Thank you!!
    New Jerseyans: Beat your traffic ticket!
    http://www.njtrafficfines.com

  6. #6
    SitePoint Addict tedleonard's Avatar
    Join Date
    Jun 2000
    Location
    Dark side of the moon
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    New Jerseyans: Beat your traffic ticket!
    http://www.njtrafficfines.com

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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...

    Code:
    <div class="event">
    	<img
    		src="http://www.jerseyraces.com/images/runner1.jpg"
    		alt="Event image"
    	/>
      <h3>
      	<span>Event Title</span>
      	May 1, 2011
      </h3>
      <p>Text Describing Event</p>                
    </div>
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •