homepage Welcome to WebmasterWorld Guest from 54.211.219.20
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

    
The Bare Essentials
CSS and raw HTML, is it possible?
pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 35 posted 6:58 pm on Mar 1, 2006 (gmt 0)

I've been bench testing a copy of FrontPage Express which was released with IE4 as a WYSIWYG editor for the browser. It is a stand alone application and acts as a quick page editor allowing you to edit from any IE4+ browser with FP Express installed. During it's time, it was light years ahead of others in the same category. The code that is generated by FrontPage Express is pure HTML, no bloat, no nothing.

So, I got to thinking, is it possible in today's CSS environment to build a page without using any containing divs (or tables), classes, ids, inline styles and/or embedded styles? I want to style the raw HTML elements (using an external style sheet) while producing a visually appealing website?

I smell a competition brewing...

You're probably asking why I didn't post this in the CSS Forum? I have my motives, once we get into discussion about how to do something like this, I will reveal the Why? Come along for the ride, I think it will be quite interesting. :)

 

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 35 posted 7:11 pm on Mar 1, 2006 (gmt 0)

Are we getting this to work in IE6 and under? No classes or ids means that selecting the right element is painful without advanced selectors.

Also, want to provide sample HTML? :)

Scruffy

5+ Year Member



 
Msg#: 35 posted 7:14 pm on Mar 1, 2006 (gmt 0)

Sounds like you may as well go to XML.

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 35 posted 7:25 pm on Mar 1, 2006 (gmt 0)

Are we getting this to work in IE6 and under? No classes or ids means that selecting the right element is painful without advanced selectors.

No, we're going to be looking at this as designing for the masses (IE5/IE6/Moz/Opera) but also with a graceful degradation of content for those using assistive technologies.

Sounds like you may as well go to XML.

I'd rather it be as simple as possible. No high tech stuff. Just pure HTML using an external style sheet working with your core HTML elements not using any containing divs. Is that possible?

Scruffy

5+ Year Member



 
Msg#: 35 posted 7:45 pm on Mar 1, 2006 (gmt 0)

Well, to be honest, XML is actually simpler than HTML.
Nothing is predefined, no H1, H2, P, DIV etc.
You just use your own tag names then define what they mean in CSS.

encyclo

WebmasterWorld Senior Member encyclo us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 35 posted 7:58 pm on Mar 1, 2006 (gmt 0)

It can be done (big hint, you can nest a lot within definition lists or ordered/unordered lists), but there is a risk of damaging accessibility by abusing semantics rather than using a
div. A span however is rarely necessary, it is almost always possible to use a more semantic element instead.

Aren't you supposed to use Inverted Pyramid Writing [webmasterworld.com] and let us in on the secret from the start, p1r? ;)

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 35 posted 8:29 pm on Mar 1, 2006 (gmt 0)

Here are the elements that we have to work with listed in alphabetical order. I've purposely removed <div>, <table> and other associated elements.

A, ABBR, ACRONYM, ADDRESS, AREA, B, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CITE, CODE, DD, DFN, DL, DT, EM, FIELDSET, FORM, H1, HEAD, HR, HTML, IMG, INPUT, KBD, LABEL, LI, LINK, MAP, META, OL, OPTGROUP, OPTION, P, PARAM, PRE, Q, SAMP, SELECT, SPAN, STRONG, SUB, SUP, TEXTAREA, TITLE, TT, UL, VAR

And here are the attributes that we can use on those elements in alphabetical order. I've purposely removed class, id, and other related attributes...

abbr, accesskey, alt, dir, for, hreflang, label, lang, longdesc, summary, tabindex, title, usemap

Aren't you supposed to use Inverted Pyramid Writing and let us in on the secret from the start, p1r? ;)

That takes all the fun out of it!

The question remains, can it be done? Do we have to have <div> and <table> to make it all work? Or can it be done without any containing elements? Can we style our block level elements in a way that allows us to provide a structured web page that many would think was built using tables and/or divs?

[edited by: pageoneresults at 9:06 pm (utc) on Mar. 1, 2006]

bedlam

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 35 posted 9:01 pm on Mar 1, 2006 (gmt 0)

...is it possible in today's CSS environment to build a page without using any containing divs (or tables), classes, ids, inline styles and/or embedded styles?

