PHILIPS Posted March 31, 2007 Share Posted March 31, 2007 hello everyonehow do i get a layout like this web site. well basically all i want to know is how to have a background like this web site http://www.kingofpoker2007.com/. thank you for any help Link to comment Share on other sites More sharing options...
jlhaslip Posted March 31, 2007 Share Posted March 31, 2007 Sample page here: http://jlhaslip.trap17.com/samples/bckgnd_tile/index.htmlThe 'body' has an image which is called rivets_l.jpg in the sample file. It is repeated in both the x and y dimension, and is fixed to its position on the screen. The 'wrapper' uses a different image and is not fixed, so it scrolls with the page. body { background: url("rivets_l.jpg") gray repeat fixed }#wrapper { background: url("rivets.gif") red repeat } Link to comment Share on other sites More sharing options...
PHILIPS Posted March 31, 2007 Author Share Posted March 31, 2007 hey, thanks for your help. but i cannot seem to work it. I am not sure where i have to put these tages in to work. I am trying to get a grey background, but want the middle to be normal if you get me. like http://www.kingofpoker2007.com/. Can you help me please, thank you <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head> <style type="text/css">body {background-color: gray} </style><script>var slideShowSpeed = 5000var crossFadeDuration = 3var Pic = new Array() Pic[0] = 'twork.jpg'Pic[1] = 'grad.jpg'Pic[2] = 'computers.jpg'Pic[3] = 'smile.jpg'var tvar j = 0var p = Pic.lengthvar preLoad = new Array()for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i]}function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed)}</script><meta lang="en" name="Description" content="Welcome to Online Education" /><title>Online Education</title><style type="text/css" />/* Main layout */div#container { margin-left:auto; margin-right:auto; width:700px; background-color:#FFFFFF;}/* Header and nav */div#header { height:50px; width:700px; clear:both; padding:0 0 20px 0;}div#header h1 { font-family:Copperplate Gothic Bold, Arial, Helvetica, sans-serif; color:#333; margin:0; float:left; font-weight:normal; padding:21px 0 0 17px;}div#header h2 { font-family:Georgia, "Times New Roman", Times, serif; color:#333; margin:0; float:left; font-size:11px; font-weight:normal; padding:29px 0 0 12px;}/* NAV background */span.o { color:#FF0000; }span.db { color:#333333; }div#nav ul { list-style-type:none; width:700px; margin:0; padding:8px 0px 10px 10px; height:25px; background-color:#333;}/* NAV */div#nav ul li { display:inline;}div#nav ul li a { display:block; padding:5px 7px 5px 7px; float:left; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFF; text-decoration:none; font-size:12px;}div#nav ul li a:hover { background-color:#FF0000;}</style></head><body onload="runSlideShow()"> <div id="container"> <div id="header"> <h1><span class="o">Online</span><span class="db">Education</span></h1> </div> <div id="nav"> <ul> <li><a href="C:\Documents and Settings\owner12\My Documents\Project\j.html">Home</a></li> <li><a href="C:\Documents and Settings\owner12\My Documents\Project\d.html">About Us</a></li> <li><a href="">Forum</a></li> <li><a href="C:\Documents and Settings\owner12\My Documents\Project\Test.html">Test</a></li> </ul><br><br><table border="0" cellpadding="0" cellspacing="0"><tr><td id="VU" height=0 width=0><img src="1.jpg" name='SlideShow' width=700 height=150></td></tr></table><div style="float:right;width:230px;height:0px;border:0px solid #000000;"> <div class="newsbox"> <table cellpadding="0" cellspacing="0" border="0"><br><MARQUEE WIDTH="100%"><h3> News Board! </h3></MARQUEE> <!--A level--> <tr> <td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td> <td valign="top" class="fix"> <h3 class="fix">A LEVEL</h3> Which topic is best for you? <a href=""><b>Find out more...</b></a> </td> </tr> <tr> <td class="break" colspan="2"></td> </tr> <!--Revision--> <td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td> <td valign="top" class="fix"> <h3 class="fix">Revision </h3> Check out our easy to follow guide on Rivsing for exams. <a href=""><b>Find out more...</b></a> </td> </tr> <tr> <td class="break" colspan="2"></td> </tr> <!--Results--> <tr> <td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td> <td valign="top" class="fix"> <h3 class="fix">Results</h3> Find your results here <a href=""><b>Find out more...</b></a> </td> </tr> <tr> <td class="break" colspan="2"></td> </tr> <!--Past Exam Papers--> <td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td> <td valign="top" class="fix"> <h3 class="fix">Past Exam Papers</h3> View previous Exam papers <a href=""><b>Find out more...</b></a> </td> </tr> </table> </div> </div></body></html> Link to comment Share on other sites More sharing options...
jlhaslip Posted March 31, 2007 Share Posted March 31, 2007 phillip,there are about 30 errors on that page. It will take some time to repair them. I will be unable to get to it until later tonight, but will get something for you asap.Hope you understand. In the meantime, if someone else comes along to assist, that would be good, too. Link to comment Share on other sites More sharing options...
falcifer Posted March 31, 2007 Share Posted March 31, 2007 hey, thanks for your help. but i cannot seem to work it. I am not sure where i have to put these tages in to work. I am trying to get a grey background, but want the middle to be normal if you get me. like http://www.kingofpoker2007.com/. Can you help me please, thank youWell, aside from your lack of closing DIV tags... your code works.It does make the background white. However, since the "container" only contains a small part of your page, you can only see a small part with a white background.You'd need to add more content for it to be more evident. Or assign a "height" attribute to the DIV#container element. Something like "100%" would make it cover the whole page, even if the content didn't extend that far. But in my experience, the height CSS attribute isn't very reliable...Some code that works for me (Firefox 2.0):<html><head><title>CSS Example</title><style type="text/css">body { background-color: gray; margin: 0;}div#main { background-color: white; width: 70%; position: absolute; left: 15%; height: 100%; border: 1px solid black;}img.banner { width: 100%;}</style></head><body><div id="main"><img class="banner" height="50px" width="175px" src="http://link/to/image.jpg" /><span>some stuff here</span><div id="inner">more stuff here</div><table border=1><tr><td>even a table!</td></tr></table></div></body></html> My advice would be to work on the base. e.g. the blank page with the background you want, and the "normal" page in the middle. Then add the content you want. If you add everything at once, and there's a problem, then there's no way of knowing what's causing the problem....Hopefully this helps a little Link to comment Share on other sites More sharing options...
falcifer Posted March 31, 2007 Share Posted March 31, 2007 Editing the KingOfPoker source seems to be your best option.Using both that site and the code you posted here, I've come up with the following <!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><title>Online Education</title><style type="text/css">body { background-color:#BFBFBC; padding: 0; margin: 0; font: normal 11px tahoma, arial; line-height: 15px; width: 98.3%;}#main { text-align: center; height: 400px; }#main .container { border: 1px solid black; width: 756px; overflow: hidden; background-color: white; text-align: left; padding: 6px; margin:0 auto; }#main .topbar { background-color: #ffffff; height: 62px; /* 43px; */}#main .topbar .header { height: 50px; /* 31px; */ width: 700px; /* 423px; */ float: left; margin: 8px 0 0 12px; margin: 8px 0 0 6px;}#main .topbar .header h1 { font-family: Copperplate Gothic Bold, Arial, Helvetica, sans-serif; color: #333; margin: 0; float: left; font-weight: normal; padding: 21px 0 0 17px;}#main .o { color: #FF0000; }#main .db { color: #333333; }#main .imgtop { padding-bottom: 6px;}#main .imgtop ul { list-style-type: none; width: 700px; margin: 0; padding: 8px 0px 10px 10px; height: 25px; background-color: #333;}#main .imgtop ul li { display: inline;}#main .imgtop ul li a { display: block; padding: 5px 7px 5px 7px; float: left; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFF; text-decoration: none; font-size: 12px;}#main .imgtop ul li a:hover { background-color: #FF0000;}#main .left-column { float: left; width: 430px; margin: 0 6px 16px 0; }#main .left-column .copy { padding: 11px; margin-top: 0px; }#main .right-column { padding-bottom: 6px;}#main .right-column .newsbox { float: right; width: 320px; margin: 6px 0; }.newsbox table { position: relative; top: 50px;}</style><script language="JavaScript" type="text/javascript">var slideShowSpeed = 5000;var crossFadeDuration = 3;var Pic = new Array('twork.jpg', 'grad.jpg', 'computers.jpg', 'smile.jpg');var t, j = 0;var p = Pic.length;var preLoad = new Array();for (i = 0; i < p; i++){ preLoad[i] = new Image(); preLoad[i].src = Pic[i];}function runSlideShow(){if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply();}document.images.SlideShow.src = preLoad[j].src;if (document.all){ document.images.SlideShow.filters.blendTrans.Play();}j = j + 1;if (j > (p-1)) j = 0;t = setTimeout('runSlideShow()', slideShowSpeed);}</script><meta lang="en" name="Description" content="Welcome to Online Education" /></head><body onload="runSlideShow()"><div id="main"> <div class="container"> <div class="topbar"> <div class="header"> <h1><span class="o">Online</span><span class="db">Education</span></h1> </div><!-- left --> </div><!-- topbar --> <div class="left-column"> <div class="imgtop"> <ul> <li><a href="C:\Documents and Settings\owner12\My Documents\Project\j.html">Home</a></li> <li><a href="C:\Documents and Settings\owner12\My Documents\Project\d.html">About Us</a></li> <li><a href="">Forum</a></li> <li><a href="C:\Documents and Settings\owner12\My Documents\Project\Test.html">Test</a></li> </ul> <table border="0" cellpadding="0" cellspacing="0"><tr> <td id="VU" height=0 width=0><img src="1.jpg" name='SlideShow' width=700 height=150 /></td> </tr></table> </div><!-- imgtop --> <div class="copy"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et urna. Mauris blandit. Ut interdum. Pellentesque accumsan. Nulla placerat adipiscing tellus. Donec nec tellus. Sed ut sapien placerat nulla porta dictum. Cras sit amet pede vel purus tempor luctus. Maecenas commodo venenatis eros. Nulla adipiscing. Vivamus eleifend, dui sit amet iaculis laoreet, ante tellus sagittis sapien, nec consequat sapien massa vel justo. Nullam eget quam. Ut nec orci. Curabitur vestibulum odio quis odio.<p>Curabitur id nulla. Nunc urna dolor, hendrerit eget, molestie nec, luctus quis, odio. In accumsan quam et urna. Aenean eget sapien non diam varius dapibus. Nullam nunc. Suspendisse potenti. Etiam eget tellus. Nulla facilisi. Integer ultrices aliquet diam. Nullam a nisi. Donec nisl. In luctus sapien sed sapien. Sed vel tortor non pede accumsan vestibulum. Etiam turpis. Mauris sed tortor id dolor mattis vulputate. Aenean facilisis, eros eget bibendum blandit, magna nunc pulvinar mauris, interdum tempor felis velit sed tellus. Praesent bibendum, diam nec congue tincidunt, turpis enim pulvinar lectus, ultrices eleifend pede elit id lectus. Duis ornare, felis pulvinar nonummy egestas, dui sapien viverra risus, eget feugiat diam odio non est. </div><!-- copy --> </div><!-- left-column --> <div class="right-column"> <div class="newsbox"><table cellpadding="0" cellspacing="0" border="0"><tr><td colspan="2"><MARQUEE WIDTH="100%"><h3> News Board! </h3></MARQUEE></td></tr><!--A level--><tr><td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td><td valign="top" class="fix"><h3 class="fix">A LEVEL</h3>Which topic is best for you?<a href=""><b>Find out more...</b></a></td></tr><tr><td class="break" colspan="2"></td></tr><!--Revision--><td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td><td valign="top" class="fix"><h3 class="fix">Revision </h3>Check out our easy to follow guide on Rivsing for exams.<a href=""><b>Find out more...</b></a></td></tr><tr><td class="break" colspan="2"></td></tr><!--Results--><tr><td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td><td valign="top" class="fix"><h3 class="fix">Results</h3>Find your results here<a href=""><b>Find out more...</b></a></td></tr><tr><td class="break" colspan="2"></td></tr><!--Past Exam Papers--><td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td><td valign="top" class="fix"><h3 class="fix">Past Exam Papers</h3>View previous Exam papers<a href=""><b>Find out more...</b></a></td></tr></table> </div><!-- newsbox --> </div><!-- right-column --> </div><!-- container --></div><!-- main --></body></html> Not sure if it's all perfect, or exactly what you want, but it looks like what you're asking for.You can alter the appropriate attributes to get what you want. Just look at the code and see what's what.The size of the white main part will change to accommodate whatever you put inside there. Hopefully that helps some more. Link to comment Share on other sites More sharing options...
jlhaslip Posted April 1, 2007 Share Posted April 1, 2007 Falcifer,Good Job! Thanks for chipping in here. I'm sure PHILLIP appreciates the effort.Took me longer than I thought to get back to this and when I found your response, checked it out. Couple of errors in the validator I use, but most of them were trivial. Missed a couple of closing tags and a <tr>, but the validator I use checks against xhtml strict, so that is not a big deal.Here is the code as error free as I can get it. Used an xhtml Transitional Doctype. <!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> <title> Online Education </title><style type="text/css">/*<![CDATA[*/body {background-color:#BFBFBC;padding: 0;margin: 0;font: normal 11px tahoma, arial;line-height: 15px;width: 98.3%;}#main {text-align: center;height: 400px;}#main .container {border: 1px solid black;width: 756px;overflow: hidden;background-color: white;text-align: left;padding: 6px;margin:0 auto;}#main .topbar {background-color: #ffffff;height: 62px; /* 43px; */}#main .topbar .header {height: 50px; /* 31px; */width: 700px; /* 423px; */float: left;margin: 8px 0 0 12px;margin: 8px 0 0 6px;}#main .topbar .header h1 {font-family: Copperplate Gothic Bold, Arial, Helvetica, sans-serif;color: #333;margin: 0;float: left;font-weight: normal;padding: 21px 0 0 17px;}#main .o { color: #FF0000; }#main .db { color: #333333; }#main .imgtop {padding-bottom: 6px;}#main .imgtop ul {list-style-type: none;width: 700px;margin: 0;padding: 8px 0px 10px 10px;height: 25px;background-color: #333;}#main .imgtop ul li {display: inline;}#main .imgtop ul li a {display: block;padding: 5px 7px 5px 7px;float: left;font-family: Arial, Helvetica, sans-serif;font-weight: bold;color: #FFF;text-decoration: none;font-size: 12px;}#main .imgtop ul li a:hover {background-color: #FF0000;}#main .left-column {float: left;width: 430px;margin: 0 6px 16px 0;}#main .left-column .copy {padding: 11px;margin-top: 0px;}#main .right-column {padding-bottom: 6px;}#main .right-column .newsbox {float: right;width: 320px;margin: 6px 0;}.newsbox table {position: relative;top: 50px;}/*]]>*/</style><script language="JavaScript" type="text/javascript">//<![CDATA[var slideShowSpeed = 5000;var crossFadeDuration = 3;var Pic = new Array('twork.jpg', 'grad.jpg', 'computers.jpg', 'smile.jpg');var t, j = 0;var p = Pic.length;var preLoad = new Array();for (i = 0; i < p; i++){preLoad[i] = new Image();preLoad[i].src = Pic[i];}function runSlideShow(){if (document.all){document.images.SlideShow.style.filter="blendTrans(duration=2)";document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";document.images.SlideShow.filters.blendTrans.Apply();}document.images.SlideShow.src = preLoad[j].src;if (document.all){document.images.SlideShow.filters.blendTrans.Play();}j = j + 1;if (j > (p-1)) j = 0;t = setTimeout('runSlideShow()', slideShowSpeed);}//]]></script> <meta lang="en" name="Description" content="Welcome to Online Education" /> </head> <body onload="runSlideShow()"> <div id="main"> <div class="container"> <div class="topbar"> <div class="header"> <h1> <span class="o">Online</span><span class="db">Education</span> </h1> </div><!-- left --> </div><!-- topbar --> <div class="left-column"> <div class="imgtop"> <ul> <li> <a href="C:/Documents%20and%20Settings/owner12/My%20Documents/Project/j.html">Home</a> </li> <li> <a href="C:/Documents%20and%20Settings/owner12/My%20Documents/Project/d.html">About Us</a> </li> <li> <a href="">Forum</a> </li> <li> <a href="C:/Documents%20and%20Settings/owner12/My%20Documents/Project/Test.html">Test</a> </li> </ul> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td id="VU" height="0" width="0"> <img src="1.jpg" name='SlideShow' width="700px" height="150px" alt="" /> </td> </tr> </table> </div><!-- imgtop --> <div class="copy"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et urna. Mauris blandit. Ut interdum. Pellentesque accumsan. Nulla placerat adipiscing tellus. Donec nec tellus. Sed ut sapien placerat nulla porta dictum. Cras sit amet pede vel purus tempor luctus. Maecenas commodo venenatis eros. Nulla adipiscing. Vivamus eleifend, dui sit amet iaculis laoreet, ante tellus sagittis sapien, nec consequat sapien massa vel justo. Nullam eget quam. Ut nec orci. Curabitur vestibulum odio quis odio. </p> <p> Curabitur id nulla. Nunc urna dolor, hendrerit eget, molestie nec, luctus quis, odio. In accumsan quam et urna. Aenean eget sapien non diam varius dapibus. Nullam nunc. Suspendisse potenti. Etiam eget tellus. Nulla facilisi. Integer ultrices aliquet diam. Nullam a nisi. Donec nisl. In luctus sapien sed sapien. Sed vel tortor non pede accumsan vestibulum. Etiam turpis. Mauris sed tortor id dolor mattis vulputate. Aenean facilisis, eros eget bibendum blandit, magna nunc pulvinar mauris, interdum tempor felis velit sed tellus. Praesent bibendum, diam nec congue tincidunt, turpis enim pulvinar lectus, ultrices eleifend pede elit id lectus. Duis ornare, felis pulvinar nonummy egestas, dui sapien viverra risus, eget feugiat diam odio non est. </p> </div><!-- copy --> </div><!-- left-column --> <div class="right-column"> <div class="newsbox"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="2"> <h3> <marquee width="100%">News Board!</marquee> </h3> </td> </tr><!--A level--> <tr> <td width="97"> <a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a> </td> <td valign="top" class="fix"> <h3 class="fix"> A LEVEL </h3>Which topic is best for you? <a href=""><b>Find out more...</b></a> </td> </tr> <tr> <td class="break" colspan="2"></td> </tr><!--Revision--> <tr> <td width="97"> <a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a> </td> <td valign="top" class="fix"> <h3 class="fix"> Revision </h3>Check out our easy to follow guide on Rivsing for exams. <a href=""><b>Find out more...</b></a> </td> </tr> <tr> <td class="break" colspan="2"></td> </tr><!--Results--> <tr> <td width="97"> <a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a> </td> <td valign="top" class="fix"> <h3 class="fix"> Results </h3>Find your results here <a href=""><b>Find out more...</b></a> </td> </tr> <tr> <td class="break" colspan="2"></td> </tr><!--Past Exam Papers--> <tr> <td width="97"> <a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a> </td> <td valign="top" class="fix"> <h3 class="fix"> Past Exam Papers </h3>View previous Exam papers <a href=""><b>Find out more...</b></a> </td> </tr> </table> </div><!-- newsbox --> </div><!-- right-column --> </div><!-- container --> </div><!-- main --> </body></html> Only errors now relate to the use of the Marquee tag. Those errors will go away if the original poster can find a javascript to replace that since the marquee tag is proprietary to IE and is not in the Specs. And the width for that marquee should be in the style section instead of the body. Also, might need to adjust the height and width of the slideshow once the images are getting displayed since the specified height and width impose on the right hand sidebar. That will be the Owner's decision, I guess.Any questions, post back here. thanks. Link to comment Share on other sites More sharing options...
falcifer Posted April 1, 2007 Share Posted April 1, 2007 Good Job! Thanks for chipping in here. I'm sure PHILLIP appreciates the effort.Thanks. Couple of errors in the validator I use, but most of them were trivial. Missed a couple of closing tags and a <tr>, but the validator I use checks against xhtml strict, so that is not a big deal.What validator do you use?I never used one before. I generally tend to write all my tags with the opening and closing tags, then I put all the content inside them.I copied and pasted the tables, and most of the actualy content from PHILIPS' code, so it wasn't my fault. ;-)Only errors now relate to the use of the Marquee tag. Those errors will go away if the original poster can find a javascript to replace that since the marquee tag is proprietary to IE and is not in the Specs.Not to mention the fact that most people that I know hate the marquee tag. But at least it's not a flashing marquee... Link to comment Share on other sites More sharing options...
PHILIPS Posted April 1, 2007 Author Share Posted April 1, 2007 Thats great guys, thank you so much for the help. I am still very new to this, still learning. I have learnt alot. I do really appreciate the help. Thank you Link to comment Share on other sites More sharing options...
jlhaslip Posted April 1, 2007 Share Posted April 1, 2007 What validator do you use?The Tidy Validator included with Firefox Extension named Firebug.And I figured as much about the content Cut and Paste, no problem. Html doesn't require closing tags, but xhtml does whine about them. Link to comment Share on other sites More sharing options...
falcifer Posted April 1, 2007 Share Posted April 1, 2007 The Tidy Validator included with Firefox Extension named Firebug.And I figured as much about the content Cut and Paste, no problem. Html doesn't require closing tags, but xhtml does whine about them.I don't think I came across XHTML until I saw it here. I put my blog template into the W3 validator and it didn't like it at all. But it works fine for everyone who views it, so I don't know if I'll worry much about it. I don't develop for anything commercial, so until people complain about it, I won't worry. ;-)I still come across pages which produce tons of errors in Firefox's error console, so I don't know how much I should worry about XHTML.And @PHILIPS; You're welcome.I always found that the best way to learn was by doing it. So if you see a site you like, you can always view the source code, then copy and paste it into the a text editor (notepad, wordpad or whatever you like) and look at what each part of the site does. See how the CSS is controlling the elements on the page, and get rid of all the extra text and stuff, and you can insert keywords, so you know exactly what is what.I also find that changing the background colour of elements to more vibrant colours made it easier to see exactly where they were, if they were extending too far or not far enough, and if they were covering other elements.And finally... adding comments to closing tags (especially if you have loads of DIV elements nested within each other) always helps to make sure you close your tags, and also make it clearer where things are.Tabbed code is another way to make things easier to read. But depending on the extent of nesting, it can get rather unwieldy. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now