Rechercher :
Accueil » Look & Feel Connexion

Question comment faire avec osC pour être "tableless" donc xHTML?
Réponse Voici un prototype de code fonctionnant sur bon nombre de navigateurs (je ne les ait pas tous testés)

Le xHTML de la structure d'osC :

<?php
/*
   $Id: oscommerce_xhtml_template.php,v 1.0 2009/04/21 delete -> oscommerce-fr.info $

   osCommerce, Open Source E-Commerce Solutions
   http://www.oscommerce.com

   Copyright (c) 2003-2009 osCommerce

   Released under the GNU General Public License
*/

   require('includes/application_top.php');


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html <?php echo HTML_PARAMS; ?>>
<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/page_contents : contenu de la page : positionnement, centrage, largeur //-->
<div id="page_contents">

<!-- header: ci-dessous require du header soit une ou plusieurs table(s) largeur 100%: //-->
<div id="header">
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
</div id="header">
<!-- header_eof //-->

<!-- body //-->

<!-- left_navigation - colonne de gauche et sa largeur //-->
         <div id="left" style="width: <?php echo BOX_WIDTH; ?>px;">
                         <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
         </div>
<!-- left_navigation_eof //-->


<!-- right_navigation - colonne de droite et sa largeur (identique ici à celle de gauche) //-->
         <div id="right" style="width: <?php echo BOX_WIDTH ?>px;">
                                 <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
         </div>

<!-- right_navigation_eof //-->

<!-- middle_content_header //-->
         <div class="middle_top"></div>
<!-- middle_content_header_eof //-->  

<!-- middle_content //-->      
         <div class="middle">
             <?php echo "<p>Lorem ipsum dolor sit amet consectetuer elit Lorem tincidunt justo Aenean. Aliquam dis ut accumsan justo sollicitudin mattis aliquam libero nec vitae. Malesuada nibh sed augue Sed nunc nec Phasellus consectetuer tincidunt laoreet. Tincidunt orci pellentesque ipsum mauris Aliquam tellus iaculis eu eget felis. Velit eget congue odio massa lorem habitasse egestas pede vel justo. </p>
             <p>Ligula suscipit ultrices sed leo et Suspendisse ut nulla Vivamus pede. Orci magna quis est Nulla tortor condimentum sapien pretium congue Nam. Quis Vestibulum orci amet Sed lacinia et pede Nam aliquet pretium. Nunc enim mus Suspendisse feugiat Nulla eleifend porttitor vitae mattis feugiat. Venenatis sapien dui dignissim quis mollis nunc quis mauris elit ac. At ipsum vitae consectetuer Ut quis nunc.</p>
             <p>Libero libero ligula sed at vestibulum libero gravida nunc pellentesque malesuada. Adipiscing Vivamus id et urna eget scelerisque quis amet libero rutrum. Urna semper In fringilla a risus Quisque malesuada justo commodo justo. Adipiscing Vestibulum elit a in fringilla dictum id quis interdum wisi. Leo nec ac sagittis pellentesque massa et Curabitur volutpat lacus leo. Adipiscing Morbi ultrices sapien vel ligula turpis pretium lacus hendrerit laoreet. Ac Aenean Vestibulum.</p>
             <p>Curabitur velit neque Vivamus risus feugiat Aenean est Nam eget libero. Eu laoreet est Ut enim condimentum et feugiat accumsan Maecenas Vivamus. Non Sed pretium convallis Proin id porttitor felis nisl sit sed. Donec wisi pede vitae turpis fringilla libero tempor sagittis nibh pretium. Condimentum et netus venenatis Phasellus felis habitant et faucibus et orci. Elit at pretium.</p>
             "; ?>
         </div>
<!-- middle_content //-->

<!-- middle_content_trailer //-->
<div class="middle_bot"></div>
<!-- middle_content_trailer_eof //-->

<!-- body_text_eof //-->
<div class="cleaner">
</div>
<!-- body_eof //-->

<!-- page eof //-->
</div>

<!-- footer //-->
<div id="footer">
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
</div>
<!-- footer_eof //-->
</div id="page_contents">

</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>


Le CSS lié :

/* *************************************************************** */
/* Style de la Page - Haut, Gauche, Droit Bas, Centre */
/* *************************************************************** */

#page_contents {
         margin-left: auto;
         margin-right: auto;
         width: 1000px; /* Largeur de la page centrée */
}
#left {
         float:left;
}
#right {
         float:right;
}
#footer {
         margin-left: auto;
         margin-right: auto;
         width: 1000px; /* Largeur de la page centrée */
}
.cleaner {
         clear:both;
}
/* *************************************************************** */
/* Module Central */
/* *************************************************************** */

div.middle_top {
   overflow:hidden;
   height: 10px; /* Hauteur en Pixels de l'image de l'image du haut du module */
   font-size: 0px;
   background: transparent url(images/boxes/tabletop.png) no-repeat;
}

div.middle {
   overflow:hidden;
   height: 100%;
   font-size: 0px;
   background: transparent url(images/boxes/tablemid.png) repeat-y;
}
div.middle_bot {
   overflow:hidden;
   height: 10px; /* Hauteur en Pixels de l'image de l'image du haut du module */
   font-size: 0px;
   background: transparent url(images/boxes/tablebot.png) no-repeat;
}


Les données tabulaires (ce qui est normal) sont à récupérer dans le code d'origine et à intégrer dans ce code.
Auteur : delete Mise à jour le 23/04/2009

Retour