28173 sujets

CSS et mise en forme, CSS3

Bonsoir tout le monde Smiley smile

Je cherche comment attribuer aux liens de cette zone :

$info_box_contents = array();
  $info_box_contents[] = array('text' => $categories_string.= '<a class="TypBlack" href="' . tep_href_link(FILENAME_PRODUCTS_NEW, '', 'NONSSL') . '">' . BOX_HEADING_WHATS_NEW . '</a>  l  <a href="' . tep_href_link(FILENAME_SPECIALS, '', 'NONSSL') . '">' . BOX_HEADING_SPECIALS . '</a>  l  <a href="' . tep_href_link(FILENAME_WHY, '', 'NONSSL') . '">' . BOX_WHY . '</a> l</center>');
  new infoBox($info_box_contents);

une couleur rouge lorsqu'ils sont activés (on garde la couleur noire sur le lien par défaut).

-----------------------------------------------

code complet du fichier en question :

<?php

global $HTTP_GET_VARS;
?>
<!-- top_categories //-->
		<tr>
		  <td>
<?php
$status = tep_db_num_rows(tep_db_query('describe categories status'));

$query = "select c.categories_id, cd.categories_name, c.parent_id
		  from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
		  where c.categories_id = cd.categories_id
   and c.parent_id=0";
if ($status >0)
  $query.= " and c.status = '1'";
$query.= " and cd.language_id='" . $languages_id ."'
		  order by sort_order, cd.categories_name";

$categories_query = tep_db_query($query);

// Build categories string
$info_box_contents = array();
$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);


$categories_string .= '<center>l <a class="TypBlack" href="' . tep_href_link(FILENAME_DEFAULT) . '"><b>' . ' ' . '</b><a/>';
while ($row = tep_db_fetch_array($categories_query))  {
  $categories_string .= '<a class="TypBlack" href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $row['categories_id']) . '">';
  list($current) = explode('_', $HTTP_GET_VARS['cPath']);
  if ($row['categories_id'] == $current) $categories_string .=  '<b><font color="#e56500">';
  $categories_string .= $row['categories_name'];
  if ($row['categories_id'] == $current) $categories_string .=  '</font color></b>';
  $categories_string .= '</a>';
  $categories_string .= '  l  ';
}

 $info_box_contents = array();
  $info_box_contents[] = array('text' => $categories_string.= '<a class="TypBlack" href="' . tep_href_link(FILENAME_PRODUCTS_NEW, '', 'NONSSL') . '">' . BOX_HEADING_WHATS_NEW . '</a>  l  <a href="' . tep_href_link(FILENAME_SPECIALS, '', 'NONSSL') . '">' . BOX_HEADING_SPECIALS . '</a>  l  <a href="' . tep_href_link(FILENAME_WHY, '', 'NONSSL') . '">' . BOX_WHY . '</a> l</center>');
  new infoBox($info_box_contents);
?>
		  </td>
		</tr>
<!-- top_categories_eof //-->

Pouvez vous m'aider ssvp ? Merci.
Modifié par Zucchero (12 Sep 2006 - 00:23)
Bonjour Zucchero et bienvenue sur Alsacréations Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Ton code php n'a pas d'utilité pour ton problème, par contre le code html généré et le code css serait utile, en particulier avec une page en ligne.
Bonsoir Zucchero et bienvenue parmi nous, Smiley smile

Avant toute chose, il serait préférable de fournir un exemple de code de la page générée et non le source en php. Un exemple en ligne serait un plus.

Ensuite, comme indiquée dans les règles du forum, il est demandé de baliser le code pour une meilleure lisibilité du post.

Enfin, tlm n'est pas un membre du forum, à moins que tu ne veuilles dire "tout le monde". Auquel cas, merci de ne pas utiliser de langage sms.
Smiley cligne

<edit> Certes, je suis grillée par Igor, mais ...
non, je ne dirais rien ...
Smiley lol
Modifié par Vero (11 Sep 2006 - 23:16)
Salut,

Je suis connecté mais impossible d'éditer mon message.
De plus, je n'ai pas trouvé les balises [code], désolé... Smiley confus
Le bouton "Editer" se trouve en haut à droite du post.
Le bouton "Code" est en dessous de la zone de saisie (à côté de gras, italique, image ...)
Si tu es bien connecté, tu devrais voir un bouton "Editer" à droite du bouton "Citer" en face de tes posts ...
J'ai corrigé mon premier message. Voici mon CSS :

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #FF9933; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #FF9933; }
.productsNotifications { background: #FF9933; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #FF9933; text-decoration: underline; }

BODY {
text-align: center; /* Permet de centrer ton site dans IE */
  background: #FF7F00;
  color: #000000;
  margin: 0px;
  background-image:url(images/fond.gif);
}

#page{
  margin: 7px auto 0 auto;
  width: 750px;
  padding: 0;
  background: #e56500;
}

#float{
width: 750px;  /* A remplacer par ta valeur */
float: left; /* Permet de pas avoir de problème de float par la suite */
}

