Tableau HTML avec effet d'ombre SANS CSS

Tableau HTML avec effet d'ombre SANS CSS - HTML/CSS - Programmation

Marsh Posté le 10-04-2024 à 09:57:54    

:hello:  
 
Gestionnaire web d'un site propulsé par WordPress un CMS très limitatif en termes de personnalisation, je cherche à abreuver mes pages d'un peu plus de style que les simples mises en forme par défaut qui se montrent sommaires, basiques et très peu nombreuses.
 
J'ai une contrainte énorme : pas moy' d'y ajouter du CSS.  
 
J'ai déjà ajouter quelques bricolages, comme un simple encadré sur fond coloré (gris en l'occurrence), créé à base d'un simple tableau composé d'une seule colonne et une seule ligne :
 

<table cellpadding="33" style="width:100%; border:none">
 <tbody>
  <tr>
   <td bgcolor="#f2f2f2" style="text-align: center;" valign="top" width="20%">
   <h2 style="text-align: left;">Un titre ici</h2>
 
   <div style="text-align: left;">Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte</div>
   &#160;
   </td>
  </tr>
 </tbody>
</table>


 
Ce que je souhaiterais, c'est avoir ce même type d'encadré sur fond blanc mais avec un effet d'ombre autour. Est-ce que c'est possible via un simple éditeur HTML ? J'ai essayé de croiser plusieurs résultats de recherche sur le sujet, rien de concluant.
 
Le but serait d'arriver à un résultat comme ce qu'on peut trouver sur cette page : https://getcssscan.com/css-box-shadow-examples
(exemples : 5, 6, 18, 23...)
 
Preneur de vos tips :jap:


Message édité par Yeam le 10-04-2024 à 09:58:05

---------------
TOPIC ACHATS/VENTES
Reply

Marsh Posté le 10-04-2024 à 09:57:54   

Reply

Marsh Posté le 10-04-2024 à 13:10:26    

Si tu peux ajoute du html tu peux surement ajouter du css, tu as essayé d'ajouter une balise style dans ton contenu html ?

Code :
  1. <style>
  2. td {box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}
  3. </style>


Sinon apparemment tu peux mette du inline dans tes td mais répéter ta règle pour chaque cellule... [:kosmos]
 
Sinon utiliser des tableaux pour de la mise en page c'est des techniques des année 90, il y'a bien mieux maintenant (et des techniques qui s'adaptent au smartphone [:nedurb] ).


---------------
D3
Reply

Marsh Posté le 10-04-2024 à 13:29:23    

Je vais essayer ça.  
 
Pour le inline (je ne connais ce terme que depuis peu), j'ai essayé mais sans succès non plus. Je sais pour les tableaux, mais je ne suis pas un expert de base et en plus, bon nombre d'alternatives ne passaient pas :D Mais si sur ces deux choses-là tu as des suggestions, je suis tout à fait preneur !
 
Merci beaucoup pour ton aide :jap:


---------------
TOPIC ACHATS/VENTES
Reply

Marsh Posté le 10-04-2024 à 15:31:36    

par curiosité quel est le nom de ton CMS ?
Y'a ptet moyen de le "patcher" pour inclure une feuille de style externe...


---------------
D3
Reply

Marsh Posté le 10-04-2024 à 15:49:03    

K-SUP :)

 

J'ai essayé ton code, ça fonctionne ! seul hic, cest que c'est coupé sur les bords si c'est trop près de la frontière entre le menu latéral de gauche et le reste. Faut juste que j'ajoute un petit padding externe je suppose !

 

https://i.ibb.co/7rBFcj3/Screenshot-2024-04-10-at-15-48-28-test-html-L-NAICK-NE-SUPPR-PAS-MERCI.png


Message édité par Yeam le 10-04-2024 à 15:49:47

---------------
TOPIC ACHATS/VENTES
Reply

Marsh Posté le 10-04-2024 à 16:10:19    

Ah ben bien si les balises style fonctionne...
Par contre je ne connais pas ce CMS, j'ai cherché un peu sur leur support mais je ne vois pas trouvé de partie customisation graphique.
Ça parle bien de template d'affichage et d'extension mais je tu n'est peut être même pas sur la dernière version...
 
Et un truc comme ça ?

Code :
  1. <style>
  2. div#content div.bloc {background:#f2f2f2;text-align:center;margin:20px,padding:10px;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}
  3. div#content div.bloc h2 {text-align:left;}
  4. div#content div.bloc div {text-align:left;}
  5. div#content div.bloc a {color:blue;}
  6. div#content div.bloc a:hover {color:red;}
  7. </style>
  8. <div id="content">
  9. <div class="bloc">
  10.   <h2>Un titre ici</h2>
  11.   <div>Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte</div>
  12.   <a href="#">En savoir plus</a>
  13. </div>
  14. </div>


Pacqu'un tableau avec une seule cellule comment dire... :o


---------------
D3
Reply

Marsh Posté le 10-04-2024 à 16:26:12    

Pas mal aussi !  
 
Par contre toujours ce même souci de shadow mangée sur les côtés :
https://i.ibb.co/xfmymRB/screenshot2.png
 
Donc le margin et le padding n'ont pas l'air de fonctionner :(
 
Edit : si ! J'ai juste enlever les coquilles (si c'en était) sur la ligne :
 

div#content div.bloc {background:#f2f2f2;text-align:center; margin:23px; padding:20px; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}


 
Il fallait également mettre 3 px de plus dans le margin et 10 dans le padding


Message édité par Yeam le 10-04-2024 à 16:30:30

---------------
TOPIC ACHATS/VENTES
Reply

Marsh Posté le 10-04-2024 à 16:38:16    

https://i.ibb.co/YcxrGxG/s3.png

 

Tout roule nickel, j'ai enlevé les attributs a et a:hover pour conserver les couleurs de la charte graphique et tout est nickel.

 

MERCI @mechkurt ! :D


Message édité par Yeam le 10-04-2024 à 16:38:27

---------------
TOPIC ACHATS/VENTES
Reply

Marsh Posté le 10-04-2024 à 16:41:50    

Tu peux bidouiller pour trouver les bonnes valeurs en utilisant la fonction de développement web de ton navigateur (clic droit inspecter).
https://www.google.com/search?q=inspecteur+navigateur
Et maintenant à toi les joies du CSS ! ^^
https://www.google.com/search?q=tuto+css
 
Edit:de rien, n’hésite pas si tu as d'autres questions :hello:


Message édité par mechkurt le 10-04-2024 à 16:42:47

---------------
D3
Reply

Marsh Posté le 11-04-2024 à 22:57:46    

Y'a peut-être moyen de faire charger un fichier CSS via du javascript (balise <script> dans le HTML) et zou, tu peux faire ce que tu veux.
 
L'autre solution serait de changer de CMS peut-être :ange:  
 


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 11-04-2024 à 22:57:46   

Reply

Marsh Posté le 12-04-2024 à 10:31:39    

Changer de CMS n'est pas du tout à ma portée :D Mais j'aimerais bien...


---------------
TOPIC ACHATS/VENTES
Reply

Marsh Posté le 12-04-2024 à 12:13:02    

Installer un Wordpress, c'est pas comme s'il n'y avait pas 50 tutos qui expliquent comment faire :o


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed