VitaBodies designed an Ebay Template for listing items on ebay. The template is W3C Valid Table-less XHTML Strict CSS and does not break the Google RSS XML data feeds.

Having an Ebay template is nice, as you have all of the text that is repeated in almost every listing right there ready for minor tweaking. Plus your listing take on a more professional look and feel.

The images were designed so that one or more can be used in the template or replaced with images of the item that is being sold or auctioned.

One of the big challenges was to get the code to work in the layout that we needed and still support the Google RSS XML Data Feeds.

Being controlled by an external style sheet allows the look of ALL the listings to be changed. Changes can be made if ebay alters their scripts and styles (and they do) or to refresh the look of the listings from time to time.

NOTE: If you plan on doing your own style sheet for ebay, do not use the word ebay as an ID or CLASS or anything else. Vitabodies was using style sheets on ebay before ebay really got into using them. So when ebay started creating and usings a style sheet can you guess what word they used? EBAY…

]]> http://www.vitalbodies.com/blog/2008/07/14/portfoilo-ebay-template-w3c-valid-table-less-xhtml-strict-css-rss/feed/ 0 http://www.vitalbodies.com/blog/2008/07/11/portfolio-melitamarshallcom-valid-table-less-xhtml-strict-css/ http://www.vitalbodies.com/blog/2008/07/11/portfolio-melitamarshallcom-valid-table-less-xhtml-strict-css/#comments Fri, 11 Jul 2008 16:04:00 +0000 vitalbodies http://vitalbodies.wordpress.com/?p=201 Portfolio: MelitaMarshall.com Valid Table-less XHTML Strict CSS

VitalBodies recently finished the creation re-creation of the MelitaMarshall.com Web Site.

This site is based upon a template, VitalBodies created for the Oregon House web site.

Melita wanted wanted the site to tie into her existing business Oregon House and the Oregon House web site but be able to change in style as needed.

VitalBodies created the template to be W3C Valid Table-less XHTML Strict and Valid CSS.

(Click image to see a larger clearer version)

The entire web site W3C Valid Table-less XHTML Strict and Valid CSS.

The web sites original tabled design was done by Paradigm-Graphics some years back.

-

MelitaMarshall.com:

“I bring wisdom from my own spiritual journey as well as experience in business entrepreneurship and training in holistic healing into the vessel of our healing sessions. My goal is to help you gain insight into what is limiting you, and coach you to find the courage to reconnect with your source and your core.“

Visit MelitaMarshall.com

VitalBodies recently finished the re-creation of an Oregon House Web Page. From this template, all the other pages on the Oregon House web site can be updated.

VitalBodies created the template to be W3C Valid Table-less XHTML Strict and Valid CSS.

(Click image to see a larger clearer version)

The OregonHouse Events page (shown above) and a few other pages were brought up to W3C Valid CSS XHTML Strict table-less designs as part of an ongoing project of keeping the web site up to date.

The web sites design was originally done by Paradigm-Graphics some years back.

-

OREGON HOUSE:

“Oregon House, a peaceful Oregon coast retreat center for individuals and groups. At our unique central Oregon coast resort we invite you to relax, reflect and recharge. At Oregon House you experience a different world, close to nature’s beauty and the transformational energy of the ocean.”

- Oregon House is located in Yachats Oregon -

Visit OregonHouse.com

Portfolio: Mandala Arts Valid Table-less XHTML Strict CSS

VitalBodies recently finished the re-creation of a Mandala Arts design.

VitalBodies took Mandala Arts existing home page design and made it Table-less W3C Valid XHTML Strict and CSS.

(Click image to see a larger clearer version)

Earlier last year VitalBodies solar powered the MandalaArts.com web site.

-

MandalaArts.com is the home of

Stickers, Body Art Tattoos, Magnets, Flag Stings, Streamers and Wall Hangings.

- Original Art By Bryon Allen -

Visit MandalaArts.com

In web page building you generally have two main options,
Fluid and Absolute.

If you are from the art world and are used to absolutes then designing for the web can be a hard transition to adjust to.

You want that so-and-so the exact color, size, and location that you want it.
This is an Absolute-ist way of thinking.

The language of the web was not designed for absolutes but rather to display information on a broad range of devices.

This broad range of devices that your masterpiece will display on, each with their different strengths and weaknesses, is what is so hard for traditional designers to adjust to.

As a designer you will never know how your masterpiece will display for your audience that you will never see.

One can do absolutes in web page building but you rule out a large portion of your viewers and their needs.

Fluid, for example, allows your viewers to make the text a size they can read, rather than just look artistic on the page. A fluid page can change shape and size to better match the width of the screen of the viewer.