A {
  color: #000000;
  text-decoration: none;
}

A:hover {
  color: #000000;
  text-decoration: underline;
}

FORM {
	display: inline;
}

TR.header {
  background: #e56500;
}

TR.headerNavigation {
  background: #FF9933;
}

TD.headerNavigation {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #FFCC33;
  color: #000000;
  font-weight : bold;
}

A.headerNavigation { 
  color: #ff7f00; 
}

A.headerNavigation:hover {
  color: #ffffff;
}

TR.headerError {
  background: #ff0000;
}

TD.headerError {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #ff0000;
  color: #ffffff;
  font-weight : bold;
  text-align : center;
}

TR.headerInfo {
  background: #00ff00;
}

TD.headerInfo {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #00ff00;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

TR.footer {
  background: #FF9933;
}

TD.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #FFCC33;
  color: #ff7f00;
  font-weight: bold;
}

.infoBox {
  background: #ffcc33;
}

.TypBlack {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
  font-weight: bold;
}

.infoBoxContents {
  background: #ffcc33;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

.infoBoxNotice {
  background: #FF8E90;
}

.infoBoxNoticeContents {
  background: #FFE6E6;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #FF9933;
  color: #FFFFFF;
}

TD.infoBox, SPAN.infoBox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
  background: #FFCC33;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
  background: #FFCC33;
}

TABLE.productListing {
  border: 1px;
  border-style: solid;
  border-color: #BF855F;
  border-spacing: 1px;
}

.productListing-heading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #FFCC33;
  color: #000000;
  font-weight: bold;
}

TD.productListing-data {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

A.pageResults {
  color: #000000;
}

A.pageResults:hover {
  color: #000000;
  background: #FFCC33;
}

TD.pageHeading, DIV.pageHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #FFCC33;
}

TR.subBar {
  background: #f4f7fd;
}

TD.subBar {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
}

TD.main, P.main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.accountCategory {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #aabbdd;
}

