Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
821 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Tableau HTML avec effet d'ombre SANS CSS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Tableau HTML avec effet d'ombre SANS CSS

n°2467596
Yeam
I'm your passenger
Posté le 10-04-2024 à 09:57:54  profilanswer
 

: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
mood
Publicité
Posté le 10-04-2024 à 09:57:54  profilanswer
 

n°2467616
mechkurt
Posté le 10-04-2024 à 13:10:26  profilanswer
 

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
n°2467617
Yeam
I'm your passenger
Posté le 10-04-2024 à 13:29:23  profilanswer
 

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
n°2467626
mechkurt
Posté le 10-04-2024 à 15:31:36  profilanswer
 

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


---------------
D3
n°2467628
Yeam
I'm your passenger
Posté le 10-04-2024 à 15:49:03  profilanswer
 

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
n°2467629
mechkurt
Posté le 10-04-2024 à 16:10:19  profilanswer
 

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
n°2467632
Yeam
I'm your passenger
Posté le 10-04-2024 à 16:26:12  profilanswer
 

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
n°2467634
Yeam
I'm your passenger
Posté le 10-04-2024 à 16:38:16  profilanswer
 

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
n°2467635
mechkurt
Posté le 10-04-2024 à 16:41:50  profilanswer
 

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
n°2467781
rufo
Pas me confondre avec Lycos!
Posté le 11-04-2024 à 22:57:46  profilanswer
 

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
mood
Publicité
Posté le 11-04-2024 à 22:57:46  profilanswer
 

n°2467803
Yeam
I'm your passenger
Posté le 12-04-2024 à 10:31:39  profilanswer
 

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


---------------
TOPIC ACHATS/VENTES
n°2467808
rufo
Pas me confondre avec Lycos!
Posté le 12-04-2024 à 12:13:02  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Tableau HTML avec effet d'ombre SANS CSS

 

Sujets relatifs
Tableau croisé dynamique[Powershell] Passer un tableau de paramètres plutôt qu'une énumération
vérifier exitence d'un objet dans un tableauRendre cliquable chaque ligne entiere de tableau
[HTML] Modéliser un calendrier de vieVB Script - filtre tableau
Signature mail HTML/CSSEn Java, vous pouvez convertir une liste en tableau.
aide script html 
Plus de sujets relatifs à : Tableau HTML avec effet d'ombre SANS CSS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR