28173 sujets

CSS et mise en forme, CSS3

Tableau et css

Bonjour à tous!

Après avoir passé de longues heures à essayer de mettre en place un style de tableau dans mon css sans succès, je m'en remet à vous, en espérant trouver un peu d'aide Smiley confused .

Je m'explique, sur la page que voici :

http://regnum-fr.darkeagle.info/index/page.php?14

Je souhaiterais que le texte se mette sous forme de tableaux.
Ces tableaux, je leur ai attribué des div class : 

.quests6{float:left;text-align: left;font-size: 17px;padding:5px 5px 5px 5px;width:75px;height:187px;background-color: #BBB;border: 1px #BBB  solid;margin: 0 0 10px 5px;font-weight:bold}
.quests7{float:left;text-align: left;padding:5px 5px 1px 5px;width:140px;background-color: #CCC;border: 1px #BBB  solid;border-bottom: 0px;margin: 0px;}
.quests8{float:left;text-align: left;padding:5px 5px 1px 5px;width:298px;background-color: #CCC;border: 1px #BBB  solid;border-bottom: 0px;margin: 0px;}


Que j'ai insérés dans le style de mon theme, et dans le style de mon gestionnaire de Css (e107) pour etre sur...

Le code de la page que je construit est le suivant :

[html] 
<head>

<link rel='stylesheet' href='http://regnum-fr.darkeagle.info/index/e107_themes/WoWAllianceThemebyBlackZecke/style.css' type='text/css' media='all' />
<link rel='stylesheet' href='http://regnum-fr.darkeagle.info/index/e107_files/e107.css' type='text/css' />

</head>

<body>

<div class="quests6">Level 1<br /></div> <div class="quests7">Questname: </div><div class="quests8">The Prophecy</div> <div class="quests7">Donnée par: </div><div class="quests8">Sahjriid</div> <div class="quests7">Lieu: </div><div class="quests8">Initiation Summit</div>  <div class="quests7">NPC Position X: </div><div class="quests8">4996</div> <div class="quests7">NPC-Position Z: </div><div class="quests8">632</div> <div class="quests7">Or: </div><div class="quests8">0</div> <div class="quests7">XP: </div><div class="quests8">25</div> <div class="quests7">Objet: </div><div class="quests8">Aucun</div> 

</body>
[/html]



Je pense ne rien avoir oublié, et pourtant comme vous le voyez, le texte du tableau n'est pas mis en forme.

J'ai testé en local et ça apparait de la meme manière, donc pas un conflit entre les deux styles css, ou avec e107.

Peut etre avec que mes div class sont invalides? Je ne sais vraiment pas comment faire...

Cette solution me paraissait la plus simple pour traiter plusieurs centaines de quetes. Je n'avais qu'à insérer le div class et la mise sous forme de tableau aurait été automatique. J'avais aussi pensé à du javascript ou des tableaux à partir du bdd mysql, mais mes connaissances sont insuffisantes...

Smiley decu

Je vous remercie d'avance pour votre attention Smiley cligne

PS: si vous aimez les mmorpg, n'hésitez pas à essayer le jeu pour lequel mon site est dédié, il est totalement gratuit et tourne sous linux Smiley smile
Modérateur
Bonjour

essai en "augmentant" le poids de tes arguments , en ciblant plus precisement tes div .Plus la cible est precise , plus elle prend de poids .
en faisant div.quest6 , les regles prevaleront sur .quest6 , et ainsi de suite (en remontant sur les ascendant)


comme ceci par exemple:
td.Topblank  .quests6 {attribut:valeur;}



GC
Je comprend pas pourquoi tu utilise pas simplement un vrai tableau.

Lorsqu'on dit de faire un site sans tableaux mais avec des css, ont parle des tableaux qui sont utilisé pour une autre fonction qu'un tableau, comme pour le design du site. Par contre, les informations que tu veut mettre en tableau son selon moi tout à fait en droit d'être mis sous forme de tableau. Peut-être que je me trompe, mais je crois que tu te complique la vie pour rien a ne pas vouloir de tableau pour ce genre de données.
@gcyrillus

Merci de ta réponse, cependant je ne comprend pas très bien, où dois-je insérer le code que tu m'as donné? Smiley confused

@gizz

Ce que je cherche c'est une manière simple d'insérer mes données dans un tableau, avec les divs, le paramètres du tableau sont prédéfinis, je n'ai qu'à appeler le div et mes données s'y mettront d'elles même.

Il est certain que mes données sont destinées à un tableau Smiley smile

Si tu peux me donner un moyen rapide et simple d'organiser mes données en tableau je t'en serais reconnaissant Smiley cligne
Tu va chercher tes données dans une base de données ou tes pages seront déjà en HTML seulement mais tu veut un template facile à modifier? Explique plus en détails pour que je puisse voir la meilleur façon de t'aider.

J'ai vérifier la source directement sur ton site et je vois que tu abuse déjà des tableaux. Ce que je ne comprend pas c'est que tu utilise plusieurs tableaux du genre

<table>
<tr>
<td>
Contenu
</td>
</tr>
</table>


À quoi sa sert d'utiliser un tableau si c'est pour y mettre 1 seule ligne et 1 seule colonne?

Par exemple cette partie de code:

<table style='width:100%' cellpadding='0' cellspacing='0'>
<tr>
<td class='topblank'><div class="quests6">Level 1<br /></div> <div class="quests7">Questname: </div><div class="quests8">The Prophecy</div> <div class="quests7">Donnée par: </div><div class="quests8">Sahjriid</div> <div class="quests7">Lieu: </div><div class="quests8">Initiation Summit</div>  <div class="quests7">NPC Position X: </div><div class="quests8">4996</div> <div class="quests7">NPC-Position Z: </div><div class="quests8">632</div> <div class="quests7">Or: </div><div class="quests8">0</div> <div class="quests7">XP: </div><div class="quests8">25</div> <div class="quests7">Objet: </div> Aucun</td>

</tr>
</tabla>

Nettoyé un peu sa donne:

<div class='topblank'>
<div class="quests6">Level 1</div>
<div class="quests7">Questname: </div>
<div class="quests8">The Prophecy</div> 
<div class="quests7">Donnée par: </div>
<div class="quests8">Sahjriid</div>
<div class="quests7">Lieu: </div>
<div class="quests8">Initiation Summit</div>
<div class="quests7">NPC Position X: </div>
<div class="quests8">4996</div>
<div class="quests7">NPC-Position Z: </div>
<div class="quests8">632</div>
<div class="quests7">Or: </div>
<div class="quests8">0</div>
<div class="quests7">XP:</div>
<div class="quests8">25</div>
<div class="quests7">Objet: </div>
<div class="quests8">Aucun</div>
</div>

Modifié par gizz (30 Sep 2007 - 16:21)
Non je n'ai pas de base de donnée, j'insère moi même les données en html.
C'est pour ça que j'aurais aimé utiliser les div afin de créer toujours le même type de tableau ou je n'aurais que les données de chaque rubrique à changer.

C'est vrai que ça me prendra quand meme pas mal de temps, j'ai à peu près 200 tableaux du meme type mais avec des données différentes à faire.

Tu me conseillerais plutot de faire une base de donnée?
Si oui comment l'organiser, et comment appeler les données qu'elle contient sous forme d'un tableau?

J'aimerais en fait avoir un résultat similaire à cette page :

http://regnum-online.de/quests/quests-ignis.html

Seulement, les données devraient être modifiables facilement, pour ajouter, modifier, supprimer une quête.

Je débute, donc j'avais tenté d'utiliser des divs comme sur ce site.


Merci beaucoup de tes conseils Smiley smile
Voici le template que ta besoin en tableau:


<table cellspacing=0>
<tr>
<td rowspan=8 class="quests6" >{Level ici}</td>
<td class="quests7">Questname:</td>
<td class="quests8">{nom ici}</td>
</tr>
<tr>
<td class="quests7">Donnée par: </td>
<td class="quests8" >{nom ici}</td>
</tr>
<tr>
<td class="quests7">Lieu:</td>
<td class="quests8">{lieu ici}</td>
</tr>
<tr>
<td class="quests7">NPC Position X:</td>
<td class="quests8">{position x ici}</td>
</tr>
<tr>
<td class="quests7">NPC-Position Z:</td>
<td class="quests8">{position y ici}</td>
</tr>
<tr>
<td class="quests7">Or:</td>
<td class="quests8">{or ici}</td>
</tr>
<tr>
<td class="quests7">XP:</td>
<td class="quests8">{xp ici}</td>
</tr>
<tr>
<td class="quests7">Objet:</td>
<td class="quests8">{objet ici}</td>
</tr>
</table>


Et la feuille de style reste la même suffit d'enlever la valeur height de quests6. Si tu a des tableaux avec un nombre différent de ligne il suffit de changer le chiffre du rowspan. Et de copier ou enlever des blocs 

<tr>
<td class="quests7"></td>
<td class="quests8"></td>
</tr>


Avec une base de donnée, il faudrait un champ pour chaque information. Du genre:
id, level, questname, donneur, lieu, xposition, yposition, or, xp, objet

il faut ensuite en php récupéré les donnée de chaque quête avec une requête. Puis à l'aide d'un while tu inclus les valeurs dans le même template que ci-dessus. Pour gérer les quêtes tu peut te créer une page d'ajout et de suppression de quêtes. Tout ça demande tout de même une bonne connaissance du php et de mysql.
Modifié par gizz (30 Sep 2007 - 18:36)
Merci beaucoup pour ton aide, c'est vraiment super!

L'idée d'une base de donnée semble etre encore plus simple alors? (enfin, d'un point de vue flexibilité, pas création)

Je veux pas trop t'en demander, mais tu pourrais me guider un peu plus pour la solution de faire une base de donnée appelée par php?

Si ça représente vraiment trop de boulot je me contenterais de la solution que tu m'as gentillement donnée ou je me renseignerai via google Smiley cligne

Encore merci
Modifié par Magni (30 Sep 2007 - 19:30)
Juste un lien interessant d'Openweb sur la construction de tableaux de données accessibles et respectants les standards avec les CSS :
Là Smiley cligne

Pour la récupération de données via PHP MySQL pour implémenter ce tableau...je passe la main Smiley lol
Pour la méthode avec une base de données il te faut premièrement créer ta base de donnée si tu en a pas déjà une (généralement un hébergement contient une base de donnée). Il faudra ensuite te créer une table dans ta base de données. Tout ça demande d'apprendre comment marche en gros les bases de données si tu ne connais pas ça. Il existe beaucoup de tutoriaux et c'est pas trop difficile (J'ai appris 100% de ce que je sais en développement Web par moi-même en fouillant sur le web). Pour la structure de ta table sa devrait ressembler à ça:


CREATE TABLE `quetes` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `level` int(10) collate utf8_unicode_ci NOT NULL default '',
  `questname` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  `donneur` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  `lieu` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  `positionx` int(10) collate utf8_unicode_ci NOT NULL default '',
  `positiony` int(10) collate utf8_unicode_ci NOT NULL default '',
  `or` int(10) collate utf8_unicode_ci NOT NULL default '',
  `xp` int(10) collate utf8_unicode_ci NOT NULL default '',
  `objet` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  PRIMARY KEY  (`id`)
)


Via PhpMyAdmin tu pourra ajouter, modifier et supprimer des quêtes.

Dans ton code PHP il te faudra un système semblable à ceci:


//Informations de connexion à la base de données MYSQL
//----------------------------------------------------
$mysql['host'] = 'localhost' ; 							
$mysql['login'] = 'tonlogin' ;		
$mysql['pass'] = 'tonpass' ; 		
$mysql['dbname'] = 'nom de la base de données' ; 

//Connection à la base de données
$db = mysql_connect($mysql['host'],$mysql['login'],$mysql['pass']) or die (mysql_error());  
mysql_select_db($mysql['dbname'],$db) or die (mysql_error());
//----------------------------------------------------

//Collecte des informations sur la base de données et affichage
//----------------------------------------------------
$requete = 'SELECT * FROM quetes ORDER BY level ASC';
$resultat = mysql_query($requete) OR die(mysql_error());
while($ligne = mysql_fetch_array ($resultat))
    {
    echo'
    <table cellspacing=0>
    <tr>
    <td rowspan=8 class="quests6" >Level '.$ligne['level'].'</td>
    <td class="quests7">Questname:</td>
    <td class="quests8">'.$ligne['questname'].'</td>
    </tr>
    <tr>
    <td class="quests7">Donnée par: </td>
    <td class="quests8" >'.$ligne['donneur'].'</td>
    </tr>
    <tr>
    <td class="quests7">Lieu:</td>
    <td class="quests8">'.$ligne['lieu'].'</td>
    </tr>
    <tr>
    <td class="quests7">NPC Position X:</td>
    <td class="quests8">'.$ligne['positionxl'].'</td>
    </tr>
    <tr>
    <td class="quests7">NPC-Position Z:</td>
    <td class="quests8">'.$ligne['positiony'].'</td>
    </tr>
    <tr>
    <td class="quests7">Or:</td>
    <td class="quests8">'.$ligne['or'].'</td>
    </tr>
    <tr>
    <td class="quests7">XP:</td>
    <td class="quests8">'.$ligne['xp'].'</td>
    </tr>
    <tr>
    <td class="quests7">Objet:</td>
    <td class="quests8">'.$ligne['object'].'</td>
    </tr>
    </table>';
    }
    
//Fermeture de la connexion
//----------------------------------------------------
mysql_close($connexion);


Il peut y avoir des erreurs j'ai fait sa vite et en php un seul oubli fait tout planter.

Par la suite avec un peu plus de connaissance tu pourra ajouter un système automatique de page avec par exemple 20 quêtes par pages. Tu pourra également faire un système d'affichage selon des critères. Par exemple... je veut toutes les quêtes donnée par tel ou tel personne... toutes les quêtes de tel lieux... les quêtes en ordre du plus de XP au moins de XP, etc...
Modifié par gizz (30 Sep 2007 - 20:42)
@Chasseur de 1/2 Kiwiz

Merci pour ton site, il me sera certainement util Smiley smile

@gizzi,

J'ai réussi à créer la base de donnée (waw)

Ensuite j'ai créé la page php avec le code que tu m'as conseillé, cependant, ça ne fonctionne pas, le code s'affiche en clair, j'ai certainement du oublier certaines balises?

Je te remercie pour ton aide, j'essaierai d'y voir un peu plus clair demain!

Bonne nuit Smiley langue
il te suffit de mettre le code dans une balise php comme ceci:


<?php

Code

?>


Oublie pas de changer les variables de connexion à la base de données dans le début du script.
Modifié par gizz (01 Oct 2007 - 02:26)
Sujet clos
Aller à