This is some lettuce. The photo has the imgborder attribute, so it has a nice border and padding around the image, to give it a professional image look. The size of the padding is fixed, as is the border color.
This is the main body area. If this is the single column template, this is the only body area (there is no border_content column). Also, if this is the single column template, the "location" is present above the body area. This is added to help visitors deal with the lack of navigation in such a site. The breadcrumb menu doesn't appear on the site's home page, though. If the current page were "Knowledge Base," the Knowledge Base entry in the black navigation bar would be orange.
image w/text
This is a Frame 1 in the body area with Statement paragraph style. The Frame1 doesn't work very well when border_content is present. In this example, it has the potential to really mess up the 2-column contents that follow. Authors would need to be trained on what combinations are not recommended.
Curabitur adipiscing accumsan lorem at euismod. Quisque felis lorem, accumsan nec congue non, convallis id turpis. Fusce elementum mollis lectus, at tempus libero molestie vel. Sed at sagittis mauris. Vivamus posuere aliquam magna, vitae aliquam dolor porttitor in. Fusce ipsum turpis, pulvinar eget bibendum sit amet, blandit non leo. Mauris vel lacinia ipsum. Pellentesque purus nisl, condimentum non sodales vel, tristique at magna.
Sed aliquet porttitor leo, vel suscipit lacus mollis accumsan. Nulla euismod nibh quis ante ullamcorper eget suscipit justo imperdiet. Integer est arcu, accumsan mollis fermentum nec, congue non dui. Nullam accumsan arcu a arcu vulputate tristique. Proin quis sollicitudin mauris. Nullam commodo, dolor eget ultrices laoreet, massa libero suscipit ante, eget cursus nulla quam id odio. Curabitur adipiscing accumsan lorem at euismod. Quisque felis lorem, accumsan nec congue non, convallis id turpis. Fusce elementum mollis lectus, at tempus libero molestie vel. Sed at sagittis mauris. Vivamus posuere aliquam magna, vitae aliquam dolor porttitor in. Fusce ipsum turpis, pulvinar eget bibendum sit amet, blandit non leo. Mauris vel lacinia ipsum. Pellentesque purus nisl, condimentum non sodales vel, tristique at magna.
Sed aliquet porttitor leo, vel suscipit lacus mollis accumsan. Nulla euismod nibh quis ante ullamcorper eget suscipit justo imperdiet. Integer est arcu, accumsan mollis fermentum nec, congue non dui. Nullam accumsan arcu a arcu vulputate tristique. Proin quis sollicitudin mauris. Nullam commodo, dolor eget ultrices laoreet, massa libero suscipit ante, eget cursus nulla quam id odio. Curabitur adipiscing accumsan lorem at euismod. Quisque felis lorem, accumsan nec congue non, convallis id turpis. Fusce elementum mollis lectus, at tempus libero molestie vel. Sed at sagittis mauris. Vivamus posuere aliquam magna, vitae aliquam dolor porttitor in. Fusce ipsum turpis, pulvinar eget bibendum sit amet, blandit non leo. Mauris vel lacinia ipsum. Pellentesque purus nisl, condimentum non sodales vel, tristique at magna.
The heading is not required for two-column layout, however. Sed aliquet porttitor leo, vel suscipit lacus mollis accumsan. Nulla euismod nibh quis ante ullamcorper eget suscipit justo imperdiet. Integer est arcu, accumsan mollis fermentum nec, congue non dui. Nullam accumsan arcu a arcu vulputate tristique. Proin quis sollicitudin mauris. Nullam commodo, dolor eget ultrices laoreet, massa libero suscipit ante, eget cursus nulla quam id odio. Curabitur adipiscing accumsan lorem at euismod. Quisque felis lorem, accumsan nec congue non, convallis id turpis. Fusce elementum mollis lectus, at tempus libero molestie vel. Sed at sagittis mauris. Vivamus posuere aliquam magna, vitae aliquam dolor porttitor in. Fusce ipsum turpis, pulvinar eget bibendum sit amet, blandit non leo. Mauris vel lacinia ipsum. Pellentesque purus nisl, condimentum non sodales vel, tristique at magna.
Sed aliquet porttitor leo, vel suscipit lacus mollis accumsan. Nulla euismod nibh quis ante ullamcorper eget suscipit justo imperdiet. Integer est arcu, accumsan mollis fermentum nec, congue non dui. Nullam accumsan arcu a arcu vulputate tristique. Proin quis sollicitudin mauris. Nullam commodo, dolor eget ultrices laoreet, massa libero suscipit ante, eget cursus nulla quam id odio. Curabitur adipiscing accumsan lorem at euismod. Quisque felis lorem, accumsan nec congue non, convallis id turpis. Fusce elementum mollis lectus, at tempus libero molestie vel. Sed at sagittis mauris. Vivamus posuere aliquam magna, vitae aliquam dolor porttitor in. Fusce ipsum turpis, pulvinar eget bibendum sit amet, blandit non leo. Mauris vel lacinia ipsum. Pellentesque purus nisl, condimentum non sodales vel, tristique at magna.
Sed aliquet porttitor leo, vel suscipit lacus mollis accumsan. Nulla euismod nibh quis ante ullamcorper eget suscipit justo imperdiet. Integer est arcu, accumsan mollis fermentum nec, congue non dui. Nullam accumsan arcu a arcu vulputate tristique. Proin quis sollicitudin mauris. Nullam commodo, dolor eget ultrices laoreet, massa libero suscipit ante, eget cursus nulla quam id odio. Curabitur adipiscing accumsan lorem at euismod. Quisque felis lorem, accumsan nec congue non, convallis id turpis. Fusce elementum mollis lectus, at tempus libero molestie vel. Sed at sagittis mauris. Vivamus posuere aliquam magna, vitae aliquam dolor porttitor in. Fusce ipsum turpis, pulvinar eget bibendum sit amet, blandit non leo. Mauris vel lacinia ipsum. Pellentesque purus nisl, condimentum non sodales vel, tristique at magna.
Concert date 12/12/2009
Buy tickets at the Union Ticketmaster office starting Tuesday Frame 1 in normal body column
Curabitur adipiscing accumsan lorem at euismod. Quisque felis lorem, accumsan nec congue non, convallis id turpis. Fusce elementum mollis lectus, at tempus libero molestie vel. Sed at sagittis mauris. Vivamus posuere aliquam magna, vitae aliquam dolor porttitor in. Fusce ipsum turpis, pulvinar eget bibendum sit amet, blandit non leo. Mauris vel lacinia ipsum. Pellentesque purus nisl, condimentum non sodales vel, tristique at magna.
Sed aliquet porttitor leo, vel suscipit lacus mollis accumsan. Nulla euismod nibh quis ante ullamcorper eget suscipit justo imperdiet. Integer est arcu, accumsan mollis fermentum nec, congue non dui. Nullam accumsan arcu a arcu vulputate tristique. Proin quis sollicitudin mauris. Nullam commodo, dolor eget ultrices laoreet, massa libero suscipit ante, eget cursus nulla quam id odio. Curabitur adipiscing accumsan lorem at euismod. Quisque felis lorem, accumsan nec congue non, convallis id turpis. Fusce elementum mollis lectus, at tempus libero molestie vel. Sed at sagittis mauris. Vivamus posuere aliquam magna, vitae aliquam dolor porttitor in. Fusce ipsum turpis, pulvinar eget bibendum sit amet, blandit non leo. Mauris vel lacinia ipsum. Pellentesque purus nisl, condimentum non sodales vel, tristique at magna.
Sed aliquet porttitor leo, vel suscipit lacus mollis accumsan. Nulla euismod nibh quis ante ullamcorper eget suscipit justo imperdiet. Integer est arcu, accumsan mollis fermentum nec, congue non dui. Nullam accumsan arcu a arcu vulputate tristique. Proin quis sollicitudin mauris. Nullam commodo, dolor eget ultrices laoreet, massa libero suscipit ante, eget cursus nulla quam id odio. Curabitur adipiscing accumsan lorem at euismod. Quisque felis lorem, accumsan nec congue non, convallis id turpis. Fusce elementum mollis lectus, at tempus libero molestie vel. Sed at sagittis mauris. Vivamus posuere aliquam magna, vitae aliquam dolor porttitor in. Fusce ipsum turpis, pulvinar eget bibendum sit amet, blandit non leo. Mauris vel lacinia ipsum. Pellentesque purus nisl, condimentum non sodales vel, tristique at magna.
ERROR: Content Element with uid "164000" and type "media" has no rendering definition!
These examples are terrible because they contain fake data, but the styles should still be apparent. The table headings are purposefully made a color other than black is to make it apparent when the semantic heading is used as opposed to just bolding text. This isn't required, of course, but is a reasonable way of "rewarding" authors who do things the right way.
asdf | asdfasdf | asdf | asdfasdf |
---|---|---|---|
qwerqwer | qwer | qwerqwer | qwer |
asdf | asdfasdf | asdf | asdfasdf |
qwerqwer | qwer | qwerqwer | qwer |
asdf | asdfasdf | asdf | asdfasdf |
---|---|---|---|
qwerqwer | qwer | qwerqwer | qwer |
asdf | asdfasdf | asdf | asdfasdf |
qwerqwer | qwer | qwerqwer | qwer |
asdf | asdfasdf | asdf | asdfasdf |
---|---|---|---|
qwerqwer | qwer | qwerqwer | qwer |
asdf | asdfasdf | asdf | asdfasdf |
qwerqwer | qwer | qwerqwer | qwer |
asdf | asdfasdf | asdf | asdfasdf |
---|---|---|---|
qwerqwer | qwer | qwerqwer | qwer |
asdf | asdfasdf | asdf | asdfasdf |
qwerqwer | qwer | qwerqwer | qwer |
asdf | asdfasdf | asdf | asdfasdf |
---|---|---|---|
qwerqwer | qwer | qwerqwer | qwer |
asdf | asdfasdf | asdf | asdfasdf |
qwerqwer | qwer | qwerqwer | qwer |
Above: Text w/pic Above,center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit mauris sit amet mi hendrerit aliquet viverra arcu rutrum. Nulla facilisi. Pellentesque ornare libero in ligula bibendum commodo. Suspendisse luctus pharetra volutpat. Curabitur id urna lectus. Mauris id sem nec lacus interdum cursus. Nunc eget tempus sapien. Mauris fermentum fermentum tempus. Integer fringilla pulvinar condimentum. Suspendisse egestas nunc justo. Suspendisse potenti. Nulla facilisi. Aliquam sit amet ultricies velit.
Sed aliquet porttitor leo, vel suscipit lacus mollis accumsan. Nulla euismod nibh quis ante ullamcorper eget suscipit justo imperdiet. Integer est arcu, accumsan mollis fermentum nec, congue non dui. Nullam accumsan arcu a arcu vulputate tristique. Proin quis sollicitudin mauris. Nullam commodo, dolor eget ultrices laoreet, massa libero suscipit ante, eget cursus nulla quam id odio. Curabitur adipiscing accumsan lorem at euismod. Quisque felis lorem, accumsan nec congue non, convallis id turpis. Fusce elementum mollis lectus, at tempus libero molestie vel. Sed at sagittis mauris. Vivamus posuere aliquam magna, vitae aliquam dolor porttitor in. Fusce ipsum turpis, pulvinar eget bibendum sit amet, blandit non leo. Mauris vel lacinia ipsum. Pellentesque purus nisl, condimentum non sodales vel, tristique at magna.
Aenean viverra bibendum sem, id faucibus leo adipiscing id. Sed quis tellus justo. Morbi blandit iaculis nisi, et mollis lectus blandit feugiat. Cras et risus arcu, id varius orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur lobortis tortor enim. Nulla sagittis tortor id nisl pellentesque sed rutrum orci rutrum. Nunc elementum nunc nisi. Vivamus vitae sapien vitae ipsum lacinia convallis. Mauris vehicula, metus eu vestibulum tristique, metus nulla pellentesque purus, vel egestas est augue in leo. In consectetur, mi a tincidunt ultrices, odio dolor pulvinar eros, ac ultrices orci nisi vitae erat. Quisque sapien nunc, viverra in eleifend aliquam, faucibus et risus. Aliquam molestie, nisl sed tempor suscipit, dui mauris tempus massa, imperdiet aliquet diam enim ac nunc.
The following content is an overview valid XHTML. Some (if not many) of the tags are not available to you through CMS.
This is the first paragraph. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.
This is second paragraph. Use this paragraph to see what the before and after margins of a paragraph look like between otehr paragraphs. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.
This is third paragraph. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.
quoted text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.
This is preformatted text with a return placed here New line begins here New line with tab here New line with multiple sapces here spaces end
<div>
<h3>This my code for a headline</h3>
<p>This is my code for a paragraph</p>
</div>
This is how the same computer code as above
will look when surrounded by the pre tag
<div>
<h3>This my code for a headline</h3>
<p>This is my code for a paragraph</p>
</div>
r1c1 | r1c2 | r1c3 | r1c4 |
r2c1 | r2c2 | r2c3 | r2c4 |
r3c1 | r3c2 | r3c3 | r3c4 |
Column Group A | ||||
---|---|---|---|---|
Column 1 | Group A1 | Group A2 | Group A3 | |
Column 1 | Group A1 | Group A2 | Group A3 | |
Column Group A | ||||
Description Row 1 | r1c2 | r1c3 | r1c4 | r1c5 |
Description Row 2 | r2c2 | r2c3 | r2c4 | r2c5 |
Description Row 2 | r3c1 | r3c3 | r3c4 | r3c5 |
This Web page represents the views of the author and not necessarily those of North Dakota State University.
NDSU is not responsible or liable for its contents.