CSS pour un tableau dans du XHTML

Version imprimable

14/06/2010, 00h14
darkterreur

CSS pour un tableau dans du XHTML
Bonjour,
je me permet d'ecrire ici car je désire réaliser un tableau d'une seul cellule qui me permet d'afficher un nombre.
Le probleme est que je n'arrive pas a appliquer du css sans avoir recourt a une feuille appart.
Je désire que l'intégralité soit fais dans le code html, le but premier est evidement de realiser un rectangle ou mon nombre apparait dedans.

voici mon ectrait de code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <?php echo "nombre de visite !! <br/>"; //on affiche le nombre de visite total echo " <table border='1'> <tr> ".$nb_visit." </tr> </table> "; ?>
Merci d'avance pour votre aide
bonne soirée

Salut,

Citation:

Envoyé par darktererur

je désire réaliser un tableau d'une seul cellule

Je te propose quelque chose de plus simple : L'utilisation de <div>

Citation:

Envoyé par darktererur

je n'arrive pas a appliquer du css sans avoir recourt a une feuille appart.

Nous définissons la classe "visites" avec le style voulu entre les balises <head> et </head>.

Exemple "à l'arrache". À adapter bien-sûr
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <style type="text/css"> </style>
Et dans le corps (entre <body> et </body>) de la page...
Code:

1 2 3 echo "nombre de visite !! <br/>"; //on affiche le nombre de visite total echo '<div class="visites">'.$nb_visit."</div>\n";

14/06/2010, 11h43
devyan

Bonjour,

Il manque un niveau d'élément dans ta table TABLE/TR/TD ;)
14/06/2010, 16h32
darkterreur

merci a vous deux pour vos repponse

effectivement devyan cela fonctionne.

Eric2a je suis intrigué par ta réponse, je comprend se que tu fait tu déclare une div au-quelle tu donne des propriété dans le < head >.
seulement dans ma page je ne dispose que de balise php, elle est donc créer afin d'être appeler par un include dans une page ou il y a un < head >, un < body >
donc pour que ma page soit facilement utilisable je dois y mettre le design directement dans le php. Bien que ta méthode soit très intéressante.

Est t'il possible de donner une taille plus grande que le nombre que j'affiche, a la case de mon tableau?

merci d'avance pour vos réponses.
15/06/2010, 00h53
Eric2a

Citation:

Envoyé par darktererur

je suis intrigué par ta réponse...

Le pire c'est que (n'ayant même pas vu le <td> manquant) j'étais content de moi :D

Citation:

Envoyé par darktererur

Est t'il possible de donner une taille plus grande que le nombre que j'affiche, a la case de mon tableau ?

Avec les attributs width, cellspacing et cellpadding.
15/06/2010, 11h32
darkterreur
Merci Merci
j'ai tester quelque possibilité et je me retrouve avec ce code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <?php echo " <table border='5 solid black' width='100' text-align='center'> <tr > <td > ".$nb_visit." </td> </tr> </table> "; ?>
bon centrer mon chiffre ne fonctionne pas
et je me retrouve avec un cadre en 3d je ne sais pas d'ou il sort
j'ai tester de copier/coller la ligne de css dans le < tr > et dans le < td > sans résultat.

Merci d'avance pour vos informations
15/06/2010, 11h55
devyan

Citation:

Envoyé par darktererur

bon centrer mon chiffre ne fonctionne pas
...
je me retrouve avec un cadre en 3d je ne sais pas d'ou il sort

C'est le cadre par défaut du tableau (TABLE), il faut écrire

Code:

<table style="border:5px solid black; width:100%; text-align:center;">

devyan
15/06/2010, 13h21
darkterreur

merci beaucoup
je comprend mieux la syntaxe pour appliquer le css au sein du html.

Cependant je cherche une police a appliquer au mon nombre, mais je ne trouve pas comment numériser mon nombre, mais quelque chose me dis que je vais devoir faire appel au javascript maintenant non?
15/06/2010, 16h53
devyan

Citation:

Envoyé par darktererur

merci beaucoup
je comprend mieux la syntaxe pour appliquer le css au sein du html.

Cependant je cherche une police a appliquer au mon nombre, mais je ne trouve pas comment numériser mon nombre, mais quelque chose me dis que je vais devoir faire appel au javascript maintenant non?

???

Si tu veux appliquer une police tu peux toujours utiliser une TTF installée, les polices EMBEDED ne sont plus gérées en CSS entre les version 2.1 et 3 (je crois)

Sinon, tu as effectivement la possibilité de remplacer ton nombre "texte" par une(des) image(s). Mais là pas besoin de javascript, tu peux agir directement au niveau php ;)

devyan
15/06/2010, 22h50
darkterreur

