SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast Michael Randall's Avatar
    Join Date
    Nov 2003
    Location
    Raleigh, NC
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two Colums of Images...

    Hello.

    For the past few years, I have worked on several fine art websites.

    My prefered format, for the index pages, has always been two columns of images with aligned texts along the right hand side of the images, like this:

    www.crabelfineart.com

    This is a relatively simple matter with tables, although it does involve a lot of waste in creating the tables.

    Over the past month, I have given myself am intensive course in CSS. I've bought and studied the books, and I have spent many hours researching on the web, however, neither in the books nor on the web, can I find a way to replicate this design via style sheets.

    Can anyone be of assistance?

    -Michael Randall

    Designing with Passion
    www.randall-design.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is not exactly what you want but probably the simplest way is to float the images like so:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .outer {
     background-color: #CCCCCC;
     width: 700px;
    }
    .imageholder {
    width:280px;/*make this bigger than the width of your largest image if possible*/
    float:left;
    margin:25px;
    }
    .imageholder img {float:left}
    .imageholder p {float:left;margin-top:0px;}
    -->
    </style>
    </head>
    <body> 
    <div class="outer"> 
      <div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="146" height="50" /> 
    	<p>Image </br > 
    	  Name </p> 
      </div> 
      <div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="166" height="150" /> 
    	<p>Image Name</p> 
      </div> 
      <br style="clear:both" /> 
      <!-- place this after every set of images --> 
      <div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="116" height="95" /> 
    	<p>Image Name</p> 
      </div> 
      <div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="106" height="30" /> 
    	<p>Image Name</p> 
      </div> 
      <br style="clear:both" /> 
      <div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="136" height="85" /> 
    	<p>Image Name</p> 
      </div> 
      <div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="146" height="50" /> 
    	<p>Image Name</p> 
      </div> 
      <br style="clear:both" /> 
      <div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="126" height="95" /> 
    	<p>Image Name</p> 
      </div> 
      <div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="126" height="95" /> 
    	<p>Image Name</p> 
      </div> 
      <br style="clear:both" /> 
    </div> 
    </body>
    </html>
    However if you want the images vertically aligned within each row then the only way of doing so would be to find the height of each image and then set top to 50% and a negative margin of half the image height to draw it vertically central. The image would need to be absolutely placed for this to display correctly.

    It seems a lot of work for such a small advantage that if it were up to me I'd leave them top aligned as in the example.

    Hope it helps anyway.

    Paul

  3. #3
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not just use tables for layout in this instance as the images/text are almost like like data entries. I have found that using CSS for something like this definitely complicates matters, especially when the window and/or font is resized. NN 4 will also most likely choke on the floats making the page unreadable.

    Very attractive site BTW.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://devedge.netscape.com/viewsour...fishcam-style/
    may shed some light on this as well

  5. #5
    SitePoint Enthusiast Michael Randall's Avatar
    Join Date
    Nov 2003
    Location
    Raleigh, NC
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Thank you

    Thank you for all of the replies.

    Paul's solution is perfect. And I would implement it in a heartbeat if it was not of NN4. I will see if I can find a work around.

    As for keeping the tables vs switch over to CSS. I will keep the tables if I must, but because of the decreased efficieny and the increaded headaches with working with the tables I would perfer to get rid of them. (thnaks for the kind words on the design, Earther.

    And thank you for the link. The article is definitely helpful.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    it was not of NN4
    I'd be inclined to import the stylesheet to hide it from NN4 and just serve NN4 with a basic stylesheet (but still usable).

    Unless of course you have a lot of NN4 visitors. I know its a bit harsh but I think that sometimes you need to move forward.

    Paul


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
  •