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 to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How would I create something like this?

    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.
    Attached Thumbnails Attached Thumbnails How would I create something like this?-profile.gif  
    Last edited by beyond_ff; 07-28-2012 at 08:58 PM.

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    As you here are using a tabular layout, with several aligned cols and rows, i would say that a table is good.
    Code:
    <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:
    Code:
    <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>


  •  

    Posting Permissions

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