Joomladay francophone 2018 à Paris 18 et 19 mai

mini CV joli, en CSS

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • mini CV joli, en CSS

    Bonjour,

    J'aimerais vous soumettre un exercice pour m'aider. C'est à propos des CSS. J'ai essayé plein de truc et le résultat n'est pas encore au rendez-vous.

    Comment feriez-vous avec les styles CSS pour faire ça:


    Il y a quatre choses:
    - La photo : taille optimisée pour le web (et dimension 135*167 px) et uploadée par FTP dans images/stories/
    - Le nom et le prénom: centré, couleur:#27433e, police verdana, gras, 24px (ou 200%)
    - Le mini CV: centré, couleur:#27433e, police verdana, gras, 12px (ou 100%)
    - L'image de fond contenant le fond clair quand elle est en .jpg ou avec de la transparence en .png (uploadée par FTP dans templates/..images/ et qui s'appelle fondpersonneok.jpg (ou .png), taille optimisée pour le web et de dimenssion (530*280 px)

    J'essaie d'utiliser JCE, les styles, mosimage et une table à 1 ligne et 2 colonne (1 colonne pour la photo et 1 colonne pour nom prénom et CV)

    Je n'y arrive pas encore.

    Pour poster mon message ici, je me dis deux choses: que le CSS pour ça devrait comporter peu de lignes et que donc vous pourrez peut-être tenter l'exercice.
    Et ensuite, je pense que ce style de présentation type mini CV avec une jolie image de fond peut sans doute intéresser d'autres personnes.

    Amitiés,

    senzu

    Edit: je me dis que ce n'est pas qu'une question de CSS. Ca contient aussi : comment les appliquer ensuite ?
    Dernière édition par senzu à 21/10/2007, 19h31
    http://www.senzu.net
    http://www.compagniexyz.com
    http://www.lebravesoldatchveik.org

  • #2
    Salut,
    Il faut 5 div imbriqué :

    Code PHP:
    <div class="box_degrade">
     <
    div>
      <
    div>
       <
    div>
        <
    div>
         
    Contenu
        
    </div>
       </
    div>
      </
    div>
     </
    div>
    </
    div
    Partie CSS :
    dans le style div.box_degrade mettre l'image du dégradé. Dans ton exemple une image d'une simple ligne de 1 pixel suffit car un repeat-y va faire le reste
    Ensuite il te faut 4 images, une par coin.
    Le format gif est préférable, vu que tu va devoir mettre le transparence pour voir le dégradé...
    I'am happy for you !
    Dernière réalisation : http://www.pierrickservais.com/

    Commentaire


    • #3
      Voir l'image jointe pour le découpage des images (traits rouge)
      Mettre la couleur blanche en transparent.
      Puis définir les styles :
      - div.box_degrade div
      - div.box_degrade div div
      - div.box_degrade div div div
      - div.box_degrade div div div div
      pour placer ces images.

      2 secondes, je trouve le tutoriel adéquate...

      EDIT : http://www.alsacreations.com/articles/cadre/
      Fichiers joints
      I'am happy for you !
      Dernière réalisation : http://www.pierrickservais.com/

      Commentaire


      • #4
        box_degrade

        Bonjour à tous,

        Oui exact il te faut créer un template sur photoshop puis découper top, bottom et right , left.
        Moi j'utilise aussi du repeat-x pour des sites en 100% c'est mieux et tout ca dans des divs bien sûr tr et td. Img src etc....
        tiens un exemple dans le body de ton html :

        Code:
        <body style="background-image:#a3907c;">
        <div id="Table_01">
        	<div id="charte-graphique-test-01_">
        		<img id="charte_graphique_test_01" src="img/charte_graphique_test_01.jpg" width="324" height="179" alt="" />
        	</div>
        	<div id="charte-graphique-test-02_">
        		<img id="charte_graphique_test_02" src="img/charte_graphique_test_02.jpg" width="676" height="97" alt="" />
        	</div>
        	<div id="charte-graphique-test-03_">
        <img id="charte_graphique_test_03 " src="img/charte_graphique_test_03.gif" width="558" height="403" alt="" />
        		
        	</div>
        	<div id="charte-graphique-test-04_">
        		<img id="charte_graphique_test_04" src="img/charte_graphique_test_04.jpg" width="118" height="403" alt="" />
        	</div>
        	<div id="charte-graphique-test-05_">
        		<img id="charte_graphique_test_05" src="img/charte_graphique_test_05.jpg" width="324" height="321" alt="" />
        	</div>
        </div>
        </body>
        et la css.... à placer avant le header...

        Code:
        <!--
        
        #Table_01 {
        	position:absolute;
        	left:0px;
        	top:0px;
        	width:1000px;
        	height:500px;
        }
        
        #charte-graphique-test-01_ {
        	position:absolute;
        	left:0px;
        	top:0px;
        	width:324px;
        	height:179px;
        }
        
        #charte-graphique-test-02_ {
        	position:absolute;
        	left:324px;
        	top:0px;
        	width:676px;
        	height:97px;
        }
        
        #charte-graphique-test-03_ {
        	position:absolute;
        	left:324px;
        	top:97px;
        	width:558px;
        	height:403px;
        }
        
        #charte-graphique-test-04_ {
        	position:absolute;
        	left:882px;
        	top:97px;
        	width:118px;
        	height:403px;
        }
        
        #charte-graphique-test-05_ {
        	position:absolute;
        	left:0px;
        	top:179px;
        	width:324px;
        	height:321px;
        }
        
        -->
        Voilà tu n as plus qu'à te faire une template avec des ombres portées c'est du basic l'autre methode consiste à decouper juste les angles + des images de 1px de large de la meme hauteur et en repeat-x cela te fera un site en width 100%

        Commentaire


        • #5
          Pouquoi je fais ça j'ai du taff moi ah lalala

          Commentaire


          • #6
            Ah oui pardon après du dois mettre un repertoire img ou images comme tu veux avec les images dedans bien sur et verifier le chemin à ciaoo bonsoir !

            Commentaire


            • #7
              Bonjour à tous,

              Merci pour vos réponses. Je craignais d'être un peu trop perso mais en voyant vos réponses et puis en voyant le tuto qu'a retrouvé Papounet, je vois bien que j'ai tapé dans un vrai sujet.

              Cependant j'aimerais restituer ma question d'origine même si vous avez déjà répondu et même en allant au dela.
              Mais à mon sens vous avez répondu en terme de codage (ce qui est plutôt de bon aloi sur joomla et le web mastering) mais pas en terme d'utilisation simple de JCE et des styles CSS ( ce qui me paraissait possible pourtant)

              Parce que dans ma question d'origine: l'image de fond avec les bords arrondis et les ombres était une seule image a appeller.
              Et mon soucis était (d'abord) plus l'utilisation de JCE et des styles pour parvenir à afficher sur cette image: à gauche la photo et à droite le texte (2 tailles différentes pour le texte)

              Par contre ce que vous proposez est vraiment intéressant pour l'amélioration du dispositif, c'est à dire pour que justement ce "cadre" puissent bouger selon ce qu'il y a dedans.

              Mais j'aimerais d'abord être capable d'utiliser correctement JCE+styles+petites retouches du code html si nécessaire+mosimage dans le corps des articles car ca m'aidera pour plein d'autres situations.

              Donc voilà ce que j'ai essayé de faire sans "vrai" codage mais avec JCE et les styles (et avec une image de fond non décomposée)

              - Création d'un style CSS qui va appeller l'image de fond (avec un height de l'image pour qu'elle s'affiche en entier)
              - Création d'un style CSS pour nom prénom
              - Création d'un style CSS pour mini CV
              - Dans mon article, je demande à JCE une table de 1 ligne et 2 colonne.
              - Dans la première colonne, j'insère la photo avec mosimage.
              - Dans la deuxième colonne je mets le texte nom prénom et mini CV.
              - Je sélectionne nom prénom auquel j'applique le style CSS pour nom prénom
              - Je sélectione mini CV auquel j'applique son style.
              - J'essaie de sélectionner toute la table pour appliquer le style qui appelle l'image de fond.

              Bon ca marche pas. Je me dis effectivement qu'il faut que je me mette dans le code pour jouer avec les div et tout mais je suis très faible à ce niveau et d'un côté, je ne comprends pas bien pourquoi je ne pourrais pas m'en sortir avec l'interface ergonomique de JCE et des styles et des images.

              Non pas que je rechigne à aller dans le code, mais je veux y aller doucement tout en pouvant continuer d'avancer sur mon site. N'est ce pas l'avantage de joomla justement !

              Gros bisous à tous et MERCI.

              senzu
              http://www.senzu.net
              http://www.compagniexyz.com
              http://www.lebravesoldatchveik.org

              Commentaire

              Annonce

              Réduire
              1 sur 2 < >

              C'est [Réglé] et on n'en parle plus ?

              A quoi ça sert ?
              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
              Comment ajouter la mention [Réglé] à votre discussion ?
              1 - Aller sur votre discussion et éditer votre premier message :


              2 - Cliquer sur la liste déroulante Préfixe.

              3 - Choisir le préfixe [Réglé].


              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

              2 sur 2 < >

              Assistance au forum - Outil de publication d'infos de votre site

              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

              UTILISER À VOS PROPRES RISQUES :
              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

              Problèmes connus :
              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

              Installation :

              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

              Archive zip : https://github.com/AFUJ/FPA/zipball/master

              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
              et remplacer www. votresite .com par votre nom de domaine


              Exemples:
              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
              Télécharger le script fpa-fr.php dans: /public_html/
              Pour executer le script: http://www..com/fpa-fr.php

              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
              Télécharger le script fpa-fr.php dans: /public_html/cms/
              Pour executer le script: http://www..com/cms/fpa-fr.php

              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
              Voir plus
              Voir moins
              Travaille ...
              X