Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mise en page d'images découpe

    12 décembre 2005 à 13:47:44

    Bonjours à tous,

    Je suis un zéro parfaitement débutant, et j'avoue être un peu perdu avec toutes ces balises de CSS ! :euh:

    Le cours de Mateo, super bien fait au demeurant, ne traite principalement que de la mise en place du texte, et très peu des images ! Et mon problème concerne les images...

    J'ai crée un design pour un entête de site, que j'ai "découpé" en plusieurs images (cet entête inclu des images qui me serviront pour le menu).

    Je cherche le moyen adéquate pour installer toutes ces images dans une page CSS externe, de façon à avoir un design centré (la largeur du design faisant 760px), et les images horizontalement placées les unes à côté des autres, le tout sur 3 hauteurs.

    Si quelqu'un pouvait avoir la gentillesse de me dire rapidement comment je peux procéder, ce serait super. :D:D
    • Partager sur Facebook
    • Partager sur Twitter
      12 décembre 2005 à 13:54:50

      Je ne comprend pas très bien ta demande... Tu entend quoi par "installer les images dans une feuille css externe" ???
      • Partager sur Facebook
      • Partager sur Twitter
        12 décembre 2005 à 13:59:44

        creer une page css reliée à ma page xhtml, comme nous explique Mateo dans ses cours.
        C'est dans cette page de CSS que j'envisage de positionner les liens de chaque image
        En fait, je ne veux pas mettre le CSS directement dans le xhtml
        • Partager sur Facebook
        • Partager sur Twitter
          12 décembre 2005 à 14:06:20

          "positionner les liens" dans le css ???

          Tu veux dire quoi exactement ?
          Tes liens ne vont pas être écris dans le css...
          Tu vas juste pouvoir créer une "class" que tu vas ensuite appliquer à tes images (dans le fixhier xhtml cette fois).
          • Partager sur Facebook
          • Partager sur Twitter
            12 décembre 2005 à 14:17:11

            je souhaiterais faire comme Mateo a expliqué dans son cours... tout simplement !
            c'est à dire une page xhtml avec, par exemple, un lien pour l'une des images, qu'on pourrait écrire comme ça
            <div id="en_tete1"> <!--block vide - integration image par CSS -->
            </div>


            et ensuite une page css, liée, avec le code correspondant qui pourrait être par exemple :
            #en_tete1
            {

            width: 70px;
            height: 36px;
            background-image: url('designmenu1/menu1.jpg');
            background-repeat: no-repeat;
            margin-bottom: 10px;
            }



            Donc, comme nous l'explique Mateo, j'appelle mes images par le CSS.

            Dans le cas de mon entête avec plusieurs images-découpe, je ne sais pas comment, avec le CSS, je peux positionner correctement les images les unes à coté des autres, et les unes en dessous des autres (j'ai 3 hauteurs comme ça !), tout en ayant un design centré

            Est ce que je dois utiliser un <div id> pour chaque image ? ou bien y a t il une autre méthode ?
            • Partager sur Facebook
            • Partager sur Twitter
              12 décembre 2005 à 14:26:15

              Salut,

              En fait pour tes images, tu as 2 solutions:

              • Soit tu utilises la propriété background-image dans ta feuille de style pour avoir tes images en image de fond.(CSS)
              • Ou alors tu l'insères directement dans ton code HTML avec la balise <img />


              La première solution est par exemple celle qu'utilise M@teo pour la bannière dans le TP du cours XHTML/CSS. Tu peux l'utiliser pour tes menus également.

              Citation : citizen

              Je cherche le moyen adéquate pour installer toutes ces images dans une page CSS externe, de façon à avoir un design centré (la largeur du design faisant 760px), et les images horizontalement placées les unes à côté des autres, le tout sur 3 hauteurs.



              Je n'ai pas bien compris de quelles images tu veux parler.
              Je pense qu'il faudrait que tu revois la partie sur le positionnement des blocs.

              Suis également ces liens:

              http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

              http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

              Bon courage, @++
              • Partager sur Facebook
              • Partager sur Twitter
                12 décembre 2005 à 14:28:04

                ha !

                Tu veux mettre tes images en background !

                Ben tu vas devoir faire un ' div id="" ' pour chaque image et faire en sorte que tout cela souit collé ou aligné comme tu le souhaites en jouant sur le positionnement, les margin et padding...

                Enfin moi je crois que c'est ça qu'il te faut... ;)
                • Partager sur Facebook
                • Partager sur Twitter
                  12 décembre 2005 à 14:32:35

                  Citation : fg63

                  ha !

                  Tu veux mettre tes images en background !

                  Ben tu vas devoir faire un ' div id="" ' pour chaque image et faire en sorte que tout cela souit collé ou aligné comme tu le souhaites en jouant sur le positionnement, les margin et padding...

                  Enfin moi je crois que c'est ça qu'il te faut... ;)



                  Je ne vois pas d'autres solutions non plus, à moins de transformer tes 3 images en une seule. Pour une bannière, ça doit être possible, non?
                  • Partager sur Facebook
                  • Partager sur Twitter
                    12 décembre 2005 à 14:37:54

                    tout depend du nombre d'images qui composent ton menu si il y en a trop ca va etre galere a ce moment la tu fais une liste a puce et les images en html <img>
                    • Partager sur Facebook
                    • Partager sur Twitter
                      12 décembre 2005 à 14:56:05

                      Merci à tous : vous me confirmez ce que je pensais avoir compris devoir faire ! mais je n'en étais pas sûr !!!!

                      En résumé, si j'ai bien compris ? :
                      si j'utilise la propriété background-image dans ma feuille de style pour avoir mes images en image de fond, je dois faire un <div id=""> pour chaque image et à chaque fois je vais devoir calculer son positionnement exact par rapport à sa ou ses images voisine(s)... donc y aller à tâtons !!! gloups... :-°

                      Et comment je centre tout ça ? faut il utiliser un "float" quelquepart ??? ou un text-align global pour que ça fonctionne sur tous les navigateurs y compris IE ?
                      • Partager sur Facebook
                      • Partager sur Twitter
                        12 décembre 2005 à 15:11:49

                        Re,

                        Citation : Pas de titre

                        i j'utilise la propriété background-image dans ma feuille de style pour avoir mes images en image de fond, je dois faire un <div id=""> pour chaque image et à chaque fois je vais devoir calculer son positionnement exact par rapport à sa ou ses images voisine(s)...



                        C'est ça. cf la partie du cours sur le positionnement + les 2 liens cités un peu plus haut.

                        Citation : Pas de titre

                        Et comment je centre tout ça ? faut il utiliser un "float" quelquepart ???



                        La propriété float ne sert pas à centrer un élément.

                        Citation : Pas de titre

                        ou un text-align global pour que ça fonctionne sur tous les navigateurs y compris IE ?



                        Non plus. La propriété text-align sert à centrer du texte.

                        @++

                        • Partager sur Facebook
                        • Partager sur Twitter
                          12 décembre 2005 à 15:27:14

                          pour centrer tout mon design, quelque soit la résolution écran, c'est un margin: auto; alors que je dois placer dans le body ?

                          excusez moi, mais je suis vraiment perdu par moment ! il faut le temps de tout assimiler...
                          mais je vous remercie tous de m'avoir répondu.. je pense que je vais arriver à m'en sortir, avec un peu de patience !
                          • Partager sur Facebook
                          • Partager sur Twitter
                            12 décembre 2005 à 15:53:31

                            Re,

                            Tu peux appliquer un...:
                            body
                            {
                            margin:auto;
                            }


                            ...mais à mon avis l'important est de ne pas te précipiter pour faire ton site. Relis le cours et les autres ressources disponibles sur le net afin de tout assimiler. Alsacréations est notamment une bible pour qui veut apprendre et comprendre le CSS.


                            Bon courage, @++
                            • Partager sur Facebook
                            • Partager sur Twitter

                            Mise en page d'images découpe

                            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                            • Editeur
                            • Markdown