Marge d'une cellule contenant une div

**ospreyyy** · 25/02/2011, 14h35

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 :

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

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** · 25/02/2011, 17h18

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 :

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

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** · 02/03/2011, 10h41

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 :

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

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é.

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** · 02/03/2011, 10h43

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

merci

**ospreyyy** · 02/03/2011, 10h52

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

Code :

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

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 :

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

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 :

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

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** · 02/03/2011, 11h09

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** · 02/03/2011, 11h34

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** · 02/03/2011, 11h39

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

**ospreyyy** · 02/03/2011, 11h55

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** · 02/03/2011, 12h07

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** · 02/03/2011, 12h21

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** · 02/03/2011, 12h32

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** · 02/03/2011, 12h47

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** · 02/03/2011, 12h48

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

**Bisûnûrs** · 02/03/2011, 12h50

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** · 02/03/2011, 12h54

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** · 02/03/2011, 15h05

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** · 02/03/2011, 15h06

*Mauvaise manip*

**Bisûnûrs** · 02/03/2011, 15h12

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

Dans ton code je vois ça :

Code html :

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

<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** · 02/03/2011, 15h19

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 :

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

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

Marge d'une cellule contenant une div

Tableau en CSS

Discussions similaires

Partager

Partager