kk j'ai du mal a tout comprendre je ne connais pas tout de ce coté la.
une TTF embarqué je suppose qu'il s'agit dune bibliothèque? quand a remplacer mon nombre par des images, cela a l'air compliquer non?
je veux dire mon nombre est le résultat d'un compteur donc il va changer constamment et donc avoir plusieurs chiffres.

Mais il y a surement un truc qui m'échappe.

Merci d'avance

1 pièce(s) jointe(s)

Bonjour,

J'ai cru comprendre que tu génères tes pages avec PHP.
De ce fait il t'est assez facile de convertir un nombre en N chiffres.
Tu pourras donc générer du code du genre

Code:

<div id="compteur"><div class="dig0"></div><div class="dig1"></div><div class="dig2"></div><div class="dig3"></div><div class="dig4"></div><div class="dig5"></div><div class="dig6"></div><div class="dig7"></div><div class="dig8"></div><div class="dig9"></div></div>

Reste plus qu'à y appliquer une CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 #compteur { border:thin red solid; width:320px; /*height:48px;*/ line-height:48px; } #compteur div { background-image:url(./chiffres.jpg); background-repeat:no-repeat; width:32px; height:40px; line-height:48px; font-size:0.1em; display:inline; display:inline-block; } .dig0 { background-position:left -36px; } .dig1 { background-position:left -86px; } .dig2 { background-position:left -137px; } .dig3 { background-position:left -186px; } .dig4 { background-position:left -237px; } .dig5 { background-position:left -287px; } .dig6 { background-position:left -336px; } .dig7 { background-position:left -387px; } .dig8 { background-position:left -436px; } .dig9 { background-position:left -486px; }
Qui utilise une image de "police" (comme chiffres.jpg qui est jointe)

devyan

16/06/2010, 16h18
darkterreur

D'accord cependant comment les chiffres de mon nombre savent dans qu'elle
< div > ils se situent?
de plus si je me trompe avec ce système je suis obliger d'avoir un fichier css de liée mais je n'ai pas de < header > c'est uniquement entre deux balise php
ce code css, je peut tout de même l'intégrer dans le php?

merci pour le temps que vous m'accorder

Si tu regardes le CSS fourni en exemple tu vas voir des classes nommées ".digX" X est une valeur de 0 à 9 qui correspond à un chiffre.

Code:

<div class="dig3"></div><div class="dig8"></div><div class="dig7"></div><div class="dig2"></div>

Dans le code HTML, tu va retrouver ces étiquettes dans l'attribut "class".

Donc dans ton code PHP, tu prends ta valeur de compteur et tu la découpes.

Tu peux ajouter ces déclarations dans la css "globale" liée à tes pages ou si tu préfères, tu peux placer directement l'équivalent dans l'attribut style des DIV du compteur.
Code:

1 2 3 4 5 <div style="width:320px; line-height:48px;"><div style="background-image:url(./chiffres.jpg); background-repeat:no-repeat; width:32px; height:40px; line-height:48px; font-size:0.1em; display:inline; display:inline-block; background-position:left -36px; "></div> ... </div>
Je n'ai remis que le cas d'affichage du zéro

devyan

17/06/2010, 08h40
darkterreur

kk si je comprend bien je découpe les caractères de mon nombres
2573 --> 2 5 7 3
et pour chaque caractère je fais des if ?
if caractère 1 = 1 alors on applique la < div > qui correspond

voir même on peut dans les if uniquement modifier la variable $target,
et appliquer le même code pour tous avec la variable $target qui leur correspond non?

c'est plutôt compliquer pour appliquer un peu de graphique a un tout petit bout de truc.
17/06/2010, 14h34
Eric2a
Re,

Je vois qu'on c'est mis aux < div > ;)

Pour la démo, nous considérons que tu as déjà ajouté le CSS fourni par devyan dans la feuille de style "globale" ou dans la page HTML incorporant le compteur.

Ainsi, pour

Code:

$nb_visit=4096;

Nous devons obtenir

Code:

<div id="compteur"><div class="dig4"></div><div class="dig0"></div><div class="dig9"></div><div class="dig6"></div></div>

Pour ce faire, nous pouvons utiliser ce bout de code PHP
Code:

1 2 3 4 $compteur=(string)$nb_visit; $digitStr=''; for($i=0;$i<strlen($compteur);$i++)$digitStr.='<div class="dig'.$compteur[$i].'"></div>'; echo '<div id="compteur">'.$digitStr."</div>\n";
17/06/2010, 14h38
devyan

Citation:

Envoyé par Eric2a

Je vois qu'on c'est mis aux < div > ;)

Moi ? Bien sûr, mais pas à toutes les sauces :P
Quand on me demande une solution à partir d'un tableau je réponds avec un tableau.

:ccool:

devyan
18/06/2010, 10h20
darkterreur

Et bien et bien je pense que nous avons fait le tour de la question,
cependant je trouve cela vachement difficile de réaliser du design tout de même

Je vous remercie pour votre attention et vos conseils.