Jump to content

Replacing <table> with div


liberate
 Share

Recommended Posts

Hi EveryoneI am brand new to CSS, so far learning the basics has been easy. I've always used a WYSIWYG html editor but I created my first CSS page with notepad. No more <FONT face="" color="" size=""> taking up space on the page, and likely hindering my learning html. Wanting to replace, <table cellspacing="0" cellpadding="20" width="700" align="center" bgcolor="#ffffff" border="1"> with div. This seems to work but I do not know if it is 'correct'. There isn't a div {center}???

<html><head><style type="text/css">body {text-align:center; background-color: #ebeef7}p  {margin:20px 20px 20px;color: blue;text-align:left}div#container{width:700px;margin:0 auto}   #column {          width: 100%;          border-style: solid;          border-width: 1px;          border-color: #000000;          background-color: #ffffff;          }</style></head><body><div id="container"><div id="column"><p>This column should be centered on the page.This column should be centered on the page. This column should be centered on the page.</p></div></div></body></html>

This doesn't work: edt: found the trouble

 <html><head><style type="text/css">body           {text-align:center; background-color: #ebeef7}p              {margin:20px 20px 20px;color: blue;text-align:left}  div#column        {                  width:700px;margin:0 auto; // edit: missing semicolon                border-style: solid;                border-width: 1px;                border-color: #000000;                background-color: #ffffff;               }</style></head><body><div id="column"><p>This column should be centered on the page.This column should be centered on the page. This column should be centered on the page.</p></div></body></html>

No border, why??? edit: missing semicolonObservation: the CSS boarder seems darker then <table border="1"> Side note: Anyone know of a "paper" looking backgroung IMG to use instead of #ffffff? Thanks in advance.Tom

Link to comment
Share on other sites

Yes and no, not exactly.Div's are positioned using padding and margins. (sometimes Floats)There is a technique using margin: 0 auto which has the effect of centering a div, but there is no 'center'.Might want to check out the Tutorials over at w3schools Main site...

Link to comment
Share on other sites

Yes and no, not exactly.
Now there's a definitive answer :) And yes the tutorials at w3schools are very good, I spend as much tiime as I can there, reading here in the forum and viewing source on websites. Thanks jlhaslipFound one problem .... forgot a semicolon in div#column That's why the boarder didn't show up.Latest version: edit: need to use <!DOCTYPE ... strict
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><style type="text/css"> body           {background-color: #ebeef7}div.column     {                width:700px;margin:0 auto;                background-image: url('2.jpg');                background-repeat: repeat;                border-style: groove;                border-width: 1px;                border-color: #c0c0c0;                padding:.6cm               }p {font: normal normal 80% Verdana, sans-serif; color: #000080; text-align: left}</style></head><body><div  class="column"><p>This column should be centered on the page.This column should be centered on the page.This column should be centered on the page.</p></div></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...