SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    picture and label layout

    I have 6 photos of people, each with the name and job title underneath. I want to lay the pictures out in the formation 1,3,2 and the whole lot to be centred. Here is my css

    Code:
    .whorwe{
    	width:150px;
    	text-align:center;
    	display:inline;
    	margin:5px
    }
    The html is:

    HTML Code:
    <div align="center"strong>WHO ARE WE?</strong></div>
    <div class="whorwe"><img src="assets/profile.gif" alt="" name="Bob" width="150" height="150" border="1" id="Bob" />
    	<strong>Bob Smith</strong><br />
    		Director / Fundraiser</div>
    <br />
    
    <div class="whorwe"><img src="assets/profile.gif" alt="" name="Tim" width="150" height="150" border="1" id="Tim" /><br />
    	<strong>Tim Jones</strong><br />
    		Operator</div>
    <div class="whorwe"><img src="assets/profile.gif" alt="" name="Sue" width="150" height="150" border="1" id="Sue" />
    	<strong>Sue Meeh</strong><br />
    		Operations Manager. Operator</div>
    <div class="whorwe"><img src="assets/profile.gif" alt="" name="John" width="150" height="150" border="1" id="John" />
    	<strong>John Johnson</strong><br />
    		Operator</div>
    <br />
    
    <div class="whorwe"><img src="assets/profile.gif" alt="" name="Mary" width="150" height="150" border="1" id="Mary" />
    	<strong>Mary Lamb</strong><br />
    		Coordinator</div>
    <div class="whorwe"><img src="assets/profile.gif" alt="" name="Chris" width="150" height="150" border="1" id="Chris" />
    	<strong>Chris Christoferson</strong><br />
    		Coordinator</div>
    Can anyone help get this to work and maybe suggest a better ccs.

    cheers

    monkey
    monkey - the rest is history

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I'm not quite sure how you're trying to lay them out, but it looks like tables would be a cleaner solution.

  3. #3
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this:


    Bob Smith
    Director



    Tim Sue John
    Operator Operator Operator
    Manager



    Mark Chris
    Coordinator Coordinator


    I am trying to do it without tables.

    monkey
    monkey - the rest is history

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

    Tables would probably be valid for that type of data as there is a logical relationship between data.

    However here is a css version (its a bit long winded but its self explanatory).

    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">
    body {text-align:center}
    #wrapper1,#wrapper2,#wrapper3 {
     width:160px;
     margin:auto;
     text-align:center;
     clear:both;
    }
    #wrapper2 { width:480px;}
    #wrapper3 { width:320px}
    .imgwrap {float:left;width:160px;text-align:center}
    </style>
    </head>
    <body>
    <h1>WHO ARE WE?</h1>
    <div id="wrapper1"> 
      <div class="imgwrap"><img src="assets/profile.gif" alt="" name="Bob" width="150" height="150" border="1" id="Bob" /> 
    	<strong>Bob Smith</strong><br />
    	Director / Fundraiser</div>
    </div>
    <div id="wrapper2"> 
      <div class="imgwrap"><img src="assets/profile.gif" alt="" name="Tim" width="150" height="150" border="1" id="Tim" /><br />
    	<strong>Tim Jones</strong><br />
    	Operator</div>
      <div class="imgwrap"><img src="assets/profile.gif" alt="" name="Sue" width="150" height="150" border="1" id="Sue" /> 
    	<strong>Sue Meeh</strong><br />
    	Operations Manager. Operator </div>
      <div class="imgwrap"><img src="assets/profile.gif" alt="" name="John" width="150" height="150" border="1" id="John" /> 
    	<strong>John Johnson</strong><br />
    	Operator</div>
    </div>
    <div id="wrapper3"> 
      <div class="imgwrap"><img src="assets/profile.gif" alt="" name="Mary" width="150" height="150" border="1" id="Mary" /> 
    	<strong>Mary Lamb</strong><br />
    	Coordinator </div>
      <div class="imgwrap"><img src="assets/profile.gif" alt="" name="Chris" width="150" height="150" border="1" id="Chris" /> 
    	<strong>Chris Christoferson</strong><br />
    	Coordinator</div>
    </div>
    </body>
    </html>
    For better coding I would change breaks to p's but I left your code as it was.

    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
  •