php et css

Eléphanteau du PHP | 31 Messages

05 mars 2020, 12:25

bonjour,

J'ai récupéré un php qui a un fichier css?
Pour tester
https://dwaves.org/tools/csv2vcf/index.php
Le source
https://sourceforge.net/projects/csv2vcf-php/

J'ai beaucoup modifié le php mais je n'ai pas touché le css.

Ce que j'aimerais faire
1- le 'convert' qui se trouve au milieu soit plus visible
2 - si je ne donne pas de fichier il y a un message d'erreur :
File was not a allowed filetypes: *.csv,
J'aimerais que ce message soit plus visible.

le fichier css

Code : Tout sélectionner

* { margin: 0; } html { background-color: #b4b4b4; } body { font-family: arial; } .centered { float: none; max-height: 100%; left: 0; margin: auto; position: relative; top: 0; max-width: 1024px; } #parent { text-align: center; } .boxShadows { box-shadow: 0 0 30px 0 rgba(50, 50, 50, 0.34); } #headline { background-color: black; border-radius: 25px; box-shadow: 0 0 6px #ffffff; text-shadow: 0px 0px 9px rgba(150, 150, 150, 1); color: white; font-family: comic sans ms; margin-bottom: 20px; margin-top: 20px; max-width: 100%; padding-bottom: 10px; padding-top: 10px; } .border { background-color: cyan; border: 1px solid #d3d3d3 !important; border-radius: 25px; box-shadow: 0 0 6px #ffffff; color: white; float: left; margin-bottom: 10px; margin-right: 10px; position: relative; } .element { float: left; margin-right: 10px; padding: 25px; max-width: 100%; cursor: pointer; } .explanation { background-color: white; border: 2px solid; border-radius: 25px; color: black; display: none; float: left; max-width: 95%; padding: 10px; position: relative; } .Meldung { display: none; float: left; min-width: 99%; position: relative; } .Meldung { background-color: #ffd071; border: 2px solid; border-radius: 25px; float: left; min-width: 98%; padding: 9px; position: relative; } .Meldung input { min-width: 98%; } .contactInfo { background-color: #85eaff; border: 2px solid; border-radius: 25px; float: left; min-width: 98%; padding: 9px; position: relative; } .contactInfo input { min-width: 99%; } button { -moz-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.42857; margin-bottom: 0; padding: 6px 12px; text-align: center; vertical-align: middle; white-space: nowrap; background-color: #5bc0de; border-color: #46b8da; color: #fff; } .contact { float: left; position: relative; width: 100%; } .buttonMelden1 { left: 20px; position: relative; float: left; } .buttonMelden2 { left: 20px; position: relative; float: left; } .buttonMitmachen { right: 20px; position: relative; float: right; } textarea { min-width: 98%; min-height: 98%; } .title { font-size: 24px; text-shadow: 0px 0px 9px rgba(150, 150, 150, 1); } .contactInfo { display: none; } .btn-warning { background-color: #f0ad4e; border-color: #eea236; color: #fff; } #AnzeigeAufgebenForm { display: none; } .hidden { display: none; }
J'ai du mal à comprendre comment modifier le css.

Si quelqu'un peut m'aider

Anne
Modifié en dernier par gentil_ecureuil le 05 mars 2020, 14:54, modifié 1 fois.

Avatar du membre
Mammouth du PHP | 1609 Messages

05 mars 2020, 12:34

Salut Anne, à mon sens tu devrais consulter des tutoriels CSS pour les débutants. Tu vas voir y a rien de bien compliqué. ;)
Développeur web depuis + de 20 ans

Avatar du membre
Mammouth du PHP | 1564 Messages

05 mars 2020, 17:25

+1, c'est mieux que d'avancer sans savoir réellement ce qu'on fait.

Une astuce développeurs, avec Firefox tu peut faire clic droit sur l'élément voulu puis "Examiner l’élément", ça te permet de voir les styles déjà attribués et attribuer des styles et voir le changement en direct.

Si tu veux voir le bouton mieux il te faudra sans doute:

- augmenter son hauteur (height)
- le centrer (display:block + margin: 0 auto)
- augmenter la taille du texte (font-size) + possibilité de mettre une couleur différente que noir (color) + possibilité de le mettre en majuscule (text-transform)

Eléphanteau du PHP | 31 Messages

05 mars 2020, 20:22

merci pour cette idée : clic droit sur l'élément voulu puis "Examiner l’élément"
je viens de tester mais comment enregistrer les changements...

Avatar du membre
Mammouth du PHP | 1564 Messages

05 mars 2020, 21:04

copier puis coller dans le css

Eléphanteau du PHP | 31 Messages

06 mars 2020, 02:38

Merci pour votre aide.

Je commence de comprendre css

Mais j'ai craqué

j'ai mis
<input type="submit" name="convert" value="trier le fichier csv" style="width:25% ; font-weight:bold; font-size:20px; " >
à la place de
<input type="submit" name="convert" value="trier le fichier csv" style="width: 100%;">

C'est plus gros et plus visible et pour la suite j'ai joué avec <div> </div>

Anne

Avatar du membre
Mammouth du PHP | 1564 Messages

06 mars 2020, 11:58

C'est bien, après la bonne pratique est de regrouper tout les codes css pur dans le HTML, dans un css, par exemple pour votre input, vous pouvez lui attribuer une classe (exemple: inputBienVisible) et l'utiliser comme ceci:
<input type="submit" name="convert" value="trier le fichier csv" class="inputBienVisible">
Ce qui nous donnera dans le fichier css:
.inputBienVisible{
  width:25%;
  font-weight:bold;
  font-size:20px; 
}
Différence entre classe (.maclasse) et un id (#monid): maclasse peut être réutiliser dans la page, tant dis qu'un id peut être utiliser qu'une fois