TD.fieldKey {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

TD.fieldValue {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
}

TD.tableHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.newItemInCart {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  color: #000000;
  background: #FFCC33;
}

TEXTAREA {
  width: 100%;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  background: #FFCC33;
}

SPAN.greetUser {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #f0a480;
  font-weight: bold;
}

TABLE.formArea {
  background: #f1f9fe;
  border-color: #7b9ebd;
  border-style: solid;
  border-width: 1px;
}

TD.formAreaTitle {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.markProductOutOfStock {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #c76170;
  font-weight: bold;
}

SPAN.productSpecialPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #000000;
}

SPAN.errorText {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #FFCC33; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #FFCC33; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }
Zucchero a écrit :
Je vois le bouton "éditer" sous IE seulement.
Sous firefox, je n'ai que "citer". Voilà... Smiley cligne


Bizarre ...

Bon, l'essentiel est de l'avoir trouvé quelque part dans l'immédiat.

Passons à la suite ...

Cf nos posts précédents : merci de fournir la page générée et non le source en php.

De manière générale, pour résouder un problème en xhtml/css, il est préférable d'y réfléchir depuis la page générée.
Et voici la page générée Smiley cligne :

<?php

// check if the 'install' directory exists, and warn of its existence
  if (WARN_INSTALL_EXISTENCE == 'true') {
    if (file_exists(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/install')) {
      $messageStack->add('header', WARNING_INSTALL_DIRECTORY_EXISTS, 'warning');
    }
  }

// check if the configure.php file is writeable
  if (WARN_CONFIG_WRITEABLE == 'true') {
    if ( (file_exists(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/includes/configure.php')) && (is_writeable(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/includes/configure.php')) ) {
      $messageStack->add('header', WARNING_CONFIG_FILE_WRITEABLE, 'warning');
    }
  }

// check if the session folder is writeable
  if (WARN_SESSION_DIRECTORY_NOT_WRITEABLE == 'true') {
    if (STORE_SESSIONS == '') {
      if (!is_dir(tep_session_save_path())) {
        $messageStack->add('header', WARNING_SESSION_DIRECTORY_NON_EXISTENT, 'warning');
      } elseif (!is_writeable(tep_session_save_path())) {
        $messageStack->add('header', WARNING_SESSION_DIRECTORY_NOT_WRITEABLE, 'warning');
      }
    }
  }

// check session.auto_start is disabled
  if ( (function_exists('ini_get')) && (WARN_SESSION_AUTO_START == 'true') ) {
    if (ini_get('session.auto_start') == '1') {
      $messageStack->add('header', WARNING_SESSION_AUTO_START, 'warning');
    }
  }

  if ( (WARN_DOWNLOAD_DIRECTORY_NOT_READABLE == 'true') && (DOWNLOAD_ENABLED == 'true') ) {
    if (!is_dir(DIR_FS_DOWNLOAD)) {
      $messageStack->add('header', WARNING_DOWNLOAD_DIRECTORY_NON_EXISTENT, 'warning');
    }
  }

  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
?>
<div id="page">
<!-- Table de centrage -->
<table align="center" cellpadding="0" cellspacing="0"  width="750"><!-- 800 c'est peut-être un peu juste. 1000 c'est bien -->
<tr><td> <!-- Là tu peux mettre une hauteur pour placer une marge en haut ou un texte --></td></tr> <!-- Ligne de marge du haut -->
<tr><td class="FondPage">
<div align="center"><?php
 if ((USE_CACHE == 'true') && empty($SID)) {
  echo tep_cache_categories_box();
 } else {
  include(DIR_WS_BOXES . 'categories.php');
}
  ?></div>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr class="header">
  <td align="right" valign="bottom">
<?php echo '' . $languages_string; ?></td>
    <td valign="middle" align="center"> <td valign="middle" align="center"><?php echo tep_image(DIR_WS_IMAGES . 'oscommerce.gif'); ?></td>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<td valign="middle" align="center">
<?php
 if (!isset($lng) || (isset($lng) && !is_object($lng))) {
   include(DIR_WS_CLASSES . 'language.php');
   $lng = new language;
 }

 $languages_string = '';
 reset($lng->catalog_languages);
 while (list($key, $value) = each($lng->catalog_languages)) {
   $languages_string .= '<a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '">' . tep_image(DIR_WS_LANGUAGES .  $value['directory'] . '/images/' . $value['image'], $value['name']) . '</a> ';
 }

?>
<?php echo '' . $languages_string; ?></td>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr class="headerNavigation">
    <td align="right" class="headerNavigation"><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_MA_PAGE, 'message=logoff', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>  |  <?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '"><FONT COLOR=#ff7f00><img src="'.DIR_WS_IMAGES.'panier.gif" alt="Panier" border="0" /> : '.$cart->count_contents().$produit.'</a>';?>   </td>
	
	
	
  </tr>
</table>
<?php
  if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr class="headerError">
    <td class="headerError"><?php echo htmlspecialchars(urldecode($HTTP_GET_VARS['error_message'])); ?></td>
  </tr>
</table>
<?php
  }

  if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr class="headerInfo">
    <td class="headerInfo"><?php echo htmlspecialchars($HTTP_GET_VARS['info_message']); ?></td>
  </tr>
</table>
<?php
  }
?>
J'ai déplacé le sujet dans un salon plus approprié.

Que veux-tu dire par liens actifs ?

Et je t'avoue, malgrè tes efforts pour donner un code plus exploitable, avoir certaines difficultés à repérer quel est le conteneur concerné ...

<edit> La source généré est celui de la page qui s'affiche chez le client ...
Modifié par Vero (12 Sep 2006 - 00:48)
Bonjour,

Ce que j'en sais c'est que le code PHP de cette ligne fait qu'un "lien cliqué" devient rouge, alors qu'il est noir par défaut :

  if ($row['categories_id'] == $current) $categories_string .=  '<b><font color="#e56500">';


Maintenant je ne vois pas ce qu'il faut que je fasse pour appliquer cet effet sur les liens concernés par ce code :


$info_box_contents = array();
  $info_box_contents[] = array('text' => $categories_string.= '<a class="TypBlack" href="' . tep_href_link(FILENAME_PRODUCTS_NEW, '', 'NONSSL') . '">' . BOX_HEADING_WHATS_NEW . '</a>  l  <a href="' . tep_href_link(FILENAME_SPECIALS, '', 'NONSSL') . '">' . BOX_HEADING_SPECIALS . '</a>  l  <a href="' . tep_href_link(FILENAME_WHY, '', 'NONSSL') . '">' . BOX_WHY . '</a> l</center>');
  new infoBox($info_box_contents);
?>
          </td>
        </tr>
<!-- top_categories_eof //-->


Merci de votre aide.
Bonjour et merci pour ta réponse.

Ce pseudo element change la couleur du lien visité, non ? Ce que je souhaite c'est changer la couleur du lien uniquement lorsque la rubrique dont il dépend est active. Lorsqu'on change de rubrique il retrouve sa couleur par défaut.
Il n'y a pas de pseudo classe pour dire qu'un lien correspond à une page donnée ou à une rubrique donnée.

On peut savoir (et donc styler) qu'un lien a été visité (a:visited), qu'il est survolé (a:hover), en train d'être activé (a:active), qu'il reçoit le focus (a:focus), mais on ne peut pas isoler les liens d'une rubrique donnée.

Si on souhaite modifier l'apparence d'un lien sur la page activée par ce dernier, on peut appliquer une classe (exemple : class="active") sur ce lien, uniquement dans la page concernée (donc modifier le source html pour chaque rubrique).

J'espère répondre en partie à ta question ...

Mais ta requête n'est pas très claire et ton exemple inexploitable en l'état.

Tu as besoin d'une aide en php ou en HTML/CSS ?

Si tu souhaites une aide en HTML/CSS, prière de fournir un exemple de code
généré côté client (tu sais, sans php dedans !)
Smiley cligne