Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Tableau

1430 appréciations
Hors-ligne
:bd:, Sur mon blog CHEZ TATA ANNIE, je suis en train de réalisée un tableau ( TABLEAU DES SIGNES) , quand je veux mettre ma 4 eme image la plus à droite  je n'y arrive pas car je ne vois rien,  le champs de vision est caché , comment dire, je suis obligé de mettre la 4 eme image avant la 3 eme  dans l'espace article . et je n'arrive pas non plus à régler l'intervalle entre les images je voudrais qu'il soit moins important ?
Pouvez vous m'aider SVP?:sol:


Stef

:bd: pixelles

Pour régler l'intervalle horizontal entre tes cellules (images)

border-spacing donne la distance qu'il y a entre les bordures de cellules d'un tableau.
 
border-collapse détermine si les bordures d'un tableau sont séparées ou fusionnées.

 cellspacing est utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.



Dans ton tableau la partie CSS tu ajoutes dans la partie  table.tableau{

border-collapse: collapse;
border-spacing:  px px;

le premier px tu ajoutes la valeur de l'espace horizontal de ta cellule.
le deuxième px tu ajoutes la valeur de l'espace vertical de ta cellule.


Dans ton tableau la partie HTML tu ajoutes



Dans cellspacing à la place du X tu remets la valeur horizontal de ta cellule sans le px

Dernière modification le mardi 12 Mars 2019 à 12:30:38

1430 appréciations
Hors-ligne
Bonjour Stéphane, et merci de ton intervention, je viens de me résigner à mettre que 3 colonnes, mais je galère toujours en ce qui concerne les espaces , le code dans le HTLM ne reste pas .  
Stef

pixelles



Dans ton tableau la partie CSS je me suis trompé ce n'est pas collapse; les bordures de ton tableau ne fusionne pas elles sont séparées .

C'est plustot separate; essaie avec ce code dans la partie table.tableau{ 

border-collapse: separate;
border-spacing:  px px; 

Ce code permettra un espacement horizontal et vertical séparé,
il n y a pas besoin d'ajouter cellspacing dans le code Html



Dernière modification le mardi 12 Mars 2019 à 15:29:02

1430 appréciations
Hors-ligne

1430 appréciations
Hors-ligne
Stéphane j'ai pris mon tableau 
dans le générateur de PapyClic 

ICI
Stef

Pixelle

Tu n'as pas une partie en CSS pour ton tableau ?

Dernière modification le mardi 12 Mars 2019 à 16:03:21

1430 appréciations
Hors-ligne
Stef

Dans ton code CSS  c'est bon, tu devrais avoir le meme espace 5px  horizontal et verticale entre tes cellules de ton tableau , ça viens surement d'une ou plusieurs erreurs dans ton code HTML .



<*tr> définit une ligne de cellules dans un tableau.
Es ce que tu n'as pas dans ton code HTML plusieurs lignes<*tr><*/tr> sans éléments <*td> (cellules) ?

Ou

Si tes images sont plus petites en hauteur que la ligne ou les cellules.
<*tr style="height:380px;">
<*td style="height:380px;">

C'est ce qui ferait que ton espace horizontal soit plus large.

Dernière modification le mardi 12 Mars 2019 à 21:00:43

1430 appréciations
Hors-ligne
Bonjour Stéphane, regardes ici

CHEZ TATA ANNIE

C'est plutôt pas mal,
Je laisse le reste car il y aura d'autres images, mes images font 290px par 362px .

Par contre ce que je ne comprends toujours pas c'est quand je suis sur le générateur , je choisis des couleurs de bordures ainsi que leurs largeurs simplement le composeur n'en tient pas compte pourquoi ? 



1430 appréciations
Hors-ligne


Dernière modification le mercredi 13 Mars 2019 à 09:53:31

4036 appréciations
Hors-ligne
:am: LES ZAMIS

J'ai fait un test et il n'y a pas de soucis pour la 4 e image !  il suffit de réduire la page à 80% pour travailler.


j' ai fait un tableau sans soucis avec les code de .

https://labodeSimon.blog4ever.com/tableau

On peux ajouter du code css dans le tableau pour modifier les couleurs....

:sol:

Stef

 pixelle :bd:simon

Comme le dit simon pour ma part avec le générateur mes bordures de tableau sont dans le CSS pour changer les couleurs et les bordures pas dans le HTML .

Tes bordures tu les veux ou?


Pour le contour du tableau tu ajoutes dans le CSS de ton tableau

table.tableau{
border-collapse: separate;
border-spacing: 5px 5px;
        border-width: px;(largeur de la bordure)
border-color: #;
border-style: solid;
}

Pour le contour des cellules idem

.tableau td {
      border-width: px;
border-color: #;
border-style: solid;
}



Dernière modification le mercredi 13 Mars 2019 à 10:36:21

4036 appréciations
Hors-ligne
On peut juste mettre du css en allant dans +

<**STYLE type="text/css**">
<*!--

#articles_show_contenu_article,
.articles_index_contenu_article {
    font-size: 13px;
  background: none repeat scroll 0 0 #ff5!important;
    background: linear-gradient(ivory, black 80%)!important;
    border: 5px solid blue!important;
    border-radius:20px!important;
}
 
#articles_show_contenu_article:hover,
.articles_index_contenu_article:hover {
    border: 5px dashed green!important;
      background: none repeat scroll 0 0 #ff5!important;
    font-size: 13px;
    background-image: linear-gradient(yellow, #a58)!important;
 transition: background-color 2s ease 2s!important;
}
-->
<*/STYLE>





Voir mon article:  https://labodeSimon.blog4ever.com/tableau


4036 appréciations
Hors-ligne
Coucou

Je t'ai fait un exemple pour que tu comprennes.
Va voir dans le html de ton article le code que tu pourras modifier. ( ou supprimer )

https://chez-tata-annie.blog4ever.com/tableau-des-signes-lsf


EXEMPLE:  http://recordit.co/2C5UPKWmsm



1430 appréciations
Hors-ligne
Les amis  Il est vrai que je préfère travailler dans le CSS je m'y retrouve plus facilement et si quelques choses ne vas pas c'est plus facile pour ajouter ou enlever du code , pour ma part cela va sans dire, 

Simon c'est trop bien ce que tu as fais merci , et si je veux changer la couleur de bordure , je n'ai rien contre le bleu dure mais  un rose soutenu ou autre je pense que j'aimerai mieux ?

4036 appréciations
Hors-ligne
Merci à @Stef@ pour son aide

J'ai remplacé par ces codes personnalisés donc dis moi si ça te convient


#articles_show_contenu_article,
.articles_index_contenu_article {
    clear: left;
    position: relative;
    z-index: 2;
    padding: 2em 1em;
    border: 8px solid pink;
    border-radius: 15px!important;
     background: none repeat scroll 0 0 transparent;
    color:#000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    -khtml-box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    -webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    box-shadow: 6px 8px 10px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}

#articles_show_contenu_article:hover,
.articles_index_contenu_article :hover {
    background-image: radial-gradient(#a58, white 55%, #000);
  border: 8px dotted pink;
}
article{
margin-left:25px;   
   
}


1430 appréciations
Hors-ligne
Re  Simon j'ai mis ton code simplement il ne se passe rien j'ai changé les couleurs pour voir la différence dans le css  mais rien .

4036 appréciations
Hors-ligne
re
j'ai changé les couleurs pour voir la différence dans le css  mais rien .


Il faut aller dans la gestion de l'article pour modifier le css.

Supprimes les code tableau dans le css personnalisé .

https://chez-tata-annie.blog4ever.com/tableau-des-signes-lsf



Je suis intervenu dans la gestion et ça fonctionne bien.

Rafraichis 2 fois la page pour voir


1430 appréciations
Hors-ligne
Bonsoir simon, et beaucoup pour ton intervention j'adore l'effet gris au passage de la souris ,
Stéphane 

4036 appréciations
Hors-ligne
Parfait !

Mais le code dans le css personnalisé ne sert à rien donc c'est mieux de le supprimer.

Chaque article avec un tableau peut avoir son propre css dans le composeur.





1430 appréciations
Hors-ligne
:bd:simonet Je viens de supprimer le code dans le css personnalisé, une dernière question stp ,  si je veux modifier quoi que ce soit il faut que je retourne dans générateur de tableau et refaire un tableau, c'est bien ça car je ne vois aucun code qui correspondent aux pointillés, ou à la couleur de bordure, dans les codes HTML de l'article  (tableau des signes L S F ) désolée mais j'aime bien que les choses soit claire afin que je puisse les reproduire par la suite si besoin. Je sais je suis un peu blonde 
Stef

:bd:pixelle

Le code que ta donné simon c'est du CSS pas du HTML pour tes bordures de ton tableau et si tu veux modifier les bordures ( couleurs, pointillés) c'est dans ce code qui ta donné que tu dois modifier. 

Le code de simon ne vient pas  du  Générateur de tableaux de   c'est un code en + pour améliorer le design de ton tableau.

Avec le CSS de ton tableau c'est beaucoup plus facile et moins fastidieux que le HTML pour modifier.


Le générateur de tableau est une bonne base après tu peux rajouter des codes en + comme le code de simon

( un autre exemple comme un de mes tableaux  j'ai rajouter des codes en + pour donner du relief à mon tableau avec les ombres )  Ici



Dernière modification le jeudi 14 Mars 2019 à 11:02:09

4036 appréciations
Hors-ligne
Stef t'explique bien .

Il ne faut pas confondre le Html de l'article et le HTML que j'ai ajouté pour y mettre le css personnalisé. POURQUOI ? si on met le code css dans le css personnalisé, il sera appliqué à TOUS les articles tableaux..

C'est dans l'article que se trouve le code css.

Il est dans le HTML de l'article avec une "enveloppe" qui commence par <*STYLE type="*text/css">
<*/style>

Dans les articles à tableau tu pourras modifier les nuances de couleurs et style pour personnaliser chaque article.

Je te joint une vidéo pour t'expliquer.---->  http://recordit.co/PvNLAotX4o



@Stef@ Super ton tableau  :am:




1430 appréciations
Hors-ligne
simonpour la vidéo trop bien expliqué, et Stéphane ton tableau est vraiment magnifique, j'avais jamais regardé ce truc, c'est comme si je venais de découvrir un trésor :ptdr::ptdr::ptdr:mais quelle nunuche que je fais :ppc::ppc:  vous auriez du commencer par ça :ptdr::ptdr::ptdr:  à vous deux.

Dernière modification le jeudi 14 Mars 2019 à 14:49:16

4036 appréciations
Hors-ligne
Ce sujet est fermé, vous ne pouvez pas y répondre.
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Petits soucis.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 6061 autres membres