Making your page be accessible and work for a broad range of people, browsers, devices and operating systems is a Fluid-ist way of the thinking.

Not everyone has a new 30 inch high resolution LCD. But some do. Others will see your work at 640 by 480.

As a designer you actually have no real way to rule your design with an iron fist an force THEM to see your work the way you want THEM to see it.

Not unless you buy them all new machines. Oh, and heal them all to perfect vision and such.

And…

This is not to say there are not many valid reasons to design using absolutes. There are…

For people new to designing XHTML, CSS and Valid web pages, you might find gaining an overview of what you are up against in web page design helpful. This post is intended as a very brief but helpful overview…

VitalBodies builds or remodels web sites or pages for different folks now and then and one of things we try to point out is the value of having a Strict, Valid, Table-less, CSS design. A design where the structure and style are separate. This post was adapted from an email about some of the reason why.

TEST YOUR SITE:

The first test for your current site is to go to the site and crank up your font sizes in your browser.
How did the site do? Did it break your layout? Now adjust them down as see how the site does.
It is highly likely many of your your sites viewers will have their fonts sizes cranked a notch or two either in the bowser or the Operating System.
Does the site validate? Click on the links below and open them in a new tabs. Then paste the address of the site you want to check, and see how the site fairs.

MARKUP: http://validator.w3.org/#validate_by_uri

CSS:http://jigsaw.w3.org/css-validator/#validate_by_uri

If the site is not valid then the browser will go into what is called Quirks Mode and render the site how ever the browser sees fit.
This will be different in each browser and each version of each browser and each OS.
Better dig out about 50 computers to fully test how your site will look on all those browsers, versions and OSes.
What fonts are used by your site? Are they fonts that ONLY come with Windows?
Well, then how will a Mac or a Linux display your sites fonts?

How many lines of code will you have to go through to edit all those font tags? Hopefully someone told you not to use font tags in your HTML. Fonts should be specified in the style sheet.

And what if you want to change the layout of your site from a nav bar on top to one on the side or from the side to one on top?

Essentially table-less frees you from tables where tables are not needed, like layout. Plus you are free from sorting through a whole lot of junk like all the column, row and other table tags in your code and a obstinate structure to have to fight with layout wise.
…A FIXED/SET hard to change layout that in many cases requires a complete rebuild of the page to make changes to the layout.

With no tables you could put the footer where the header is and move the nav to the side or make the site wide or narrow, you name it. All with out changing the XHTML and only editing the style sheet.
With a table, well, you have that and only that layout – You CAN NOT change that tables total layout with the stylesheet.
And you would not have to change every page one by one rather than changing them all with just one style sheet.

VitalBodies spent a number of years learning how to be free from all that. A big part of that change was to just say no to proprietary web code and closed source code web programs. The final piece was just put into place, the OS Ubuntu that glues all the other pieces together.
Interesting fact is, this journey towards freedom all started the with web mastering…

CSSZenGarden was the inspiration: http://www.csszengarden.com
“A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.”

NOTE: The XHTML code does not change on the CSSZenGarden site, only the stylesheet – that is the power of table-less, Strict, Valid and CSS.

-

If you take the time to learn to be a webmaster, learn to make table-less Strict Valid CSS web sites.

Having a strict standards based site is one that ANY software tool that is standards based can work on and any webmaster that learned standards based web building can work on. Ah, freedom…

-

And guess what tools are likely to be standards based?
The free as in freedom, Open Source tools!
And guess what webmasters are the ones that are likely to do standards based code?
The ones that support freedom…

MARKUP: http://validator.w3.org/#validate_by_input

CSS:http://jigsaw.w3.org/css-validator/#validate_by_uri

If you do not create pages, but hire others to create them for you, you can check the quality of their work in terms of web standards. Insist on valid code.

If you are not familiar with using these Validating tools consider these tips:

• Make sure you have a DOCTYPE declaration.
• Get the XHTML (markup) correct BEFORE validating the CSS.
• Resolve the errors in the code (if any) from the TOP down.
• Have fun and learn as you go.

I like to check the Show Source and Verbose Output check boxes.

Show Source lets me see the all the code by line number so I can find the offending code AND see the code that surrounds that offending code. Verbose Output give me more information to go on resolving issues that the validator finds.

There are tabs to allow you to have the validator check you code in what ever way works for you. Like by URI, file upload or direct input etc.

URI for checking existing pages but means you have to upload the changes to your server each time you want to check how valid the code is.

With Direct Input you can just copy and paste you code into the the validator and then edit the code in the validator to save time. When you are done paste your valid code back into your site and and upload.

File Upload will allow you to upload the the file from your computer.