Voodoo Jai Posted April 25, 2008 Share Posted April 25, 2008 What DOCTYPE do I need to use for a CSS page. <!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"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/loose.dtd"> is it one of these or not. Cheers Quote Link to comment https://forums.phpfreaks.com/topic/102884-solved-document-type-definition/ Share on other sites More sharing options...
obsidian Posted April 25, 2008 Share Posted April 25, 2008 You don't use a doctype for CSS. You only use the doctype for your markup, and then you can include the CSS via <link> tags within the header. Quote Link to comment https://forums.phpfreaks.com/topic/102884-solved-document-type-definition/#findComment-527007 Share on other sites More sharing options...
Voodoo Jai Posted April 25, 2008 Author Share Posted April 25, 2008 So is the first couple of lines not needed in this page, as it works right with out them but not with them included. <!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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 3px; border: 1px solid #ffffff; } div.img a:hover img { border: 1px solid #0000ff; } div.desc { text-align: center; font-weight: normal; width: 120px; margin: 2px; } </style> </head> <body> <div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="images/sample.jpg" alt="Klematis" width="153" height="94" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis2_big.htm"> <img src="images/sample.jpg" alt="Klematis" width="153" height="94" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis3_big.htm"> <img src="images/sample.jpg" alt="Klematis" width="153" height="94" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis4_big.htm"> <img src="images/sample.jpg" alt="Klematis" width="153" height="94" /> </a> <div class="desc">Add a description of the image here</div> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/102884-solved-document-type-definition/#findComment-527010 Share on other sites More sharing options...
obsidian Posted April 25, 2008 Share Posted April 25, 2008 No, they are needed in that page, as that is an HTML page. You have coded styles into the page itself, but that is not a CSS page: it is still an (X)HTML page. Your doctype is a declaration of what formatting you choose to use for your markup. It is a way you can validate your code when your page is done. Quote Link to comment https://forums.phpfreaks.com/topic/102884-solved-document-type-definition/#findComment-527015 Share on other sites More sharing options...
Voodoo Jai Posted April 25, 2008 Author Share Posted April 25, 2008 The page validates OK so why wont the page display correctly with doctype included. Is it the wrong definition. Quote Link to comment https://forums.phpfreaks.com/topic/102884-solved-document-type-definition/#findComment-527028 Share on other sites More sharing options...
obsidian Posted April 25, 2008 Share Posted April 25, 2008 The page validates OK so why wont the page display correctly with doctype included. Is it the wrong definition. First, what do you mean by "won't display correctly?" You haven't given any details of what the problem is. As for whether or not the doctype should be included and what it does, read up on this article on the W3C site. If you have a valid doctype and your page validates but still does not display properly, it is most likely an issue with the CSS itself. Quote Link to comment https://forums.phpfreaks.com/topic/102884-solved-document-type-definition/#findComment-527030 Share on other sites More sharing options...
GameYin Posted April 25, 2008 Share Posted April 25, 2008 If you have a doc type, and it's not displaying correctly, then you have a coding problem. Show the code. Quote Link to comment https://forums.phpfreaks.com/topic/102884-solved-document-type-definition/#findComment-527031 Share on other sites More sharing options...
Voodoo Jai Posted April 25, 2008 Author Share Posted April 25, 2008 I have posted the code above and also posted a separate topic but no one seems to be able to solve it. Here it is again. <!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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 3px; border: 1px solid #ffffff; } div.img a:hover img { border: 1px solid #0000ff; } div.desc { text-align: center; font-weight: normal; width: 120px; margin: 2px; } </style> </head> <body> <div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="images/sample.jpg" alt="Klematis" width="153" height="94" /> [/url] <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis2_big.htm"> <img src="images/sample.jpg" alt="Klematis" width="153" height="94" /> [/url] <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis3_big.htm"> <img src="images/sample.jpg" alt="Klematis" width="153" height="94" /> [/url] <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis4_big.htm"> <img src="images/sample.jpg" alt="Klematis" width="153" height="94" /> [/url] <div class="desc">Add a description of the image here</div> </div> </body> </html> I aslo have a live link to show what I maen about not displayin correctly. http://76.163.15.45/Untitled-7a.html Quote Link to comment https://forums.phpfreaks.com/topic/102884-solved-document-type-definition/#findComment-527046 Share on other sites More sharing options...
GameYin Posted April 25, 2008 Share Posted April 25, 2008 http://validator.w3.org/ Fix the errors. You had 18 from the code you posted. Quote Link to comment https://forums.phpfreaks.com/topic/102884-solved-document-type-definition/#findComment-527050 Share on other sites More sharing options...
Voodoo Jai Posted April 25, 2008 Author Share Posted April 25, 2008 Sorry that was wrong because I have been tinkering with it. thsi code validates and does not display right still <!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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tabbed browser testing</title> <script type="text/JavaScript"> //<![CDATA[ //here you place the ids of every element you want. var ids=new Array('pictures','video','text','misc'); function switchid(id){ hideallids(); showdiv(id); } function hideallids(){ //loop through the array and hide each element by id for (var i=0;i<ids.length;i++){ hidediv(ids); } } function hidediv(id) { //safe function to hide an element with a specified id if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById(id).style.display = 'none'; } else { if (document.layers) { // Netscape 4 document.id.display = 'none'; } else { // IE 4 document.all.id.style.display = 'none'; } } } function showdiv(id) { //safe function to show an element with a specified id if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById(id).style.display = 'block'; } else { if (document.layers) { // Netscape 4 document.id.display = 'block'; } else { // IE 4 document.all.id.style.display = 'block'; } } } //]]> </script> <style type="text/css"> /*<![CDATA[*/ <!-- .tabs { background-image: url(images/footer-1.png); height: 25px; width: 100px; background-repeat: no-repeat; } .galleryimage { background-color: #CCCCCC; height: 180px; width: 590px; border: thin solid #000000; } .page { height: 700px; width: 900px; background-color: #FFFFCC; margin-left: auto; margin-right: auto; } .clear { clear: both; } --> /*]]>*/ </style> <style type="text/css"> /*<![CDATA[*/ div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; display: inline; } div.img img { display: block; margin: 3px; border: 1px solid #ffffff; } div.img a:hover img {border: 1px solid #0000ff;} div.desc { text-align: center; font-weight: normal; width: 120px; margin: 2px; } /*]]>*/ </style> <style type="text/css"> /*<![CDATA[*/ div.miscDiv {display:none; width: 600px; background-color: #FFFF99;} div.textDiv {display:none; width: 600px; background-color: #FFFF99; height: 400px; overflow: auto;} div.pictureDiv {display:block; width: 600px; background-color: #FFFF99; height: 400px; overflow: auto;} /*]]>*/ </style> </head> <body> <div class="page"> <p>Try these: <a href="javascript:switchid('pictures');">View pictures</a> | <a href="javascript:switchid('video');">View videos</a> | <a href="javascript:switchid('text');">View blog</a> | <a href="javascript:switchid('misc');">Misc</a></p> <div class="tabs"><a href="javascript:switchid('pictures');">View pictures</a></div> <br/> <hr /> <div id='pictures' class="pictureDiv"> <h2>Gallery image viewer:</h2> <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula.</p> <div class="galleryimage"> <div class="img"><a target="_blank" href="index.html"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">This image fails to show when refreshed</div> </div> <!--First thumbnail--> <div class="img"><a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div> </div> <!--Second thumbnail--> <div class="img"><a target="_blank" href="index.html"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div> </div> <!--Third thumbnail--> <div class="img"><a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div> </div> <!--Fourth thumbnail--> </div><!--END galleryimageDiv--> </div><!--END pictureDiv--> <div id='video' class="textDiv"> <h3>Lorem ipsum</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet sapien non felis iaculis scelerisque! Proin sem libero, vehicula sit amet, accumsan vitae, vehicula in, nibh. Donec sed mauris tincidunt nibh euismod molestie. Pellentesque nec odio. Phasellus felis. Quisque massa magna, aliquam mattis, ullamcorper sit amet, molestie sed, felis. Aenean at tellus aliquet tortor consequat commodo. Nulla suscipit ullamcorper risus. Curabitur eleifend orci sed dolor. Phasellus quam. Quisque lectus nulla, porttitor ut, lacinia sit amet, mollis quis; mi. Nulla felis. Nam consequat pretium risus? Nulla facilisi. Aenean scelerisque lectus quis massa? Nulla facilisi. In vulputate pede ut eros. In tortor risus, placerat non, cursus non, feugiat eu; metus?</p> <p>Donec et urna a metus faucibus elementum. Nullam aliquet, urna sit amet fermentum cursus, purus mi viverra mauris, a viverra sapien lectus et velit. Pellentesque massa quam, rutrum fermentum, tempor in, consequat ut, nunc. Pellentesque iaculis dignissim diam! Nam tincidunt pede et libero. Nullam libero mauris, dictum a, tempus eu, cursus nec, ante. Etiam odio urna, pretium at, imperdiet et, ornare at, nisi. Proin consectetuer vehicula lacus? Mauris nisl felis, interdum id, molestie vel, semper nec, nisi! Duis et est volutpat augue volutpat molestie? Aliquam fermentum laoreet nisl. Nam iaculis. Fusce eget diam eget ligula pretium aliquet. Suspendisse fringilla fringilla massa. Donec accumsan luctus dolor. Integer consequat commodo sem. Phasellus libero odio; mattis convallis, tristique eget, venenatis vel, nisi. Vestibulum vel dui quis urna elementum vehicula. Fusce mattis accumsan dolor! Aliquam a tortor.</p> <p>Nunc vitae felis eu odio sodales sollicitudin. Vivamus volutpat lobortis felis. Vivamus nunc! Suspendisse non lacus. Sed consequat nisl varius augue? Nunc ante diam, varius ut, pulvinar ut, semper id, ligula? Aliquam erat volutpat. Integer iaculis pede in sapien. Pellentesque augue. Etiam nec velit nec turpis commodo sodales. Donec vel odio. Nam aliquam turpis non nibh bibendum congue. Nam eleifend justo dapibus nisl. Pellentesque laoreet, leo nec placerat ultrices, nunc arcu placerat ante; pulvinar pellentesque tellus diam quis libero! Quisque eu sem quis nisl gravida sagittis. Etiam ligula purus, tincidunt ut, vulputate eget, posuere eu, tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> </div><!--END textDiv--> <br/> <hr /> <div id='text' class="textDiv"> <h3>This content is for text</h3> <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula.</p> </div><!--END textDiv--> <div id='misc' class="miscDiv"> <h3>This content is for misc text</h3> <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula.</p> </div><!--END miscDiv--> </div><!--END page--> <p> <a href="http://jigsaw.w3.org/css-validator/" target="_blank"><img style="border:0; width:88px; height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a> <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p> <div/> </body> </html> it can be viewed again using the link supplied above. Quote Link to comment https://forums.phpfreaks.com/topic/102884-solved-document-type-definition/#findComment-527067 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.