picture and label layout

**boxhead** · Oct 12, 2004 05:43

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

**Egor** · Oct 12, 2004 05:52

I'm not quite sure how you're trying to lay them out, but it looks like tables would be a cleaner solution.

**boxhead** · Oct 12, 2004 06:12

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

**Paul O'B** · Oct 12, 2004 09:32

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

User Tag List

Thread: picture and label layout

Thread Tools

Display

picture and label layout

Bookmarks

Bookmarks

Posting Permissions