...

View Full Version : How would I create something like this?



beyond_ff
07-28-2012, 08:56 PM
I'm looking to create something like this *attached* for the staff profile page of my site. My skills are pretty rusty, so I'm not sure where to start (nested tables? divs?). Can anyone give me a starting point for this?

Thanks in advance.

Lerura
07-29-2012, 01:09 AM
As you here are using a tabular layout, with several aligned cols and rows, i would say that a table is good.

<table id="UserX" style="border:0px;border-spacing:2px;">
<tr style=background-color:#CDCDCD;">
<td>Name</td>
<td>Position</td>
</tr>
<tr style=background-color:#E1E1E1;">
<td>etc.</td>
<td>etc.</td>
</tr>
<tr>
<td><img src="UserX.png" alt="UserX"></td>
<td>
Info 1: etc etc etc<br>
Info 2: etc etc etc<br>
Info 3: etc etc etc<br>
Info 4: etc etc etc<br>
</td>
</tr>
</table>

You could also use floating divs:

<div id="UserX">
<div style="float:left">
<div style=background-color:#CDCDCD;margin:1px">Name</div>
<div style=background-color:#E1E1E1;margin:1px">etc.</div>
<div style="margin:1px;">
<img src="UserX.png" alt="UserX">
</div>
</div>
<div style="clear:right;">
<div style=background-color:#CDCDCD;margin:1px">Position</div>
<div style=background-color:#E1E1E1;margin:1px">etc.</div>
<div style="margin:1px;">
Info 1: etc etc etc<br>
Info 2: etc etc etc<br>
Info 3: etc etc etc<br>
Info 4: etc etc etc<br>
</div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum