Tableau Full CSS - Problème de conception

Version imprimable

24/03/2008, 12h46
rigolman

1 pièce(s) jointe(s)

Tableau Full CSS - Problème de conception

Bonjour à tous,

Merci par avance pour vos conseils et l'aide que vous pourrez m'apporter.

Mon problème n'est pas, au premier abord, complexe en soit mais j'ai un peu de mal du fait de mes connaissances basiques en CSS.

Merci d'ouvrir l'image ci-jointe afin de voir le tableau que j'aimerais reproduire en CSS.

En gros j'aimerais reproduire un tableau de 6 colonnes, et d'une dizaines de ligne avec la première et la dernière ligne grisé en background puis une ligne sur deux blanche et l'autre gris clair pour une lecture plus aisée.

L'autre problèmatique que je me pose est la suivante : Comment faire pour que tout une colone soit mise en valeur par un background plus foncé comme c'est le cas sur l'image ci-jointe pour la colonne "Visites" ?

On m'a dit que l'on pouvais faire heriter des classes et utiliser des TH au lieu des TR...

Si vous pouviez me donner un petit exemple de tableau dans ce style la, j'apprécierais !

Encore merci pour avoir pris le temps de me lire,

Alexandre
24/03/2008, 15h44
rigolman

2 pièce(s) jointe(s)

Ma Solution - Optimisation Possible ?

Re,

Voici ce que j'ai réussi à faire, cela correspond bien à ce que je souhaite par contre j'ai du faire énormément de class afin de ne pas avoir de doublon au niveau des bordure (bordure gauche, bas, haut...)

Y a t-il un moyen d'optimiser tout ça afin d'avoir moins de class ?

Ci-joint :
- Page HTML
- Feuille CSS

Merci pour vos conseils sur mes CSS

Alex.

J'ai regardé rapidement ton fichier CSS, en effet qu'il y a trop, je vais t'optimiser un peu tout de suite ;)

Edit : on vient de m'appeler, je dois y aller désolé, tu peux pour commencer, faire gagner un peu le nombre de ligne par exemple :

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
th.toprow {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #BBBBBB;
	border-right-color: #BBBBBB;
	border-bottom-color: #BBBBBB;
	border-left-color: #BBBBBB;
}
 
th.leftrow_end {
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-left-color: #DDDDDD;
	border-right-width: 1px;
	border-right-color: #DDDDDD;
}
 
th.bottomrow {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: none;
	border-top-color: #DDDDDD;
	border-right-color: #DDDDDD;
	border-bottom-color: #DDDDDD;
	border-left-color: #DDDDDD;
	border-top-style: none;
	border-bottom-style: none;
}

devient

Code:

1
2
3
4
5
6
7
8
9
10
11
th.toprow {
	border: solid 1px #bbb;
}
 
th.leftrow_end {
	border: solid 1px #ddd;
}
 
th.bottomrow {
	border: solid 1px #ddd;
}

En gardant exactement le même rendu...

Si personne ne te montre l'optimisation avant ce soir, je pourrai regarder (du moins si je ne serai pas pris ce soir)

24/03/2008, 15h54
rigolman

merci !

Merci beaucoup !

Je me disais aussi... il doit y avoir un moyen plus simple de définir des bordure fine sans passer par 50 classes ;)

La j'ai du en faire pour la ligne du haut, la ligne du bas, le milieu, et la bordure gauche !

Le problème c'est que lorsque je mettais une seule et meme bordure pour l'ensemble du "milieu", j'avais des doublons de ligne car mes deux classes se chevauchaient...
24/03/2008, 16h33
rigolman

3 pièce(s) jointe(s)

Merci pour ta réponse et ton début d'aide mais tes changements altèrent la design du tableau.

Regarde les deux captures Gif que je joint. Sur ton exemple, les lignes sont doubles à certains endroits...
- la premiere est ta version avec tes optimisations
- la seconde est ma version sans optimisations
- la troisieme est le resultat final souhaité (cf question plus bas)

Peut-être n'a tu pas fait attention car tu devais partir... ou alors je me suis mal exprimé !

Peut-etre que si tu as un peu de temps tout à l'heure tu pourras me donner d'autre indications.

D'autant plus que j'ai une autre problèmatique que je vais essayer de t'expliquer, et qui va compliquer encore plus le CSS si je ne peux pas l'optimiser !

En gros je voudrais ajouter une ligne au dessus de ce tableau (je pense que se sera un autre tableau se sera plus simple) afin de reproduire la ligne avec un height assez élevé que tu peux voir en image. (- la troisieme est le resultat final souhaité)

La problèmatique reste la même pour cette ligne, à savoir :
- avoir des lignes claires sur le coté droit et une sur le coté tout à fait à gauche
- ne pas en mettre en bas afin de garder la ligne plus foncé du premier tableau
- ne pas en mettre en haut pour avoir un autre tableau au dessus avec une ligne plus foncé...

Je ne sais pas si je suis très clair mais l'image parle d'elle meme...

Merci pour toutes les précisions que tu pourras m'apporter !

Alex.
25/03/2008, 10h03
rigolman

Plus personne ? Aucune idée pour limiter le nombre de classes ?
25/03/2008, 14h40
{F-I}

Désolé, hier je devais faire quelques choses avec mon pc et je ne pouvais pas ouvrir mon editeur... (ça explique pourquoi je reponds des autres sujets et pas le tien)

Bref, j'ai regardé et je ne pense pas qu'il y a d'optimisation possible vu que avec ma méthode pour réduire le nombre de ligne dans CSS n'a pas exactement le même rendu qu'au départ (en effet je n'avais pas fait attention)
25/03/2008, 16h13
rigolman

2 pièce(s) jointe(s)

Pourtant j'ai réussi à optimiser un peu en, regarde mes fichiers attachés...

ça fonctionne plutot bien, parcontre il reste un problème :
#tab_01 tr.bg1 {background-color: #E5E5E5; border: 1px solid #BBBBBB;}

J'essaie de faire passer cette couleur de bordure pour la premiere et la derniere ligne mais il ne veut pas la prendre en compte... peut-etre est-ce trop optimisé ?

Merci pour ton aide,

Alex.