How can I get a well Structure CSS styled html profile?_问答_开发者

I am looking to have a picture, name of the person, links to photos, biography, life, tell about you! a map tag where the location will be shown, also at the right, there will be details like like, Born: Nationality: Ocupation, Trakcs:

Can any body help me with a semantic html structure style with CSS Please use http://jsfiddle.net/ to build it online Than开发者_Go百科ks.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your Yard Sales onproducts.line</title>
<link rel="stylesheet" href="" type="text/css" media="screen" />

</head>
<style type="text/css" >
#space {

    margin-bottom:1.2em;

       }
ul {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; }
 li {
    float: left; }
 li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }
     </style>
<body> 
<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Members</a></li>

<li><a href="#">Rollers</a></li>

<li><a href="#">Info</a></li>
</ul>
 <br/>
  <br/>
   <br/>
    <br/>
<div id="space">
<a href="#">Roberto Kirt</a>



</div>
<!--<ul><li><a href="#">'.$name2.'</a></li>
<li><a href="#">'.$name2.'</a></li>
<li><a href="#">'.$name2.'</a></li></ul>-->

<table width="1768" cellpadding="0" cellspacing="0" border="0.5">
  <tr>
    <td width="493" height="149"><img style="border:#666 1px solid;" src="images/profileimages/8.jpg" alt="Angel Pilier                   "align="left" width="100" height="130" border="1" /></td>
    <td width="1275"><table width="880" border="0.5" cellpadding="0" cellspacing="0">
      <tr>
       <td width="145" height="31"> </td><td></td>
      </tr>

      <tr>
        <td height="44" align="right">Born:</td><td width="735">1975-11-23</td>

      </tr>
      <tr align="right">
        <td height="38"></td>
       >
      </tr>
      <tr>
        <td height="36" align="right">Died:</td><td width="735">0000-00-00</td>

      </tr>
    </table></td>
  </tr>
  <tr><td height="31" colspan="2">&nbsp;</td></tr>
  <tr>
    <td height="31"><a href="#">Photos</a></td>
    <td rowspan="7"><table width="885" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="145" height="31" align="right"> Nationality:</td><td width="740"></td>

  </tr>
  <tr align="right">
    <td height="25">&nbsp;</td>

  </tr>
  <tr>
    <td height="24" align="right">Spouse:</td><td width="740"></td>
  </tr>
  <tr align="right">
    <td height="28">&nbsp;</td>

  </tr>
  <tr>
    <td height="27" align="right">Ocupation:</td><td width="740">Pianist</td>

  </tr>
  <tr align="right">
    <td height="27">&nbsp;</td>

  </tr>
   <td height="27" align="right">Childhood:</td><td width="740"></td>

  </tr>
     <tr align="right"><td height="27">&nbsp;</td>

  </tr>
     <td height="27" align="right">Tracks:</td><td width="740"></td>

  </tr>
  <tr align="right">
    <td height="119">&nbsp;</td>

  </tr>
</table>
</td>
  </tr>
  <tr>
    <td height="25">  <a href="#">Biography</a></td>

  </tr>
  <tr>
    <td height="25"> <a href="#">Life</a></td>

  </tr>
  <tr>
    <td height="26"><a href="#">Tell an Anecdote</a></td>

  </tr>
  <tr>


  </tr>
  <tr>


  </tr>
  <tr>
    <td><iframe width="700" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Rochester,+New York,+United States&amp;sspn=0.119541,0.110378&amp;ie=UTF8&amp;hq=&amp;hnear=Rochester,+New York,+United States&amp;z=14&amp;output=embed"></iframe></td>
   <!--<img src="images/foto.jpg" alt="nada" width="422" height="165" />-->
  </tr>
</table>

</body>
</html>

@fello, there lot of things in your layout

1) use external stylesheet as much as possible because if you written your css in the head of html page it's make that html page heavy to load & you have to right new css in every new page.

2) try to avoid using table based structure as much as possible .Use div instead of table because it's flexible to use check this for more.

3)didn't use <br/> to much .If you want to give spacing you can give with margin & padding .

4)ever browser have applied some there own default properties .So, avoid it you have to use reset sheet .

5)for semantic markup check these links :

a) http://www.html-and-css-tutorial.com/tutorial-3.html

b) http://css-tricks.com/snippets/html/html5-page-structure/

c) http://themeshaper.com/2009/06/24/creating-wordpress-theme-html-structure-tutorial/

As far as I judge your question, use of some CSS framework like twitter-bootstrap will give you a very good and responsive layout in very less time :)

You might want to use hcard. This and other microformats are described here.