[PHP] Un coup d'main sur une fonction

[sylvain]

Bonjour tout le monde !

J'aurai besoin d'un petit coup d'main vite fait, bien fait sur une fonction en PHP.

Voilà :
Je dispose de $N clients prenant un repas au prix unitaire $PU.

Je veux définir une fonction PRIX me retournant le prix total $PT du repas ($PT = $N*$PU) en format monétaire et en changeant le séparateur décimal en fonction de la langue !
C'est-à-dire :
Pour $N = 1 client, si le prix unitaire fait $PU = 12
Alors ça doit afficher 12,00 € pour les francophones et 12.00 € pour les anglophones...

Tant qu'à faire, pas de test conditionnel SI ! Merci !

J'avais songé à la fonction

Code : Tout sélectionner

substr_replace( )

combiné avec

Code : Tout sélectionner

strpos( )

mais ça n'a pas l'air de marcher (j'ai dû m'planter qq part et ça me saoûle !)

De plus :
Comment je lui définis à PHP que mon prix total $PT est un flottant à 2 chiffres après la virgule et qu'il doit m'afficher les 0 'inutiles' du format monétaire ?



Pour info :
Pour l'instant, je me contente de calculer l'entier du $PT et de concaténer par le séparateur et les eurocents...
ex :

Code : Tout sélectionner

12.','.'50 €'

Suis-je clair ? A me relire, pas vraiment !!!

[sylvain]

C'est bon, j'avais sauté une fonction spéciale dans mon livre ! Merci à Internet également !

Pour ceux que ça intéresse :

Code : Tout sélectionner

number_format( $x [, $dec [, $chdec, $chmille]])

[/color]

Cette fonction retourne une chaîne de caractères correspondant au nombre $x formaté suivant 1, 2 ou 4 (non pas 3 !) paramètres.
$dec = nombre de décimales à afficher
$chdec = séparateur décimal
$chmille = séparateur des milliers

Exemple :

Code : Tout sélectionner

$n = 12345.60

// affichage à la française
print( number_format($n, 2, ',', ' ') );
// affiche 12 345,60


// affichange à l'anglaise
print( number_format($n, 2) );
// affiche 12,345.60

[/color] [/color]

[EricDesMontagnes]

Cool tu fais les questions et les réponses

[sylvain]

Ouais ! Je suis tombé dessus, me suis pas trop fait mal, alors je réponds pour ceux qui veulent et ça évite que tout le monde cherche inutilement !

Cependant, j'ai un autre problème beaucoup plus embêtant !

Ca concerne des CSS ce coup-ci ! (J'vais pas refaire un topic pour ça !)


Situation :
J'ai fait un menu de navigation avec des boutons roll-over porte coulissante en background et une image transparente en guise de lien (Non, je ne veux pas d'hypertexte !)

Pour cela, j'ai utilisé la méthode classique du

Code : Tout sélectionner

<ul><li><a href>

J'ai bien défini mes marges, mes tailles de cadre à 40x40, aucun soucis, ça donne ce que je veux :
(Les bordures, c'est normal, c'est pour mieux visualiser !)




Ensuite, quand je passe les

Code : Tout sélectionner

<li>

en

Code : Tout sélectionner

display: inline ; 

voilà ce qui se passe :


Et là j'comprends plus rien ! Les images font bien 40x40, mais l'arrière-plan (en bleu) est apparemment rejeté au milieu du cadre !

Les margin et les padding sont à 0.

J'ai songé à un conflit entre mes 3 feuilles de styles mais apparemment non, je suis en train de tout refaire ! Rien de cela pour l'instant !

Quoique je fais ??? Quelqu'un a une idée ???

CODE CSS:

Code : Tout sélectionner

@charset "utf-8";
/* CSS Document */


/* Menu de navigation */
ul.navigation {
    width: auto;
    height: auto;
    margin: 0 ;
    padding: 0 ;
    list-style: none ;
    border:1px solid #00FF00;
    }

