• Demos
  • Tools
  • Nothing
  • Still nothing
  • Made in Denmark Fusce fringilla egestas. Aliquam convallis risus. e-mail Best viewed in a browser!
  • Emulating XHTML 2.0 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae nisl. Phasellus tincidunt. Phasellus semper mollis leo. Ut id sem. Nunc rutrum, neque a viverra interdum, quam nisi aliquam mauris, eu pretium turpis magna elementum lectus. Etiam eget urna. Donec aliquet lacus eu diam. Sed sodales enim sit amet nunc. Nullam volutpat, ante id accumsan posuere, elit nisi dapibus nisl, non luctus sapien lectus eu arcu.
    This is not (quite) HTML... This is an <l> (line) element. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae eros. Pellentesque varius aliquet mi. Donec et lacus nec tortor blandit lobortis. Vivamus non velit. Duis lacinia nisl sit amet orci vulputate mollis. Quisque ut sem. Nullam id orci sit amet turpis accumsan tempus. Donec nulla mauris, molestie pharetra, tincidunt ut, vulputate vitae, leo. ...but (more or less) XML Aenean imperdiet nulla et lectus. Mauris adipiscing, justo eget pharetra eleifend, nulla tortor varius orci.Ac elementum sapien est aliquam arcu. Ut euismod metus in lectus.
    Works only in Gecko & Opera SantaHappy Christmas, New Year and all that stuff!The text in italic should not be visible... but as you're reading it, it probably is! Fusce non lacus. Maecenas dictum, metus at ultricies cursus, felis elit pretium dolor, in consequat nunc lectus sed est. Fusce eu nisl non quam dapibus ultricies. Integer interdum varius lacus. Suspendisse mollis molestie elit. Phasellus pulvinar fermentum dui. Vivamus a metus id eros varius mollis. Curabitur hendrerit dui ac tellus. Pellentesque varius aliquet mi. Donec et lacus nec tortor blandit lobortis. Vivamus non velit. Duis lacinia nisl sit amet orci vulputate mollis. Quisque ut sem.
    News Aliquam erat volutpat fermentum. Curabitur hendrerit dui ac tellus.Read more... Fusce fringilla egestas arcu. Aliquam convallis aliquet risus.Read more... Etiam eget urna. Donec aliquet lacus eu diam. Sed sodales enim sit amet nunc.Read more... Duis lacinia nisl sit amet orci vulputate mollis.Read more... Donec vitae nisl. Phasellus tincidunt. Phasellus semper mollis leo.Read more...
    Bottom What?You really scrolled all the way down? OK!You may go back to the top.
    Source
    "HTML" code: <!DOCTYPE HTML> <!-- ensures Standard Mode! --> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/> <title>XHTML 2.0 preview</title> <link rel="shortcut icon" href="/favicon.ico"/> <link type="text/css" rel="stylesheet" href="./invalid.css"/> <style type="text/css"> @import "syntaxHighlight.css"; @import "invalidPreWrapHack.css"; </style> </head> <body> <h id="logo">XHTML 2.0 demo</h> <nl> <label>Menu</label> <li><a href="./">Demos</a></li> <li><a href="../webdesign.html">Tools</a></li> <li><a href="#">Nothing</a></li> <li><a href="#">Still nothing</a></li> <label>Info</label> <li> <para>Made in Denmark</para><!-- <p> breaks the layout. Replaced by <para>! --> <para>Fusce fringilla egestas. Aliquam convallis risus.</para> <para><a href="mailto:somebody@somewhere">e-mail</a></para> <para>Best viewed in a browser!</para> </li> </nl> <section id="main"> <h>Emulating XHTML 2.0</h> <para> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae nisl. Phasellus tincidunt. Phasellus semper mollis leo. Ut id sem. Nunc rutrum, neque a viverra interdum, quam nisi aliquam mauris, eu pretium turpis magna elementum lectus. Etiam eget urna. Donec aliquet lacus eu diam. Sed sodales enim sit amet nunc. Nullam volutpat, ante id accumsan posuere, elit nisi dapibus nisl, non luctus sapien lectus eu arcu. </para> <section class="sub"> <h>This is not (quite) HTML...</h> <para> <l>This is an <l> (line) element.</l> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae eros. Pellentesque varius aliquet mi. Donec et lacus nec tortor blandit lobortis. Vivamus non velit. Duis lacinia nisl sit amet orci vulputate mollis. Quisque ut sem. Nullam id orci sit amet turpis accumsan tempus. Donec nulla mauris, molestie pharetra, tincidunt ut, vulputate vitae, leo. </para> <separator></separator><!-- Fallback! <separator/> won't work in Opera --> <h>...but (more or less) XML</h> <para> Aenean imperdiet nulla et lectus. Mauris adipiscing, justo eget pharetra eleifend, nulla tortor varius orci.<l>Ac elementum sapien est aliquam arcu.</l> Ut euismod metus in lectus. </para> </section> <h href="http://www.opera.com" title="[ HREF test... ]">Works only in Gecko & Opera</h> <!-- href still only works on <a>! --> <para> <img src="dims.jpg" alt="Santa" title="Mean Santa!"><l>Happy Christmas, New Year and all that stuff!</l><l>The text in italic should not be visible... but as you're reading it, it probably is!</l> </img><!-- doesn't work! Text should not be visible when the image is...--> Fusce non lacus. Maecenas dictum, metus at ultricies cursus, felis elit pretium dolor, in consequat nunc lectus sed est. Fusce eu nisl non quam dapibus ultricies. Integer interdum varius lacus. Suspendisse mollis molestie elit. Phasellus pulvinar fermentum dui. Vivamus a metus id eros varius mollis. Curabitur hendrerit dui ac tellus. Pellentesque varius aliquet mi. Donec et lacus nec tortor blandit lobortis. Vivamus non velit. Duis lacinia nisl sit amet orci vulputate mollis. Quisque ut sem.</para> </section> <section id="new"> <h>News</h> <para><h>Aliquam</h> erat volutpat fermentum. Curabitur hendrerit dui ac tellus.<l><a href="#">Read more...</a></l></para> <para><h>Fusce</h> fringilla egestas arcu. Aliquam convallis aliquet risus.<l><a href="#">Read more...</a></l></para> <para><h>Etiam eget urna.</h> Donec aliquet lacus eu diam. Sed sodales enim sit amet nunc.<l><a href="#">Read more...</a></l></para> <para><h>Duis lacinia</h> nisl sit amet orci vulputate mollis.<l><a href="#">Read more...</a></l></para> <para><h>Donec</h> vitae nisl. Phasellus tincidunt. Phasellus semper mollis leo.<l><a href="#">Read more...</a></l></para> </section> <section id="lol"> <h>Bottom</h> <para><h>What?</h>You really scrolled all the way down?</para> <para><h>OK!</h>You may go back to the <a href="#logo">top</a>.</para> </section> <section id="source"> <h>Source</h> <separator></separator> <section id="markup"> <h>"HTML" code:</h> <para class="code"> <?php include("./fixCode.php"); include("./syntaxHighlight.php"); $htmlfile = join ("", file ("./invalid.html")); $sc = new sourcecode; echo $sc->html($htmlfile); ?> </para> </section> <separator></separator> <section id="CSS"> <h>CSS code:</h> <para class="code"> <?php $htmlfile = join ("", file ("./invalid.css")); $sc = new sourcecode; echo $sc->html($htmlfile); ?> </para> </section> </section> </body> </html>
    CSS code: * { padding:0; margin:0; border-style:none;} *[href] { set-link-source: attr(href); -use-link-source: current; -moz-binding:url(htmlBindings.xml#link); } html { border:6px #a9bd25 double; padding:0; margin:1em; background:white url(tuxfili.jpg) fixed; color:black; font-family:verdana, arial, helvetica, sans-serif; } body { position:relative; padding:1em; border:solid 2px #a9bd25; margin:3em 6em 3em 3em; background:white url(./banner4.jpg) left top repeat-x; color:black; font-size:.9em; } para /* <p> replaced by <para> */ { display:block; padding:.3em; } nl /*{ display:block; position:absolute; right:-70px; top:73px; width:140px; height:400px; border:solid 2px #a9bd25; background:white; color:black; font-size:.9em; }*/ { display:block; position:fixed; right:40px; top:110px; z-index:20; width:140px; border:solid 2px #a9bd25; background:white; color:black; font-size:.9em; } label { display:list-item; list-style:none; height:16px; padding:2px 10px 7px; background:#e0eb97; color:black; text-align:center; font-size:1.1em; font-weight:bold; } label a { background-color:inherit; color:black; text-decoration:none; } label a:hover, #new l a:hover, nl li>para a:hover, #lol para a:hover { background-color:inherit; color:red; } nl li { margin:0; display:list-item; padding:0; list-style:none; } nl li>a { display:block; width:125px; height:23px; padding-top:3px; padding-left:15px; border-bottom:solid 1px #d2e26a; background:white; color:black; text-decoration:none; } nl li>a:hover { background:#f6f9e1 /* url(banner4.jpg) no-repeat */; color:black; } nl li>para { padding:.5em 1em; font-size:.8em; } section { display:block; padding:.5em 4em .5em .5em; margin:.5em; } section section { margin-left:1.5em; font-size:.85em;} section section para { } h { display:block; margin:.5em 0; font-weight:bold; font-size:1.3em; text-align:center; clear:both; } h#logo { padding:0; margin:0 0 1em; background:transparent !important; color:white; font-size:2.5em; font-style:normal; } section h { text-align:left; background:none; } section h[href] { text-decoration:underline; width:20em; } section h[href]:hover { background-color:inherit; color:red; cursor:pointer; } l { display:block; padding-left:1.2em; font-style:italic; } #new l { text-indent:0; } separator { display:block; /*width:85%; */margin:1em auto; border-bottom:solid 1px; } section section>separator { width:15em; border-bottom:double; } img { margin:0 2em 0 1em; padding:0; float:right; } .code { font-size:.85em; } pre { width:90%; overflow:auto; padding:0; margin:auto } section#new { display:block; position:absolute; right:-70px; top:380px; width:140px; padding:0 0 1em; border:solid 2px #a9bd25; margin:0; background:white; color:black; font-size:.8em; } section#lol { display:block; position:absolute; right:-70px; bottom:-25px; height:150px /*top:4000px*/; width:140px; padding:0 0 1em; border:solid 2px #a9bd25; margin:0; background:white; color:black; font-size:.8em; } #new>h, #lol>h { height:16px; padding:4px 10px 7px; margin:0; background:#e0eb97; color:black; text-align:center; font-size:1.2em; } #new para>h, #lol para>h { font-size:1.2em; margin:3px 0; } #new para, #lol para { padding:.5em 1em; font-size:.9em; } #source>h { text-align:center; } #source section h { text-align:left; } #source para { font-style:normal; }