Partage
  • Partager sur Facebook
  • Partager sur Twitter

Avis pour une decoupe CSS d'un design

Sujet résolu
    18 mars 2006 à 12:01:51

    Bonjour à tous, je voulais un avis confirmé pour la decoupe de ce patron de design sachant que toute la partie haute (le header) est composé d'image uniquement (donc les bouton1 bouton2 etc.. aussi) :

    Patron ICI

    1. Comment decoupé cette partie en CSS proprement. Il fut un temps j'aurais utilisé les tableaux mais ce n'est plus d'actualité je pense.

    2. Aussi comment faire le separateur entre le corps et le menu de gauche (c'est une ligne verticale de 1px)

    3. Dernière chose comment faire l'image en filigrane sous le texte

    • Partager sur Facebook
    • Partager sur Twitter
    Mon portfolio : http://www.tonydugard.com
      18 mars 2006 à 12:07:00

      Salut,

      1. Avec desdiv, va voir les tutos, c'est bien expliqué

      2. Avec le css, dans ton div de corps div#corps {border: 1px solid #000}

      3. En la mettant en background div#general {background: url('...') bottom left}

      Un petit résumé des réponses...
      • Partager sur Facebook
      • Partager sur Twitter
        18 mars 2006 à 12:08:48

        Tu fais un div pour le header, un div pour le corps de page et un div pour le footer.

        Dans le div pour le header, tu crées un div aligné à droite pour le logo, un div aligné à droite pour le reste.

        Pareil pour le corps de menu
        • Partager sur Facebook
        • Partager sur Twitter
          18 mars 2006 à 12:10:49

          Ok merci pour ta reponse rapide.

          1. J'ai été voir les tutos, je sais utiliser les div le seul problème c'est que je vois pas du tout comment je pourrais hiérarchiser le header

          2. Pour le div de corps j'avais bien pensé à ca mais ca va encadré le corps et moi je veux qu'une bordure à gauche qui ne fait pas la hauteur du corps mais plus courte

          3. Si je la met en background je vais avoir une image de 700*450 toute blache avec au coin bas-gauche l'image en filigrane (ca fait lourd pour une si petite image :) )
          • Partager sur Facebook
          • Partager sur Twitter
          Mon portfolio : http://www.tonydugard.com
            18 mars 2006 à 12:50:24

            <HS> Y'a un problème avec mon topic sur la site des topics du forum on voit pas que j'ai répondu</HS>

            EDIT : Désolé maintenant c'est bon mais je vois 4 message dans le topic alors qu'il y en a 5 ^^
            • Partager sur Facebook
            • Partager sur Twitter
            Mon portfolio : http://www.tonydugard.com
              18 mars 2006 à 12:50:56

              fais ton image et je te dirai comment la decouper
              • Partager sur Facebook
              • Partager sur Twitter
                18 mars 2006 à 12:54:33

                Ce n'est pas la version finale mais ca s'en approche il reste encore un peu de travail :

                Image utilisateur

                Je veux pas que tu me fasse le decoupage mais que tu me dise comment procéder (j'aime bien faire les choses par moi-même :) )
                • Partager sur Facebook
                • Partager sur Twitter
                Mon portfolio : http://www.tonydugard.com
                  18 mars 2006 à 13:08:24

                  tu crees un div de la largeur du header avec en bg l'image de la bordure ombée position center bottom repeat-x. a l'interieur tu mats un div float:left pour le logo, un pour l'image de droite en bg et une liste a puce pour les liens qu'ils soient textes ou images.
                  pour le corps un div gauche float-left; bgimage position left bottom a droite un div bg image de la bordurte verticale position left bottom
                  footer bg image ombrée du bas center top repeat-x bg-color#555
                  • Partager sur Facebook
                  • Partager sur Twitter
                    18 mars 2006 à 13:10:03

                    Tu m'en voudras pas si je te dis que tu n'as pas été clair :)
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Mon portfolio : http://www.tonydugard.com
                      18 mars 2006 à 13:15:43

                      j'ai été succint, je ne peux pas m'etendre ici, mais c'est quand meme un apercu complet de la decoupe
                      • Partager sur Facebook
                      • Partager sur Twitter
                        18 mars 2006 à 13:53:46

                        Tu peux pas être un peu moins succint s'il te plait :)
                        • Partager sur Facebook
                        • Partager sur Twitter
                        Mon portfolio : http://www.tonydugard.com
                          18 mars 2006 à 14:51:30

                          En tout cas, il est très beau ton site. Y'en a qui ont de la chance...
                          • Partager sur Facebook
                          • Partager sur Twitter
                            18 mars 2006 à 15:01:36

                            Pour ton corps de texte, je m'ai trompé (^^)

                            C'est div#corps {border-left: 1px solid #000;}

                            Alors, pour le reste du découpage

                            - Tu dois mettre ton header avec la taille maximale
                            - ton menu de gauche avec un float:left et une width bien déterminée
                            - ton corps avec un margin-left de la même taille que ton corps (+ ta bordure)
                            - pour ton footer, tu fais un clear:both + la taille maximale...

                            En gros c'est ça... Je crois que tu comprendras, donc j'économise mes touches :D
                            • Partager sur Facebook
                            • Partager sur Twitter
                              18 mars 2006 à 15:02:19

                              je ne suis pas tres bon pedagogue
                              • Partager sur Facebook
                              • Partager sur Twitter
                                18 mars 2006 à 15:06:45

                                Maintenant que tu le sais, il faut faire quelque chose :p (va partir en troll là...)
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  18 mars 2006 à 15:53:23

                                  va le voir a cette adresse si ca te plait une fois decoupé
                                  http://www.jp949.info/design/site_v1/site_v1.html
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    18 mars 2006 à 18:32:56

                                    Effectivement ca me plait :) je vais donc potassé ton css pour voir comment ta formuler tout ca

                                    Si j'ai un probleme je reposterai ;)

                                    Merci a vous deux

                                    @Plume Séraphique

                                    Merci ;) effectivement je me debrouille mieux en graphisme qu'en decoupage :)

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    Mon portfolio : http://www.tonydugard.com
                                      19 mars 2006 à 11:44:47

                                      J'ai continuer le CSS que tu m'a donné en changeant des point qui me dérangeait, mais la je m'attaque à la navbar et j'ai des problème d'espacement entre les images :

                                      Page ici

                                      Du coup j'arrive pas à faire rentrer mon menu dans l'espace alloué

                                      EDIT : HAAA j'ai enfin trouvé il fallait rajouté dans le #menu li un float:left

                                      Merci encore à vous
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      Mon portfolio : http://www.tonydugard.com

                                      Avis pour une decoupe CSS d'un design

                                      × 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