Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

CSS-only pages


Guest

Recommended Posts

I would like to develop an OSCommerce site utilizing CSS exclusively in lieu of tables. The index.php I see in front of my is lousy with nested tables, quite a hairball. The existing stylesheet.css has far to many TD and TR declarations to be healthy.

 

Has anyone reworked the templates to be table-free? I'm not sure I'm ready to start this effort on my own, but would appreciate a chance to see what someone else has already attempted.

Link to comment
Share on other sites

I've seen some really whacked out css only pages.

 

There's a site I need to visit (one of my hosts control panels) that's all css.

 

It's barely usable in one way in IE barely usable in another in Netscape.

 

I usually end up just turning style sheets off. :P

Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Link to comment
Share on other sites

Does anyone have a breakdown of which PHP files actually display information directly?

 

So far I have:

 

index.php

catalog.php

shopping_cart.php

Link to comment
Share on other sites

Most of the PHP files in the catalog directory display fixed output. Also, most of the files in includes/boxes and includes/modules, not to mention the header and footer in includes/, output HTML. In addition, some functions and classes output dynamic code, mostly imbedded in tables.

 

You will have quite a task getting rid of all of this, and even more of one in getting pure css pages to display in the browsers that your customers will be using.

 

I don't believe that this is worth the effort right now, although it might be in a year or two. For now, why not concentrate on building a store that customers want to use?

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

I don't believe that this is worth the effort right now, although it might be in a year or two. For now, why not concentrate on building a store that customers want to use?

 

Regards

Jim

I think that's good advice. I don't think css usage is advanced far enough right now. See my post above. Too many browsers out there don't handle it correctly.

Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Link to comment
Share on other sites

I'm the customer and I'm involving myself with the design and I just find it a lot more flexible and easy to work with CSS than with a spaghetti nighmare of table tags.

 

I'm very disappointed to hear that some of the template functions output tables. That's a programming expedience that will be regretted by OSCommerce users in the future.

 

I think I will at least produce an index.php template that is CSS only, and look at approaching the other templates one by one over time.

 

I'd like to make this work, because I like OSCommerce but fear it will be difficult to support long term without compliant XHTML.

Link to comment
Share on other sites

I'd like to make this work, because I like OSCommerce but fear it will be difficult to support long term without compliant XHTML.

If you treat it like a goal rather than as something you need right now to get a store running it's a noble cause.

 

You're right about the long term. Show us your progress and maybe others will pitch in.

Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Link to comment
Share on other sites

I dont know of any of the GPL ecommerce solutions out there that utilize CSS the way you are discussing. There are a lot of good people here, who know quite a bit, and then there are those who dont know what a php.ini file is or what curl is, etc.

Link to comment
Share on other sites

Here is a start for you:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
 <!-- body //-->
   <div id="container">
 <div id="header">
         <!-- header //-->
         <?php require(DIR_WS_INCLUDES . 'header.php'); ?>
         <!-- header_eof //-->
       </div>
       <div id="column-left">
         <!-- left_navigation //-->
         <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
         <!-- left_navigation_eof //-->
       </div>
       <div id="column-right">
         <!-- right_navigation //-->
         <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
         <!-- right_navigation_eof //-->
       </div>
       <div id="content">
         <div id="pageheading"><?php echo HEADING_TITLE; ?></div>
         <div id="pagecontent"><?php echo TEXT_INFORMATION; ?></div>
         <div id="pagecontinue"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></div>
       </div>
 <div id="footer">
         <!-- footer //-->
         <?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
         <!-- footer_eof //-->
       </div>
   </div>
 <!-- body_eof //-->
</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

Link to comment
Share on other sites

Thanks, Burt, I'll play with that a little bit and see how it works.

 

Whatever I come up with, I'll be sure to post something back here, probably in the contributions section.

Link to comment
Share on other sites

By the way tested the site in several browsers:

IE5.x (PC and Mac)

IE6.x

Opera (version?)

Mozilla/Netscape (several versions)

And several minor browsers.

 

Only IE5.x Mac shows a little error, all other above browsers appear to display the shop perfectly!

(but the "famous version 4" or older browsers I really don't want to know about)

Link to comment
Share on other sites

Too many browsers out there don't handle it correctly.

Actually all v5.x or higher browsers handle CSS positioning and CSS based layouts just fine. The problem is too many coders don't follow the standards and don't do it properly or try to fix what they didn't code correctly in the 1st place with so called "css hacks".

 

If done properly, you can get a full XHTML/CSS layout that will show proper in all v5.x browsers or higher or equivalent (and without the need for "css hacks").

 

I also don't think you should get rid of tables all together either. Use them for what they are designed for - holding tabular or naturally table styled data - but not for layout.

 

I am working on converting our one site to XHTML/CSS based layout with a few tables in places where appropriate (like the shopping cart page section that shows the cart contents, etc). Hope to launch it mid April, but doing many changes besides the XHTML/CSS, so I can't say for sure.

The only thing necessary for evil to flourish is for good men to do nothing

- Edmund Burke

Link to comment
Share on other sites

PS. IMO, IE5.x for Mac is probably the best browser to test CSS layouts on. It holds more strictly to the standards than any other browsers I know of. Where some browsers would be more forgiving on coding errors, IE 5.x Mac usually is not (probably why so many designers do not like it, but in actuality it is a fantastic designer's tool because of how close/strict it holds to the standards. Forces you to do/learn proper coding ;) [not that great for surfing as it is kind of slow]).

 

It does have a few bugs, but they are not really anything really very big, and can generally be avoided without any dramatic "CSS hacks".

The only thing necessary for evil to flourish is for good men to do nothing

- Edmund Burke

Link to comment
Share on other sites

I guy called Matti seems to have created a full CSS osC shop!

(Also using the BTS see: http://forums.eeweb.nl/viewtopic.php?t=118 )

 

http://www2.voimaharjoittelu.net/

 

Outstanding! (don't forget to take a look at the HTML source)

 

Only did a quick test but, no browser compatibility problems as far as I can see.

Link to comment
Share on other sites

I'm very disappointed to hear that some of the template functions output tables. That's a programming expedience that will be regretted by OSCommerce users in the future.

pardon my ignorance - why is that ?

Your online success is Paramount.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...