Marge d'une cellule contenant une div

[ospreyyy]

Bonjour,

J'ai réalisé un tableau sous asp.net construit en vb.net.
Lorsque j'insérais des valeurs dans certaines cellules, les lignes se redimensionnaient.
La solution qui fonctionne est de mettre une div dans chaque cellule avec un position:fixed; dessus.

Mais je n'arrive pas à coller ma div contre les bords de ma cellule.
J'ai essayé :

Code :

1
2
3
float:left;
left:0px;
margin-left:0px;

Mais sans succès, ma div ne bouge pas ou se colle contre ma fenêtre et pas contre les bords de ma cellule..

Avez-vous une idée?

[ornitho13]

Salut,

a partir du moment où tu utilises un position:fixed, ton bloc est fixé par rapport à ton ecran, donc quand tu scrolles, le bloc scrolle en même temps.

Si tu ne veux pas que cela se redimmensionne, met des valeurs pour le width et le height et utilise la propriété overflow:hidden :

Code css :

1
2
3
4
 
width: 200px;
height: 200px;
overflow: hidden;

Par contre avec le overflow:hidden, si ton contenu est trop long, il sera caché.

[ospreyyy]

Envoyé par ornitho13

Salut,

a partir du moment où tu utilises un position:fixed, ton bloc est fixé par rapport à ton ecran, donc quand tu scrolles, le bloc scrolle en même temps.

Si tu ne veux pas que cela se redimmensionne, met des valeurs pour le width et le height et utilise la propriété overflow:hidden :

Code css :

Par contre avec le overflow:hidden, si ton contenu est trop long, il sera caché.

Merci de ta réponse ornitho.

Mais le problème persiste. Si je retire le position:fixed de mes div, les cellules de mon tableau se redimensionnent, même si j'ai spécifié la taille des cellules en px..
En gros ma position:fixed de mes div permet qu'elles fassent partie de mes cellules, mais les alignent par rapport à la fenêtre, ce qui contourne le problème de redimensionnement, non?

[ornitho13]

Peux tu fournir le css et l'html pour pouvoir mieux cerner le problème ?

merci

[ospreyyy]

Voici une partie de mon tableau créer en VB.NET:

Code :

1
2
<td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"><div style="margin:0px; background-color:black; padding:0px; position:fixed;">8:47</div></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td class="tableCellPresta" style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td><td style="height:15px;width:14px;"></td>
	</tr><tr>

Et le CSS tableCellPresta:

Code :

1
2
3
4
5
6
7
8
9
.tableCellPresta{
 
border-color: #708090;
border-style: solid;
background-color: #708090;
border-width: 1px;
text-align: center;
margin:0px;
}

Et le CSS de mes cellules :

Code :

1
2
3
4
5
6
7
8
9
.tableCalMilieuMilieu{
 
 
border-style:solid;
border-color:transparent;
border-width: 1px;
text-align: center;
margin:0px;
}

Je suis débutant en programmation web, soyez indulgent :p
Merci d'avance!

[Bisûnûrs]

L'overflow:hidden ne fonctionne pas sur les cellules (td) d'un tableau (table). En revanche, tu peux donner les mêmes dimensions que tes cellules aux div qui les contiennent, et c'est à ces div que tu peux mettre un overflow:hidden.

[ospreyyy]

Envoyé par Bisûnûrs

L'overflow:hidden ne fonctionne pas sur les cellules (td) d'un tableau (table). En revanche, tu peux donner les mêmes dimensions que tes cellules aux div qui les contiennent, et c'est à ces div que tu peux mettre un overflow:hidden.

Le problème n'est pas dans les tailles des div car même quand elle font à peine quelques pixels, elles sont décalées et débordent souvent de ma cellule..

[Bisûnûrs]

Aurais-tu une capture de ce que tu as et une autre de ce que tu veux obtenir ?

[ospreyyy]

screen1
Voilà j'ai uploadé un printscreen. J'ai coloré mes div en noir. Elles serviront à afficher l'heure de début et de fin de prestation.

Voilà ce qui arrive quand je retire la position:fixed de ma div (les colonnes ne sont plus bonnes) :
screen2

[Bisûnûrs]

Hum, ton tableau a l'air fort complexe .. Ca ne va pas être facile de t'aider .. Il serait possible d'en avoir une petite version en ligne ?

[ospreyyy]

Envoyé par Bisûnûrs

Hum, ton tableau a l'air fort complexe .. Ca ne va pas être facile de t'aider .. Il serait possible d'en avoir une petite version en ligne ?

Stp : lien
On m'a imposé l'asp.net & vb.net.. Je me suis débrouillé avec le peu de connaissance que j'ai de ces langages.
J'ai créé un tableau avec des cellules qui se colorent en fonction des prestations en gros..
Merci d'avance de ton aide

[Bisûnûrs]

Je viens d'essayer et ça a l'air de fonctionner :

- Enlève le position:fixed de tes divs.
- Rajoute width:14px, height:15px et overflow:hidden à tes divs.

Mais l'heure est forcément coupée, puisqu'elle ne rentre pas dans une cellule de 14px de large ..

[ospreyyy]

Envoyé par Bisûnûrs

Je viens d'essayer et ça a l'air de fonctionner :

- Enlève le position:fixed de tes divs.
- Rajoute width:14px, height:15px et overflow:hidden à tes divs.

Mais l'heure est forcément coupée, puisqu'elle ne rentre pas dans une cellule de 14px de large ..

Magnifique! Un grand merci à toi bisunurs! (k)

[ospreyyy]

Comment t'es venu ton raisonnement? Tu sais m'expliquer ma faute?

[Bisûnûrs]

Ben en fait c'est ce que j'avais déjà expliqué là :

Envoyé par Bisûnûrs

tu peux donner les mêmes dimensions que tes cellules aux div qui les contiennent, et c'est à ces div que tu peux mettre un overflow:hidden.

Sauf que je ne pensais pas que tu allais laisser le position:fixed.

[ospreyyy]

Envoyé par Bisûnûrs

Ben en fait c'est ce que j'avais déjà expliqué là :

Sauf que je ne pensais pas que tu allais laisser le position:fixed.

encore un grand merci!

[ospreyyy]

lien de ma page
Après modification (div dans toutes les cellules), l'overflow ne fonctionnent tjrs pas :/
Est-ce parce que je suis sous IE7? J'ai pourtant le même problème sous Chrome
J'utilise ce script pour faire passer l'overflow sous IE7 mais sans succès : http://code.google.com/p/ie7-js/

Quelqu'un pourrait m'aider? Je deviens fou ^^

[ospreyyy]

*Mauvaise manip*

[Bisûnûrs]

IE7 comprend très bien l'overflow, pas besoin d'un script externe.

Dans ton code je vois ça :

Code html :

<div style=width:14px; height:15px;></div>

Il manque les guillemets, ça fait bugger ton code, et je ne vois pas l'overflow:hidden.

[ospreyyy]

Envoyé par Bisûnûrs

IE7 comprend très bien l'overflow, pas besoin d'un script externe.

Dans ton code je vois ça :

Code html :

<div style=width:14px; height:15px;></div>

Il manque les guillemets, ça fait bugger ton code, et je ne vois pas l'overflow:hidden.

Effectivement j'avais oublié des doubles " dans mon code vb..
Encore un grand merci bisunurs.. Mon cerveau ne suit plus ^^