Tables to DIVs

A

Anonymous

Guest
I'm refactoring a page with a responsive template, and I'd like to understand how I can replace this table with DIVs:

Code: 
 <p align="center">
   	  <table align="center" cellpadding="0" bgcolor="#FFFFFF" width="890" border="1">
		<tr>
		  <td>
			<div id="sse1">
			<div id="sses1">
				<ul>
					<li><a href="/pages/classics.php">Classics</a></li>
					<li><a href="/pages/history.php">History</a></li>
					<li><a href="/pages/literature.php">Literature</a></li>
					<li><a href="/pages/nonfiction.php">Non-Fiction</a></li>
				</ul>
			</div>
			</div>
		  </td>
		</tr>
	  </table>        
      </p>

Can someone point me in the right direction here?
 
It's already done:
Code: 
<ul>
        <li><a href="/pages/classics.php">Classics</a></li>
        <li><a href="/pages/history.php">History</a></li>
        <li><a href="/pages/literature.php">Literature</a></li>
        <li><a href="/pages/nonfiction.php">Non-Fiction</a></li>
      </ul>

Then style it using CSS.

O.K., you may think - how does that help?

An unordered list is a block level element, so we just create a basic navigation bar. Left as it is, the list items will stack on top of each other; using CSS you can line them up horizontally and give them a bit of style losing all of that html out of date inline style.

Code: 
<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='/my-first-stylesheet.css' rel='stylesheet'>
    <title>Refactored</title>
  </head>

  <body>
    
    <header>
      <h1>My Refactored Web Site</h1>
    </header>
    
    <nav>
    
      <ul>
        <li><a href="/pages/classics.php">Classics</a></li>
        <li><a href="/pages/history.php">History</a></li>
        <li><a href="/pages/literature.php">Literature</a></li>
        <li><a href="/pages/nonfiction.php">Non-Fiction</a></li>
      </ul>
      
    </nav>
    
  </body>
  
</html>

Save this as a new file 'my-first-stylesheet.css' in root.
Code: 
h1 {
  font: large sans-serif;
  color: blueviolet; /* color is the font-colour of this element */
  text-shadow: 2px 2px blue;
}
ul {
  width: 90%;
  background: green;
  border: 2px solid orange;
  border-radius: 3px;
  margin: 10px auto;
}
li {
  display: inline;
  background: orange;
  border: 3px;
  border-radius: 2px;
}

Ok, plenty to play with.

I suggest that you work on what the pages look like at the moment rather than how you got them to look like that before.
 
You must log in or register to reply here.
Back
Top