Or can it be done without any containing elements? Can we style our block level elements in a way that allows us to provide a structured web page that many would think was built using tables and/or divs?

Without the first restriction, I would have said "yes, relatively easily." With the first restriction my response is "doubtful"--especially if we're dealing with current levels of css support.

If we can't use id attributes and we can't use containers such as div elements, then we're deprived of most of the use of one of the most all-around useful widgets in the css toolbox--specificity.

It doesn't seem practical, unless what's being hinted at (Encyclo!) is just to use lists as overall containers; and if that is what's being suggested, it sounds like replacing one kluge with another...

Am I missing some obvious point?

-b

PS: it occurs to me that this might be a rather fun experiment to use the javascript dom for: you could create a page with dead simple markup--though ideally with a few id attributes--and use the dom to create a structured page around the content. Of course if you were going to go to all that work anyhow, then it'd probably be just as convenient to go from xml->html via xslt...

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 35 posted 11:04 pm on Mar 1, 2006 (gmt 0)

Without classes and ids, and with it having to work in IE, then you're limited to three selectors: universal, element, and descendant. That's a pretty serious challenge!

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 35 posted 11:11 pm on Mar 1, 2006 (gmt 0)

That's a pretty serious challenge!

If it can't be done, that's fine. We'll add those into the mix.

But, let's just say that a user doesn't have access to create and style using divs, tables, classes, ids, etc. Let's just say they only have The Bare Essentials. Sort of like a Webmaster Survival Kit and someone ate all the divs and tables and left you with the above. Could a visually appealing, accessible and usable website be developed under those conditions? It appears that so far the majority says no. We need the divs. We need the classes. And we need the ids. We could do without the tables. Is that the general concensus?

bedlam

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 35 posted 11:26 pm on Mar 1, 2006 (gmt 0)

With id and class selectors available? Yes, sure. It'd be harder without the containers, but by no means impossible.

-b

bedlam

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 35 posted 12:27 am on Mar 2, 2006 (gmt 0)

A starting point in case anyone wants to play. Rough and kind of rushed, but satisfies the criteria I think ;-)

<!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>Minima!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding:0;
margin:0;
}

body {
background:#efefef;
font-family:georgia,palatino,"times new roman",serif;
color:#003;
padding:0 5%;
}

h1 {
background:#e0e0e0;
color:#003;
font-weight:normal;
padding:1em .5em;
}

p {
width:81%;
float:left;
text-align:left;
padding:0 1%;
margin:0 2% .75em 0;
}

a { color:#009; }

address {
width:100%;
float:left;
font-size:85%;
text-align:center;
font-style:normal;
}

#main_navigation,
#footer_navigation {
background:#d0d0d0;
clear:both;
text-align:center;
padding:.5em 0;
margin-bottom:1em;
}

#main_navigation li,
#footer_navigation li {
display:inline;
padding:.25em .75em;
}

#secondary_navigation {
list-style-type:none;
width:15%;
float:right;
}

#secondary_navigation li a {
display:block;
text-align:right;
text-decoration:none;
font-weight:bold;
border:1px solid #e0e0e0;
padding:.25em;
}

#secondary_navigation li a:hover,
#secondary_navigation li a:active {
text-decoration:underline;
border:1px solid #777;
}

#footer_navigation {
float:left;
width:100%;
margin-top:2em;
}
</style>
</head>

<body>
<h1>Lorem ipsum dolor sit amet consectetur</h1>
<ul id="main_navigation">
<li><a href="#">Praesent lobortis</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Suspendisse diam</a></li>
</ul>

<ul id="secondary_navigation">
<li><a href="#">Curabitur condimentum</a></li>
<li><a href="#">In convallis</a></li>
<li><a href="#">Vestibulum</a></li>
<li><a href="#">Morbi ornare</a></li>
<li><a href="#">Nam eleifend</a></li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse feugiat enim mollis nisi. Pellentesque auctor diam ut justo. In faucibus, orci nec condimentum venenatis, orci pede dignissim diam, sit amet rutrum mi nisi eget pede. Integer imperdiet, sapien molestie tristique iaculis, nisl arcu suscipit felis, nec aliquet orci dolor a neque.</p>

<p>Nam eleifend mi at lorem.</p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse nonummy orci in urna. Aenean tristique elit sed purus. Duis ultricies diam et neque auctor laoreet.</p>

