liberate Posted September 10, 2007 Share Posted September 10, 2007 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 More sharing options...
jlhaslip Posted September 10, 2007 Share Posted September 10, 2007 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 More sharing options...
liberate Posted September 10, 2007 Author Share Posted September 10, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.