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 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts

    CSS Image and Text list

    Hello. Can anyone tell me the best way to do recreate this with CSS? By this, I mean the images to the left with the text to the right. The images are aligned to the middle of each text section. Thanks for any advice you can give me.

    http://www.americad.tv/aboutus.htm

    Mike

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    You would set the images to float to the left, while adding margin to it. Somthing like this:


    Code:
    <style type="text/css">
    <!--
     img.thumbnail
     {
      float: left;
      margin-right: 20px;
      margin-bottom: 20px;
     }
     br.both
     {
      clear: both;
     }
    -->
    </style
    
    
    <img class="thumbnail" src="media/images/thumbs/me.jpg" alt="A small image of me!" />
    <p>A little bit about myself...</p>
    <br class="both" />
    <img class="thumbnail" src="media/images/thumbs/chloe.jpg" alt="A picture of my friend, Chloe!" />
    <p>My friend, Chloe! A great friend because she...</p>
    <br class="both" />
    <img class="thumbnail" src="media/images/thumbs/reb.jpg" alt="A picture of my friend, Red!" />
    <p>My friend, Reb! A great friend because he...</p>
    Last edited by BWiz; 07-05-2007 at 07:10 AM. Reason: typo :)
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.


  •  

    Posting Permissions

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