<p>Curabitur condimentum mauris vitae ligula. Vestibulum dictum rutrum nulla. Etiam euismod libero eu erat. Nulla tellus velit, nonummy ut, tristique at, volutpat quis, nibh. Etiam pulvinar, augue vitae dignissim pretium, nisl augue gravida purus, id malesuada lectus mi quis mauris.</p>

<ul id="footer_navigation">
<li><a href="#">Nulla</a></li>
<li><a href="#">Vestibulum</a></li>
<li><a href="#">Phasellus</a></li>
</ul>

<address>
Pellentesque pretium lacus<br />
ornare lorem<br />
Vestibulum<br />
<a href="mailto:nascetur@dapibus.rem">nascetur@dapibus.rem</a>
</address>

</body>
</html>

-b

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 35 posted 12:56 am on Mar 2, 2006 (gmt 0)

Nice starting point! One bug so far, the copy jumps on link hover in the secondary navigation when viewing in IE6.

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 35 posted 3:04 am on Mar 2, 2006 (gmt 0)

Plus, it is using IDs ...

without using any containing divs (or tables), classes, ids, inline styles

I don't know why you would want to eliminate tables and divs. There are perfectly valid uses for them. Perhaps limit to say that they cannot be used as a pure layout/wrapper. But saying that you cannot use them at all?

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 35 posted 3:09 am on Mar 2, 2006 (gmt 0)

abbr, accesskey, alt, dir, for, hreflang, label, lang, longdesc, summary, tabindex, title, usemap

I also like how <img> is a valid element, but src is not a valid attribute for this exercise ;)

... and <link>, but not <style> ... and not the type attribute.

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 35 posted 5:40 am on Mar 2, 2006 (gmt 0)

CSS2 support is an absolute must for an exercise like this to even be considered. I have, therefore, added a conditional comment to Dean Edwards' IE7 fix [dean.edwards.name]. Without reliable CSS2 selectors, the whole effort of creating a pleasing layout utilizing no wrapper elements quickly becomes silly.

The example below is just a quick first look at what can be done. It's not all that fancy and exciting, perhaps. But it applies simple principles which are applicable regardless of the layout you are seeking after.


CSS:
* {
border: none;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0;
padding: 0;
}
ul {
float: left;
margin-bottom: 1em;
padding-left: 3em;
}
li {
display: block;
float: left;
width: 8em;
}
ul+ul {
background-color: #fff;
float: right;
margin: 0;
padding: 10px;
padding-right: 1px;
padding-top: 0;
}
ul+ul li {
background-color: #fa0;
border-bottom: 1px solid #fff;
color: #300;
float: none;
padding: 5px;
width: auto;
}
ul+ul li::before {
content: ">";
}
ul+ul li a {
color: #300;
}
abbr, acronym {
cursor: help;
}
body {
font: 100%/130% Verdana;
margin: 0 auto;
padding: 10px;
width: 750px;
}
h1 {
background-color: #099;
border: 3px double #fff;
color: #fff;
font-size: 2em;
padding: 0 5px 1px;
}
h1::first-letter {
background-color: #fff;
color: #099;
font: 1.1em 'Times New Roman';
padding: 3px 2px;
}
h1+ul {
padding-left: 1px;
}
h1+ul li {
border-bottom: 1px solid #fa0;
border-left: 5px solid #fa0;
display: block;
float: left;
margin-right: 5px;
padding: 5px;
padding-right: 40px;
width: auto;
}
h1+ul li a {
color: #099;
display: block;
}
h2 {
border-bottom: 2px solid #c00;
clear: left;
color: #c00;
font-size: 1.5em;
}
h3 {
clear: left;
font-size: 1.3em;
}
h1+p, h2+p, h3+p {
text-indent: 3em;
}
h2, h3, p {
margin-bottom: 1em;
}
p {
line-height: 2em;
}
ul+p {
clear: left;
}

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pure HTML</title>
<!--[if lt IE 7]><script src="IE7/ie7-standard-p.js" type="text/javascript"></script><![endif]-->
</head>
<body>

<h1>Pure <acronym title="HyperText Markup Language">HTML</acronym>.</h1>

<ul><li><a href="#intr">Introduction.</a></li><li><a href="#elem">Allowed Elements.</a></li><li><a href="#attr">Allowed Attributes.</a></li><li><a href="#summ">Summary.</a></li></ul>

