Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Best way to have 3 'columns', each with an image an text. Best practice?

    Hi there,

    I'm trying to create a layout identical to the attacged image. i.e.

    3 columns, each with a small image and text within. I would like to the make all 3 columns = to a specific width (900px).

    What is the best practice to position columns using CSS/HTML with images with in this manner? Would I use 'float' for 3 separate DIVs?

    Thanks so much for any help. It would be great to see any similar snippets that i could learn from!

    Attached Thumbnails Attached Thumbnails Best way to have 3 'columns', each with an image an text. Best practice?-screen-shot-2013-06-27-15.04.19.jpg  

  • #2
    New Coder
    Join Date
    Dec 2012
    Location
    England
    Posts
    20
    Thanks
    0
    Thanked 4 Times in 4 Posts
    I would just use "float" on divs but the way you want to display is similar to a table so you might want to consider using divs as tables (look: http://jsfiddle.net/xVTkP/).

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for your response!

    Using a table as you demonstrated seems to make sense.

    How would i place an image in one of the Cells, and then text to the right of it (with some small padding)? Is it possible to do within the same column div, or would i essentially need 6 columns?

    Thanks again!

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also...would you also happen to have a 'best practice' example of how to do this with using float? It would be interesting to see how you set the widths and aligned for each column to ensure it's all even.

  • #5
    New Coder
    Join Date
    Dec 2012
    Location
    England
    Posts
    20
    Thanks
    0
    Thanked 4 Times in 4 Posts
    If you use:
    Code:
    <div class="td">
      <img src="nav-a.png">
      <span>Row 1, Cell 1</span>
    </div>
    Then float image left and span right it will render correctly on modern browsers with html5 support but you might want to check for issues on older browsers. Also if you set "td" to fixed width it will be rendered as "max-width" not "width", seems like setting min-width resolve a problem here. For the best compatibility I would just use simple div layout instead of trying to make divs display as tables.

    I suggest you to do something like this:
    Code:
    <!DOCTYPE html>
    <html>
    <style>
    br.spacer { clear: both; }
    div.table { width: 1502px; border: 1px solid gray; }
    div.tr { }
    div.th { height: 50px; border-bottom: 1px solid gray; }
    div.th h3 { margin: 0; padding: 0; text-align: center; }
    div.td { width: 500px; height: 150px; float: left; }
    div.td.middle { border-left: 1px solid gray; border-right: 1px solid gray; }
    img { float: left; }
    span { width: 200px; float: right; padding: 20px 0 0 20px; }
    </style>
    <body>
    <div class="table">
      <div class="tr">
        <div class="th">
          <h3>title</h3>
        </div>
        <div class="td">
          <img src="nav-a.png">
          <span>Row 1, Cell 1</span>
        </div>
        <div class="td middle">
          <img src="nav-a.png">
          <span>Row 1, Cell 2</span>
        </div>
        <div class="td">
          <img src="nav-a.png">
          <span>Row 1, Cell 3</span>
        </div>
        <br class="spacer" />
      </div>
    </div>
    </body>
    </html>
    It seems to display properly on IE quirks mode as well.
    Last edited by linek98; 06-27-2013 at 06:35 PM.

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That has worked perfectly.

    So the code you suggested with tables is 'best practice'?

    Many thanks!

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    linek98,

    Thanks so much for your help. i have it working nicely now.

    My last question is, how do i 'label' the CSS code so that i can refer to it in my main stylesheet?

    Currently if i put it in my main stylesheet, it is messing with other 'tables'. So how could i rename it to be something unique?

  • #8
    New Coder
    Join Date
    Feb 2013
    Posts
    37
    Thanks
    1
    Thanked 4 Times in 4 Posts
    @linek98
    I do like how you named each of the classes with labels such as td & tr. It does seem to make a better association. I may consider this if I decide to use a div alternative to tables.
    Last edited by Obsidian; 06-27-2013 at 08:31 PM.

    InternetCandy - Geeky Blog

    FreeWebGoods.com - Free online resources for website or computer.

  • #9
    New Coder
    Join Date
    Feb 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Obsidian.

    How would i label the class for this example exactly so it can be dropped into a separate CSS style sheet?

  • #10
    New Coder
    Join Date
    Feb 2013
    Posts
    37
    Thanks
    1
    Thanked 4 Times in 4 Posts
    @coogie

    Sorry, I had referred the class names as "labels". They're really the same thing.

    Once you do separate the CSS from the webpage, everything should work the same.

    InternetCandy - Geeky Blog

    FreeWebGoods.com - Free online resources for website or computer.

  • #11
    New Coder
    Join Date
    Feb 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply.

    I am still struggling to set this up with a separate CSS file.

    i tried to label it #top-section like the below but it doesn't work?


    HTML file:

    <id="#top-section" div class="table">
    <id="#top-section" div class="tr">
    <id="#top-section" div class="th">
    <h3>title</h3>
    </div>
    <id="#top-section" div class="td">
    <img src="nav-a.png">
    <span>Row 1, Cell 1</span>
    </div>
    <id="#top-section" div class="td middle">
    <img src="nav-a.png">
    <span>Row 1, Cell 2</span>
    </div>
    <id="#top-section" div class="td">
    <img src="nav-a.png">
    <span>Row 1, Cell 3</span>
    </div>
    <id="#top-section" br class="spacer" />
    </div>
    </div>


    CSS file:

    #top-section br.spacer { clear: both; }
    #top-section div.table { width: 1502px; border: 1px solid gray; }
    #top-section div.tr { }
    #top-section div.th { height: 50px; border-bottom: 1px solid gray; }
    #top-section div.th h3 { margin: 0; padding: 0; text-align: center; }
    #top-section div.td { width: 500px; height: 150px; float: left; }
    #top-section div.td.middle { border-left: 1px solid gray; border-right: 1px solid gray; }
    #top-section img { float: left; }
    #top-section span { width: 200px; float: right; padding: 20px 0 0 20px; }

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    This seems a rather complex way to do things to me. To keep things simple, have a try with this:

    Code:
    <div id="wrapper">
    	<div class="head_image">
    	      <img src="/images/one.jpg" alt="image one"/>
    	      <p>Sale : Clothing</p>
    	      <p>Up to 50% off</p>
    	</div>
    	<div class="head_image">
    	      <img src="/images/two.jpg" alt="image two"/>
    	      <p>Sale : Accessories</p>
    	      <p>Up to 50% off</p>
    	</div>
    	<div class="head_image">
    	      <img src="/images/three.jpg" alt="image three"/>
    	      <p>Sale : Shoes</p>
    	      <p>Up to 50% off</p>
    	</div>
    </div>
    I can't really see the benefit of emulating a table - it isn't a table, so why make it appear like one. Simpler html is generally good practice because it's simpler to maintain.

    Then you just need a little css:

    Code:
    #wrapper{width:900px;margin:0 auto}/*set wrapper*/
    .head_image{width:298px;float:left;border:1px solid black}/*total width 300px with border*/
    .head_image img{float:left;background-color:gray;margin:10px;width:70px;height:70px}/* background and dimensions just for illustration*/
    .head_image p{margin-left:90px}/* no need to float this, just give it a margin to offset*/
    This should be fine in pretty much every browser. My example is slightly simplified but illustrates the principles.

    coogie, there are a number of issues with your posted html, particularly the divs that are not marked up correctly starting with <div, and the fact that an id should be unique. Use the w3c validator - see my sig - to identify this sort of thing.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

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