SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    semantic sugestions for a column/row layout

    Hey every one, I need some advice on creating the markup for a page I am working on. Right now I think I have a case of div-itus going on and I am at a loss for how to make this better.

    Here is a fiddle of what I have:
    http://jsfiddle.net/cyBMa/12/



    Or if you prefer this is what it needs to look like:

    Code:
    Address                           
    12345 Street Name           |  VIEW MAP BUTTON   |
    City, ST 12345                 
    
    
    Contact Us                    
    email@example.com           |  E-MAIL US BUTTON   |
                                          
    _____________________________________________ <-border under contact info


    Here is my current mark-up:
    Code:
    <div class="column_wrapper">
      <div class="item_row">    
        <div class="column_one">
          <span class="title">Store Name</span>
          <address>
            123 Street Name<br />
            City, ST 12345
          </address>
        </div>
        <div class="column_two">
          <a class="small_button" href="http://maps.google.com/m?address">view map</a>
        </div>                
      </div>
      <div class="item_row">
        <div class="column_one">
          <span class="title">Contact Us</span><br />
          email@example.com
        </div>
        <div class="column_two">
          <a href="mailto:email@example.com" class="small_button">E-Mail Us</a>
        </div>
      </div>
    </div>
    CSS:
    Code:
    .column_wrapper {
        padding: 0.9em 0em;
        border-bottom: 0.12em solid #000;
    }
    
    .item_row:first-child,
    .column_wrapper:first-child{
        padding-top:0em;
    }
    
    .item_row {
        overflow:hidden;
        clear:both;
        padding-top: 0.9em;
    }
    
    .column_one,
    .column_two {
         width:50%;   
    }
    
    .column_one {
        float:left;
    }
    
    .column_wrapper .column_two {
        float:right;
    }
    
    .title {
        color:#7a1820;
        font-weight:bold;
    }
    
    body {
        font: 13px/1.231 sans-serif;
    }
    
    .small_button {
        display:block;
        float:right;
        width:30%;
        padding: .5em 0em;
        background-color:#7a1820;
        color:#fff;
        text-transform:uppercase;
        text-align:center;
    }
    Can this be trimmed down any more or am I stuck with this?

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here's my take. And these are the changes I made:

    • I rearranged the divs for the columns and the rows. It's a little cleaner now, in my opinion.
    • Instead of putting the headers in spans, I put them in actual headers (I used <h2> just because; the actual element you'd use depends on context).
    • I also got rid of the <address> element because <address> is only for the document's maintainer's contact information.
    • Instead of giving each row a padding-top, and then getting rid of the padding-top of the first row, I gave each row a padding-bottom.
    • Elements that are floated are automatically given display: block, so I got rid of that rule from .small_button
    • The zoom: 1 rule is just a bugfix for IE6


    A downside is that just about every single element in there has a class...
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you much! I like that I can shave off a div. Don't know why I did not think about getting rid of those. I did not know if using a header tag was considered semantically acceptable because it was not the header for an article so that is why I did not use it.

    did not know about the address thing, I read somewhere that android phones can detect the address block and use it to map a location so that is the only reason I used it, but if I was using it wrong then that probably is not the case. I will have to look into that address mapping thing and see if there is some micoformat that people use


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
  •