<ul><li><a href="http://www.webmasterworld.com/">Webmaster World</a></li><li><a href="http://www.webmasterworld.com/forum116/">Accessibility and Usability</a></li><li><a href="http://www.webmasterworld.com/forum83/">CSS</a></li><li><a href="http://www.webmasterworld.com/forum91/">JavaScript and AJAX</a></li><li><a href="http://www.webmasterworld.com/forum9/">Foo</a></li></ul>

<h2>Introduction.</h2>

<p>This is a page which is constructed without using any wrapper elements, such as divs or tables used for layout. The purpose behind this exercise is to determine whether it is possible to construct a page which is both as simple as possible, while at the same time pleasing to the eye. As you can see, the answer is yes!</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse feugiat enim mollis nisi. Pellentesque auctor diam ut justo. In faucibus, orci nec condimentum venenatis, orci pede dignissim diam, sit amet rutrum mi nisi eget pede. Integer imperdiet, sapien molestie tristique iaculis, nisl arcu suscipit felis, nec aliquet orci dolor a neque.</p>

<h2>Allowed Elements.</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse feugiat enim mollis nisi. Pellentesque auctor diam ut justo. In faucibus, orci nec condimentum venenatis, orci pede dignissim diam, sit amet rutrum mi nisi eget pede. Integer imperdiet, sapien molestie tristique iaculis, nisl arcu suscipit felis, nec aliquet orci dolor a neque.</p>

<p>Although I personally find the selection of elements objectionable and lacking, for the purposes of this exercise the allowed elements are limited to the following:</p>

<ul><li><code>A</code></li><li><code>ABBR</code></li>
<li><code>ACRONYM</code></li><li><code>ADDRESS</code></li>
<li><code>AREA</code></li><li><code>B</code></li>
<li><code>BLOCKQUOTE</code></li><li><code>BODY</code></li>
<li><code>BR</code></li><li><code>BUTTON</code></li>
<li><code>CAPTION</code></li><li><code>CITE</code></li>
<li><code>CODE</code></li><li><code>DD</code></li>
<li><code>DFN</code></li><li><code>DL</code></li>
<li><code>DT</code></li><li><code>EM</code></li>
<li><code>FIELDSET</code></li><li><code>FORM</code></li>
<li><code>H1</code></li><li><code>HEAD</code></li>
<li><code>HR</code></li><li><code>HTML</code></li>
<li><code>IMG</code></li><li><code>INPUT</code></li>
<li><code>KBD</code></li><li><code>LABEL</code></li>
<li><code>LI</code></li><li><code>LINK</code></li>
<li><code>MAP</code></li><li><code>META</code></li>
<li><code>OL</code></li><li><code>OPTGROUP</code></li>
<li><code>OPTION</code></li><li><code>P</code></li>
<li><code>PARAM</code></li><li><code>PRE</code></li>
<li><code>Q</code></li><li><code>SAMP</code></li>
<li><code>SELECT</code></li><li><code>SPAN</code></li>
<li><code>STRONG</code></li><li><code>SUB</code></li>
<li><code>SUP</code></li><li><code>TEXTAREA</code></li>
<li><code>TITLE</code></li><li><code>TT</code></li>
<li><code>UL</code></li><li><code>VAR</code></li></ul>

<p>One can, indeed, wonder why the ability to use a table should be prohibited. Yes, I understand that table <em>layouts</em> should not be used, but there are several perfectly valid uses for both tables and other elements not included in the list above (such as <code><abbr title="division">div</abbr></code> and <code>style</code>). Meanwhile, elements like <code>span</code> are allowed.</p>

<h2>Allowed Attributes.</h2>

<p>I object to the selection of attributes in the same manner as I did with the elements, although I find the attribute list much more lacking. There are, for example, no <code>type</code> or <code><abbr title="source">src</abbr></code> attributes. Limiting? Yes. Regardless, for the purposes of this exercise the allowed attributes are limited to the following:</p>

<ul><li><code>abbr</code></li><li><code>accesskey</code></li>
<li><code>alt</code></li><li><code>dir</code></li>
<li><code>for</code></li><li><code>hreflang</code></li>
<li><code>label</code></li><li><code>lang</code></li>
<li><code>longdesc</code></li><li><code>summary</code></li>
<li><code>tabindex</code></li><li><code>title</code></li>
<li><code>usemap</code></li></ul>

<h2>Summary.</h2>

<p>While this is in no way a complete and flawless example of how to power &quot;pure <acronym title="HyperText Markup Language">HTML</acronym>&quot; with <acronym title="Cascading Style Sheets">CSS</acronym> and &mdash;as I mentioned above&mdash;the exercise is too limiting to warrant 100% real-life application, it demonstrates that it <em>is</em> perfectly possible to create nifty layouts using a lot of wrappers and &quot;fluff&quot; elements resulting in code bloat.</p>

<p>I do in no way claim to have created a 100% accessible and usable layout either. In fact, I find the element and attribute selection too limiting to ensure complete accessibility and usability under all circumstances. However, the purpose of this exercise was not related directly to accessibility and usability, although certainly related to it. Instead, the purpose of this demonstration is to show that nice and clean code is not necessarily limiting from a design perspective.</p>

</body>
</html>


So, is it worth it? Not really. Wrapper elements and "sectioning" of a page is not always bad. In fact, by not using wrapper elements the CSS itself gets bloated. So, I guess it is a question of whether you would rather live with bloated CSS or bloated HTML. One could argue that since the external stylesheet is cached that you actually save bandwidth. While this is absolutely true, the "HTML bloat" caused by a few extra elements is so small it can be ignored. Especially considering how quickly the bloated CSS becomes difficult to manage, maintain, and update. Although this is a very simple example, the stylesheet above is quite crazy. Lots of re-defining of various styles. In my opinion, the disallowance of IDs itself makes the exercise ridiculous. It also makes in-page navigation difficult.

[edited by: encyclo at 9:07 am (utc) on Mar. 2, 2006]

SonjaD

5+ Year Member



 
Msg#: 35 posted 3:59 pm on Mar 13, 2006 (gmt 0)

<html>
<head>
<title></title>
<style>
body {
background-color: #FFDEF7;
border: 0.1em dashed red;
margin: 0;
margin-top: 2em;
}
* {
padding : 0;
font-family : verdana;
text-align: left;
line-height: 1.3em;
}
li {
list-style-type : none;

}
ol {
float: left;
border: 0.2em dashed #F00;
margin : 1em;
padding: 1em;
display : block;
width: 10em;
background-color: #FFFFFF;
}

ul {
float: right;
border: 0.1em dashed #F00;
margin : 1em;
padding: 0.5em;
padding-right: 0;
display : block;
width: 12em;
background-color : #FFABC4;
}

ol ul {
width: 5em;
padding-left: 0em;
margin : 0;
border: 0;
background-color: #fff;
}

ul ul {
margin-left: 1em;
border: 0;
background-color: #FFABC4;
}

ul ul li {
float: left;
display: block;
width: 5em;
}

code {
text-transform : uppercase;
}
p::first-letter {
color : red;
font-weight: bold;
font-size: 2em;
}

p {
padding-left: 1em;
font-size: 0.9em;
width : 40em;
line-height: 1.5em;
}

h1 {
padding-left: 1em;
color : red;
display : block;
border-bottom: 0.1em dashed red;
}
h2 {
padding-left: 1em;
color : red;
display : block;
border-bottom: 0.1em dashed red;
}

h3 {
padding-left: 1em;
display: inline;
color :red;
}

</style>
</head>
<body>
<ol>
<li><a href='#'>Menu 1</a><br/>
<ul>
<li><a href='#'>Top</a></li>
<li><a href='#'>Middle</a></li>
<li><a href='#'>Left</a></li>
<li><a href='#'>Right</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a><br/>
<ul>
<li><a href='#'>Top</a></li>
<li><a href='#'>Middle</a></li>
<li><a href='#'>Left</a></li>
<li><a href='#'>Right</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a><br/>
<ul>
<li><a href='#'>Top</a></li>
<li><a href='#'>Middle</a></li>
<li><a href='#'>Left</a></li>
<li><a href='#'>Right</a></li>
</ul>
</li>
</ol>
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur dapibus orci eget mi. Aenean sed ante in pede aliquam venenatis. Nam mattis fermentum eros. Nunc pellentesque. Sed interdum, nunc id lobortis accumsan, dolor elit auctor mauris, quis hendrerit nunc velit sit amet dui. Phasellus a ante sit amet metus vestibulum molestie. Fusce ornare mattis nulla. Curabitur eget turpis id velit iaculis cursus. Fusce in risus. Donec et mauris eu pede aliquet vulputate. Fusce sed nulla.
</p>
<p>
Sed nec lorem. Maecenas eu arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dui. Sed neque lectus, ultrices eu, tempus eget, gravida vitae, pede. Aliquam et arcu. Ut sed ligula pulvinar nisl varius venenatis. Aliquam sed felis nec lorem viverra rhoncus. Mauris ac neque sed pede malesuada consectetuer. Etiam auctor pellentesque felis. Aenean nisi. Fusce arcu risus, auctor eu, dignissim egestas, luctus ut, magna. Aenean condimentum felis a augue. Vestibulum tincidunt vestibulum nibh. Etiam id ante in dui ultrices tristique. Suspendisse potenti.
</p>
<ul>
<li><h3>Used elements</h3><br/>
<ul>
<li><code>html</code></li>
<li><code>head</code></li>
<li><code>title</code></li>
<li><code>body</code></li>
<li><code>ol</code></li>
<li><code>ul</code></li>
<li><code>li</code></li>
<li><code>br</code></li>
<li><code>h1</code></li>
<li><code>h2</code></li>
<li><code>h3</code></li>
<li><code>p</code></li>
<li><code>code</code></li>

</ul>
</li>
<li><h3>Used attributes</h3><br/>
<ul>
<li><code>href</code></li>
</ul>
</li>
</ul>
<h2>Curabitur sapien</h2>
<p>
Curabitur sapien enim, mattis ultricies, adipiscing a, commodo a, sem. Nam facilisis scelerisque leo. Quisque faucibus justo sit amet libero. Aliquam erat volutpat. Ut ac purus. Nunc mi nisl, consectetuer sit amet, tempus ac, rutrum et, lectus. Ut sollicitudin pede. Quisque lorem sapien, sagittis eu, euismod sed, tincidunt ut, mauris. Nulla vel lacus quis ante ornare faucibus. Vivamus nisl. In varius varius risus. Mauris ornare augue lacinia odio. Ut rhoncus, odio eget dictum pellentesque, turpis risus scelerisque nisi, at iaculis justo tortor quis nibh. Nunc molestie dictum nisl. Maecenas pretium. Aenean semper, ligula vel luctus tincidunt, ligula purus pulvinar lectus, non lobortis lectus nisl vitae arcu. Aenean vehicula lorem sit amet lacus. Donec imperdiet augue eget nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur a ante consectetuer lectus hendrerit adipiscing.
</p>
<p>
Aliquam facilisis tortor id tortor. Sed at nisi. Phasellus porttitor posuere velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Sed tincidunt, mauris in luctus lobortis, eros risus accumsan risus, id eleifend diam tellus quis pede. Suspendisse lobortis, mi at feugiat hendrerit, turpis sem ullamcorper mauris, et tempus dui neque sit amet lorem. Aenean vitae purus eget nibh volutpat dapibus. Nunc at libero nec neque vehicula eleifend. Sed fermentum lorem et mi.
</p>
<p>
Sed sed nibh nec mi molestie pretium. Sed enim urna, sodales eget, pharetra vitae, ultrices in, massa. Sed turpis metus, tincidunt eu, varius at, sagittis sit amet, ligula. Sed id justo fermentum magna nonummy mollis. Suspendisse potenti. Nunc vel ante sed ligula tempus aliquet. Nulla convallis dignissim neque. Nulla molestie, purus vel lacinia convallis, elit est commodo nibh, eget vulputate turpis elit vitae ipsum. Maecenas laoreet. Aenean eros. Maecenas tellus turpis, malesuada sit amet, vestibulum nec, sodales vestibulum, elit.
</p>

</body>
</html>

The point of this excersize is beyond me, but I gave it a try. I'm not sure why the main colour here is pink, but at least it shows you can do some nifty right or left aligned menu's as well. I was tempted to add a heart shaped menu item with css (image as list-style-type) but I let that go. Other than that, every item could have images attached that way, allowing for an even richer page.

I really am wondering in which situation this would apply. Even chtml allows for more elements.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved