Retirer les espace automatique entre deux div ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Retirer les espace automatique entre deux div ?

Message par Hyeki le Jeu 22 Mai 2014 - 15:55

Bonjour !
Je viens encore demander de l'aide des plus ingénieux et fort que moi =3

Je voudrais créer un bête tableau avec une propriété div pour chacune d'elle (j'aurais éventuellement mis une class dans le td même mais ne sachant pas comment ça marche quand y a un rowspan="x" ou colspan="x" je n'ais pas osée), hors je constate qu'un espace se créé automatiquement entre chacune de mes cellules.

Avant j'aurais utilisé une margin/padding pour les coller l'une aux autres mais dans le cas ou le tableau a beaucoup de case, je trouve cette technique un peu farfelue ... Je me demandais donc si il n'y a pas un moyen d'annuler tout ça avec un display ou une commande spécifique qui ne me demande pas de faire des margin négatif (parce que firefox aime pas quand je vais dans le négatif ><). Bien sûr, comme je suis chiante, je ne veux pas annuler les espaces sur tout monde forum, mais juste de mon tableau ^^

Je vous donne un code à titre d'exemple =)
Code:
<table>
   <tr>
      <td><div class="div1">contenu 1</div></td>
      <td><div class="div2">contenu 2</td>
   </tr>
   <tr>
      <td><div class="div2">contenu 3</div></td>
      <td><div class="div3">contenu 4</div></td>
   </tr>
   <tr>
      <td><div class="div3">contenu 5</div></td>
      <td><div class="div1">contenu 6</div></td>
   </tr>
</table>

Et le CSS avec juste taille et couleur pour qu'on puisse y voir mieux :
Code:
.div1{
   width: 200px;
   height: 100px;
   background-color: blue;
}
.div2{
   width: 200px;
   height: 100px;
   background-color: orange;
}
.div3{
   width: 200px;
   height: 100px;
   background-color: red;
}

Merci à celui, ou celle qui m'apportera ses lumières =3


Dernière édition par Hyeki le Jeu 22 Mai 2014 - 16:41, édité 1 fois

Hyeki
**

Messages : 59
Inscrit(e) le : 21/05/2014

http://www.aucun.com
Hyeki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Arias le Jeu 22 Mai 2014 - 15:59

Bonjour,
Met un id sur ton tableau, puis ecris un CSS de ce genre:

Code:
/* s'applique à toutes les div qui sont dans le tableau monIdTableau...*/
#monIdTableau div
{
 margin: 0px;
 padding: 0px;
}


Cela fonctionne aussi avec une classe, par exemple ".maClasseTableau div"

Arias
**

Messages : 93
Inscrit(e) le : 19/05/2014

http://starcitizen-ddg.bbfr.net/
Arias a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Hyeki le Jeu 22 Mai 2014 - 16:03

Je viens d'essayer, j'ai donc mis dans mon css
Code:
.cate{
margin: 0px;
padding: 0px;
}
et dans mon html
Code:
<table class="cate">
Je n'ai hélas aucun changement. Ais-je fais une erreur quelque part ?

Hyeki
**

Messages : 59
Inscrit(e) le : 21/05/2014

http://www.aucun.com
Hyeki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Arias le Jeu 22 Mai 2014 - 16:05

avec le code suivant:
Code:
.cate{
margin: 0px;
padding: 0px;
}

tu supprimes le padding et le margin autour de ton tableau, mais pas dans les cases de celui ci.

Ajoutes div après ta spécification de nom de classe dans le css pour spécifier que tu veux que ce style s'applique à toutes les div dans ton tableau; comme ca:

Code:
.cate div
{
margin: 0px;
padding: 0px;
}

Arias
**

Messages : 93
Inscrit(e) le : 19/05/2014

http://starcitizen-ddg.bbfr.net/
Arias a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Hyeki le Jeu 22 Mai 2014 - 16:13

Ah d'accord. Je viens de tenter avec le div devant, je n'ai pas de changement. Donc je pense que le soucis doit venir du HTML. Est-ce que
Code:
<table class="cate">
est correcte ou je dois carrément l’appeler
Code:
<table class="cate div">

Hyeki
**

Messages : 59
Inscrit(e) le : 21/05/2014

http://www.aucun.com
Hyeki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Arias le Jeu 22 Mai 2014 - 16:21

Mmh non normalement le premier appel est bon.

Essaye d'ajouter "!important" après les 0px; comme ca:

Code:
.cate div
{
  margin: 0px !important;
  padding: 0px !important;
}

Si cela ne marche pas, il faudrait voir avec le debugger du navigateur.

As-tu un lien ou je peux voir le problème?

Arias
**

Messages : 93
Inscrit(e) le : 19/05/2014

http://starcitizen-ddg.bbfr.net/
Arias a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Hyeki le Jeu 22 Mai 2014 - 16:25

Je le fais depuis un page sur mon bureau en fait du coup, hormis copier/coller le code directement, je n'ai pas de moyen pour rendre ça visible.
J'ai ajouté les !important derrière chaque propriété et encore une fois, malheureusement je n'ai aucune résultat. Du coup j'ai essayé avec
Code:
*{
margin: 0px !important;
padding: 0px !important;
}
Histoire de voir si j'ai un résultat, j'ai en effet un changement, mais il reste quelques écarts de 3px environ entre chaque div. Bon cette solution quoi qu'il en soit ne me conviens pas puisque je ne veux pas annuler les espaces ailleurs que dans mon tableau =(
J'ai l'impression d'être dans une impasse.

Hyeki
**

Messages : 59
Inscrit(e) le : 21/05/2014

http://www.aucun.com
Hyeki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Arias le Jeu 22 Mai 2014 - 16:28

Pourquoi mettre des div dans les cases de ton tableau? Il est possible d'appliquer des styles directement sur les cases, comme ca:

Code:
<table>
   <tr>
      <td class="div1">contenu 1</td>
      <td class="div2">contenu 2</td>
   </tr>
</table>


et pour colspan ca s'utilise comme ca:

Code:
<table>
   <tr>
      <td class="div1">contenu 1</td>
      <td class="div2">contenu 2</td>
   </tr>
  <tr>
      <td class="div3" colspan="2">contenu qui fait 2 cases de large</td>
   </tr>
</table>

Arias
**

Messages : 93
Inscrit(e) le : 19/05/2014

http://starcitizen-ddg.bbfr.net/
Arias a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Hyeki le Jeu 22 Mai 2014 - 16:30

Parce que, comme je le disais plus haut, c'est un tableau d'exemple que j'ai fournis, l'autre est trop "grand" et sur le bon tableau, disons que j'ai quelques td et tr en colspan et rowspan et je ne sais pas absolument pas si on peux mettre une classe sur un td colspan par exemple, sinon ça aurais été d'avantages plus simple de simplement mettre ma classe sur le td en question.

Hyeki
**

Messages : 59
Inscrit(e) le : 21/05/2014

http://www.aucun.com
Hyeki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Arias le Jeu 22 Mai 2014 - 16:31

J'ai édité mon message précédent pendant que tu ecrivais le tiens.

Arias
**

Messages : 93
Inscrit(e) le : 19/05/2014

http://starcitizen-ddg.bbfr.net/
Arias a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Hyeki le Jeu 22 Mai 2014 - 16:35

Je viens de le voir. Merci ! Je ne savais pas que c'était possible, je trouvais le rendu étrange à l'écrit *sort*

J'ai donc édité tout ça, mais il reste un tout petit décalage de quelques pixels (2-3 à mon avis). C'est déjà beaucoup plus propre mais ce n'est toujours pas collé ensemble =/

Hyeki
**

Messages : 59
Inscrit(e) le : 21/05/2014

http://www.aucun.com
Hyeki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Arias le Jeu 22 Mai 2014 - 16:38

essaye de définir ton tableau comme ca:

<table cellspacing="0" cellpadding="0">

Arias
**

Messages : 93
Inscrit(e) le : 19/05/2014

http://starcitizen-ddg.bbfr.net/
Arias a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Hyeki le Jeu 22 Mai 2014 - 16:41

Ça marche ! J'avais pas pensé à ce petit spacing. Merci Arias, tu me sauve la vie et me permet enfin d'avancer plus loin n_n
Merci pour ta patience, vraiment ♥

Hyeki
**

Messages : 59
Inscrit(e) le : 21/05/2014

http://www.aucun.com
Hyeki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Retirer les espace automatique entre deux div ?

Message par Arias le Jeu 22 Mai 2014 - 16:42

De rien, bonne continuation Smile

Arias
**

Messages : 93
Inscrit(e) le : 19/05/2014

http://starcitizen-ddg.bbfr.net/
Arias a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum