CSS pour un tableau dans du XHTML

**darkterreur** · 14/06/2010, 00h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Eric2a** · 14/06/2010, 01h26

Salut,

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>

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style type="text/css"><!--
.visites {
display:block;
text-align:center; /* Texte centré */
margin:0px; /* Pas de marges exterieurs */
padding:4px; /* marges interieurs */
width:128px; /* 128 pixels de largeur */
height:24px; /* 24 pixels de hauteur */
border:1px #000 solid; /* bordure noir d' un pixel */
}
-->
</style>

Et dans le corps (entre <body> et </body>) de la page...

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**devyan** · 14/06/2010, 11h43

Bonjour,

Il manque un niveau d'élément dans ta table TABLE/TR/TD

**darkterreur** · 14/06/2010, 16h32

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.

**Eric2a** · 15/06/2010, 00h53

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

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.

**darkterreur** · 15/06/2010, 11h32

Merci Merci
j'ai tester quelque possibilité et je me retrouve avec ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**devyan** · 15/06/2010, 11h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

devyan

**darkterreur** · 15/06/2010, 13h21

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?

**devyan** · 15/06/2010, 16h53

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

**darkterreur** · 15/06/2010, 22h50

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

**devyan** · 16/06/2010, 10h44

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 html du compteur de valeur "0123456789" :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 par exemple :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**darkterreur** · 16/06/2010, 16h18

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

**devyan** · 16/06/2010, 16h42

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 exemple pour 3872 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 directement dans le style (bof) :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**darkterreur** · 17/06/2010, 08h40

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.

**Eric2a** · 17/06/2010, 14h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$nb_visit=4096;

Nous devons obtenir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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";

**devyan** · 17/06/2010, 14h38

Envoyé par Eric2a

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

Moi ? Bien sûr, mais pas à toutes les sauces

Quand on me demande une solution à partir d'un tableau je réponds avec un tableau.

devyan

**darkterreur** · 18/06/2010, 10h20

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.

CSS pour un tableau dans du XHTML

Tableau en CSS

Discussions similaires

Partager

Partager