ul.navigation li {
    display: inline ;
    margin-right: 10px ; 
    width: 40px;
    height: 40px;
    border:1px solid #0000FF;
    background:url(http://127.0.0.1/restaurant-le-cedre/images/squelette/boutons.gif) 0 0 no-repeat;
}

ul.navigation li:hover {
    background-position:0 -40px;
}


ul.navigation li a {
    padding: 0;
    font-size:100%;
    text-decoration: none ;
    }

[sylvain]

Et oui ! Ca va, me suis pas trop fait mal en tombant dessus ! Autant le dire que tout le monde ne cherche pas inutilement !

Par contre, j'ai un autre soucis, en CSS ce coup-ci !

J'ai un menu de navigation en CSS, défini par <ul><li><a href>.
Chaque <li> est un cadre de 40x40 avec une image de fond qui fait un roll-over en porte coulissante.
Chaque <a> détoure une image gif avec fond transparent pour voir l'arrière-plan donc !

Jusque là, tout va bien ! Ca donne ce que je veux une fois toutes les dimensions renseignées !
(Les bordures, c'est pour mieux se repérer !)


Dès que je passe les <li> en display : inline ; , là ça merde ! L'image de fond semble rejeté au milieu du cadre !!!



J'trouve pas pourquoi là !!! J'ai bien songé à un conflit avec mes 3 feuilles de styles mais apparemment non, pas trouvé de bug jusque là ! Et je suis, de plus, en train de les revoir !

Une idée ???


J'adjoins le code CSS :

Code : Tout sélectionner

@charset "utf-8";
/* CSS Document */


/* Menu de navigation */
ul.navigation {
    width: auto;
    height: auto;
    margin: 0 ;
    padding: 0 ;
    list-style: none ;
    border:1px solid #00FF00;
    }

ul.navigation li {
    display: inline ;
    margin-right: 10px ; 
    width: 40px;
    height: 40px;
    border:1px solid #0000FF;
    background:url(http://127.0.0.1/restaurant-le-cedre/images/squelette/boutons.gif) 0 0 no-repeat;
}

ul.navigation li:hover {
    background-position:0 -40px;
}


ul.navigation li a {
    padding: 0;
}

Et le code XHTML/PHP :

Code : Tout sélectionner

<?php
$tmp_fr = array('Précédent','Accueil','Index','Haut de Page','Suivant');
$tmp_en = array('Previous','Homepage','Index','Top','Next');
$tmp = ${'tmp_'.$lang};
?>


<ul class="navigation">

<!-- PRECEDENT -->
    <li><a href="javascript: history.go(-1)" class="navig">
        <img src="http://127.0.0.1/restaurant-le-cedre/images/squelette/retour.gif" title="<?php print($tmp[0]); ?>" alt="<?php print($tmp[0]); ?>" />
        </a>
    </li>

<!-- ACCUEIL -->
    <li><a href="<?php echo ('/accueil.php?lang='.$lang); ?>" class="navig">
        <img src="http://127.0.0.1/restaurant-le-cedre/images/squelette/cedre.gif" title="<?php print($tmp[1]); ?>" alt="<?php print($tmp[1]); ?>" />
        </a>
    </li>
    
<!-- INDEX -->
    <li><a href="/index.html" class="navig">
        <img src="http://127.0.0.1/restaurant-le-cedre/images/squelette/home.gif" title="<?php print($tmp[2]); ?>" alt="<?php print($tmp[2]); ?>" />
        </a>
    </li>
    
<!-- HAUT DE PAGE -->
    <li><a href="#haut_page" class="navig">
        <img src="http://127.0.0.1/restaurant-le-cedre/images/squelette/hautpage.gif" title="<?php print($tmp[3]); ?>" alt="<?php print($tmp[3]); ?>" />
        </a>
    </li>

<!-- SUIVANT -->
    <li><a href="javascript: history.go(+1)" class="navig">
        <img src="http://127.0.0.1/restaurant-le-cedre/images/squelette/suivant.gif" title="<?php print($tmp[4]); ?>" alt="<?php print($tmp[4]); ?>" />
        </a>
    </li>
    
</ul>

[sylvain]

Un p'tit up ! N'a vraiment personne pour m'aider ?

[Elzen]

Ça va, laissez-moi le temps de revenir de vacances

Plus sérieusement, je n'ai lu qu'en diagonal, donc le comment corriger, je suis pas sûr, mais le pourquoi, je peux répondre: la balise <li> ("list-item") dispose d'un display particulier ("list-item" aussi, me semble-t-il), qui n'est pas prévu pour être changé (sauf pour "none", éventuellement). C'est un peu comme si tu changeais ça sur un <td>, ce n'est pas vraiment le genre de choses pour lequel la balise est prévue, et ça vire complêtement sa spécificité.

Pour avoir tout "correctement" sur la même ligne, je vois deux solutions: soit faire plusieurs listes <ul> ne contenant chacune qu'un seul élément <li> (un peu "lourd", et je ne sais pas si ça correspondrait avec ton menu CSS), soit changer de structure.

[sylvain]

Ta remarque est judicieuse mais pourtant, ça fonctionne !

Voir là : http://css.alsacreations.com/xmedia/exe ... menu4.html
(D'où j'ai tiré mon code source d'ailleurs)


Finalement, en reprenant le code source d'ALSACREATION, je me suis aperçu que leur tutoriel indiquait "display:inline;" alors que leur code source indiqué "float:left;"

Du coup, ça m'a paru évident et ça a corrigé le "bug" d'affichage ! Ca marche maintenant !

Merci Arkseth !

[EricDesMontagnes]

Pour info voici le code que j'utilise pour les onglets sur LCC. Normalement il faudrait que je rajoute une partie pour la compatibilité avec IE6 mais je ne l'ai pas fait car maintenant pratiquement tous les visiteurs ont soit Firefox, soit IE7 (avec ça ça fait 95% des visiteurs, le reste c'est tous les autres navigateurs).
Bref :

Code : Tout sélectionner

/* ######### CSS for Shade Tabs. Remove if not using ######### */
.shadetabs {
 padding: 3px 0;
 margin-left: 0;
 margin-top: 1px;
 margin-bottom: 0;
 list-style-type: none;
 text-align: left;
 font-family: "Segoe UI", Verdana, Arial;
 font-size: 12px;
 font-weight: normal;
}
.shadetabs li {
 display: inline;
 margin: 0;
}
.shadetabs li a {
 text-decoration: none;
 position: relative;
 z-index: 1;
 padding: 3px 7px;
 margin-right: 3px;
 border: 1px solid #778;
 color: #000000;
 background-image: url(/lacouronne/tabs/shade.jpg);
 background-repeat: repeat-x;
 background-position: left top;
 font-family: "Segoe UI", Verdana, Arial;
 font-size: 12px;
 font-weight: normal;
}
.shadetabs li a:visited {
 color: #000000;
}
.shadetabs li a:hover {
 background-image: url(/lacouronne/tabs/shadeactive.jpg);
 color: #000000;
}
.shadetabs li a.selected { /*selected main tab style */
 position: relative;
 top: 1px;
}
.shadetabs li a.selected { /*selected main tab style */
 background-image: url(/lacouronne/tabs/shadeactive.jpg);
 border-bottom-color: black;
}
.shadetabs li a.selected:hover { /*selected main tab style */
 text-decoration: none;
}
.tabcontent {
 display:none;
}
 @media print {
.tabcontent {
 display:block !important;
}
}
 

[sylvain]

Tu codes les textes en px, comme moi...

J'me posais la question de l'intérêt de coder en em...

[Elzen]

La relativité.

em est une taille relative, ce qui signifie d'une part que la taille du texte dans une balise dépend de celle dans la balise la contenant, et d'autre part que le navigateur peut plus facilement changer la taille d'affichage pour les malvoyants. (En fait, les navigateurs peuvent changer les tailles en px aussi, mais c'est un abus.) Bref, em est l'unité encouragée pour l'accessibilité.

[sylvain]

C'est bien ce que j'avais compris alors... Noté pour l'héritage dans la boîte contenante, je n'avais bien saisi cette partie là...

Donc je poursuivrai les modifications sur le site plus tard, en changeant plusieurs caractéristiques... Pour l'instant, j'essaye de trouver un autre moyen d'aligner en face du texte situé dans deux "colonnes DIV" d'une même boîte...

Encore merci !

[EricDesMontagnes]

Bref, em est l'unité encouragée pour l'accessibilité.

C'est bien vrai, cependant ce n'est pas toujours facile à mettre un site en place avec uniquement des em... beaucoup de développeurs préfèrent le rendu de px et la simplicité plutôt que de galérer avec de em pour un % réduit de personnes... C'est dommage...

[Eleglin]

Les px présentent un intérêt important pour les "largeurs fixes". par exemple, si je fais un site avec une largeur de 780 px, je suis à peu sûr que cela passera sur la plupart des écrans. Si l'écran est plus large que 800 px, vous aurez des bordures à droites et gauche, mais la page affichée le sera toujours sur 780 px. Inversement, je vous laisse imaginer l'effet d'une largeur de page de 1200 px sur un écran de 800 px de large
Le hic, c'est qu'on part vers d'un côté les ultraportables avec des écrans de 800px et de l'autre avec des écrans de 22 pouces et une résolution de 1600 px (sauf erreur de ma part, car j'en ai pas encore utilisé, mais j'imagine que ça doit être à peu la résolution de ce type d'écran). Pour les écrans de 22', ça fera donc de très GROSSES marges...

Les em sont essentiels pour définir la taille des caractères. Si les caractères sont définis en em ( -> une taille relative), il est possible de les aggrandir/réduire avec la fonction appropriée du navigateur. Dans le cas où tes caractères sont définis en px, ben ils resteront toujours à la même taille, et si un malvoyant essaie d'aggrandir le texte, il ne pourra pas.. et donc ne verra pas bien.
Les em peuvent aussi être utilisés sur des largeurs de page, ou des dimensions d'image, et là, il parait que c'est le pied : tout est censé s'adapter à l'écran de votre visiteur, et de ses souhaits d'aggrandissement/réduction.
Je ne vois qu'un pépin majeur aux tailles définies en em, cela concerne les éléments ayant un arrière plan défini à partir d'une image. à ma connaissance, il n'existe pas de propriétés CSS pour personnaliser la taille d'une image en arrière plan. Conséquence prévisible : Lorsque des blocs avec une image d'arrière plan sont définis avec une taille en em, l'image de fond risque soit d'être tronquée, soit d'être mosaiquée en fonction de la taille de votre écran. Et là, c'est le drame pour la mise en page...

La largeur d'écran fixe et les caractères définis avec une taille relative, voilà actuellement mon crédo.

[sylvain]

Je ne vois qu'un pépin majeur aux tailles définies en em, cela concerne les éléments ayant un arrière plan défini à partir d'une image. à ma connaissance, il n'existe pas de propriétés CSS pour personnaliser la taille d'une image en arrière plan. Conséquence prévisible : Lorsque des blocs avec une image d'arrière plan sont définis avec une taille en em, l'image de fond risque soit d'être tronquée, soit d'être mosaiquée en fonction de la taille de votre écran. Et là, c'est le drame pour la mise en page...

C'était bien (et ça l'est toujours !) mon soucis... Les images de fond, ça n'passe pas... Pas vu non plus d'amélioration du côté du CSS3 pour cela...


Fond tronquée ou dépassant du cadre (IE), ça, c'est certain !
Fond en mosaïque, pas pour moi, je définit toujours un "no-repeat" dans ma balise background.

Ceci dit, une idée m'était venu récemment à propos des images de fond... Pas encore eu le temps de tester depuis !
Vu qu'on peut définir leur taille "width" et "height" dans une feuille de style... Peut-être est-il possible de lui faire hériter de la taille de sa boîte contenante avec un truc du genre :

Code : Tout sélectionner

div { width : 20% ; } 

(admettons !)

puis ceci :

Code : Tout sélectionner

div img.fond { width : 100% ; }

Cela nécessite d'avoir une image de qualité et plus grande donc en cas de zoom (mais affichée en petit) ! Car sinon, ça la pixellisera... (Bon, ça ok, c'est pas un soucis !)

Bonjour quand même la prise de tête !

J'ai vu que certain ont "contourné" le problème soit :

1. En générant leur feuille de style avec du php.
2. En sélectionnant la feuille de style correspondante à la résolution détectée. (avec feuille alternative)
   

Bon, c'est sûr, ça ne règle pas définitivement le contre-temps !

En tout cas, je réfléchis toujours à la question à mes heures "perdues lorsque j'en ai le temps !"

Je suis preneur de toute idée !

-------------------------------------------------------------------------
On devrait renommer ce topic avec un truc du genre : "Ma PHP/CSS-prise de tête..." LOL !!!

[Eleglin]

Le fait de substituer un background par une balise img ne fait que contourner le problème, étant donné que tu rajoutes alors une balise inutile dans ton code HTML pour un simple problème d'affichage et que, de ce fait, tu ne fais plus une parfaite séparation contenu/mise en page. Tu vois ce que je veux dire ?
En plus ça va t'obliger à faire "disparaitre" l'image dans les feuilles de style destinées aux imprimantes, PDA, télétype...
C'est un peu comme gérer les espaces vides avec des gifs transparents, c'est une bidouille qui était à la mode dans les années 90 (lors de la mode des tableaux), mais qui est complètement obsolète aujourd'hui.

background-size pourrait voir le jour avec CSS3. Sachant que le support de CSS2 pâr les navigateurs a pris un certain temps, et que CSS3 n'est pas achevé, il faudra faire preuve de beaucoup de patience en attendant..

[sylvain]

Le fait de substituer un background par une balise img ne fait que contourner le problème, étant donné que tu rajoutes alors une balise inutile dans ton code HTML pour un simple problème d'affichage et que, de ce fait, tu ne fais plus une parfaite séparation contenu/mise en page. Tu vois ce que je veux dire ?

Absolument !

En plus ça va t'obliger à faire "disparaitre" l'image dans les feuilles de style destinées aux imprimantes, PDA, télétype...

Pour l'instant, je ne m'occupe que de sites à caractères information et présentation + téléchargements de documents (Cours, Exercices, TP, TD, Diaporamas, Menus de restaurant, Album Photo, etc...).
Rien d'utile à un PDA, Mobile, ni pour l'impression (Vu que les documents sont préformatés).

C'est un peu comme gérer les espaces vides avec des gifs transparents, c'est une bidouille qui était à la mode dans les années 90 (lors de la mode des tableaux), mais qui est complètement obsolète aujourd'hui.

La bonne blague !!!

background-size pourrait voir le jour avec CSS3. Sachant que le support de CSS2 pâr les navigateurs a pris un certain temps, et que CSS3 n'est pas achevé, il faudra faire preuve de beaucoup de patience en attendant..

Oui ! Rien de plus à faire ! *croise les bras*


En attendant les p'tits loups, je vous ai déniché ce superbe site ! Une mine d'or en CSS que tout le monde doit connaîrte je pense !

CSS-Play (Anglophobes s'abstenir sauf si vous faites du CSS ! LOL ! )


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

HS : Ca fait 3 fois ce matin que je retape ce post... Où disparaissent-il ????

[Eleglin]

background-size est supporté par Safari 3.0+ et Opéra 9.0+ (ou 9.5+) sous la forme -o-background-size ou -webkit-background-size
Mais pas encore par IE. Si cela devait être implanté dans IE8 (simple hypothèse); cela permettrait une véritable petite révolution.

[sylvain]

Encore faut-il qu'IE passe aux recommandations ! Mais vu que ce ne sont que de recommandations, ils ont le droit d'implémenter leur propre code... Vu qu'ils restent majoritaires en part de marché...

Pour preuve, on vient de regarder NCIS sur M6replay.fr... Ben il a fallu réutiliser IE parce que leur site ne prend pas en charge les autres navigateurs...

Y'a encore du chemin moi je dis !