Partage
  • Partager sur Facebook
  • Partager sur Twitter

[FAQ] Mise en place

Donnez-nous vos idées...

    10 juin 2006 à 0:36:13

    Question : comment faire faire pour obtenir le code qu'on désire sur base d'un autre site ?


    Réponse (en deux parties)

    1. Pour le HTML



    Il existe un moyen très simple pour cela : regarder le code source !

    Pour Internet Explorer, allez dans "affichage" puis "source".
    Dans Firefox, c'est encore plus simple, il suffit de faire "Ctrl+u" et vous obtiendrez quelquechose comme ceci :

    Image utilisateur


    Si seulement une partie du code source vous intéresse (ce qui est souvent le cas), vous pouvez sélectionner cette partie puis un petit clique droit et choisissez "code source de la sélection" ;)

    Voilà pour le html.

    2. Pour le CSS



    Pour le CSS, c'est un tout petit rien plus compliqué. En fait il suffit d'aller sur le site du W3C à l'adresse de validation CSS.
    Vous copiez l'adresse du site ou vous avez vu ce que vous cherchiez, pressez "enter" et le tour est joué vous avez le css du site également !

    Il ne vous reste plus qu'à retrouver l'information par rapport à la bonne balise !

    J'espère pouvoir faire gagner du temps à tous !

    RévoX

    Citation : rei_angel

    Pour Firefox, avec le clique droit en faisant Information sur la page, dans l'onglet Lien il y tout ce qui compose la page donc le css, etc ...
    Ensuite faites un clique droit sur ce qui vous intéresse et encore grâce au clique droit faites copier. Enfin collez ce que vous venez de copier dans votre barre d'adresse.



    PS Si vous désirez ajouter un commentaire à ce post, envoyez-le moi par MP, je citerai votre message dans ce post. Je trouve qu'il est préférable que tout se situe dans le même post pour des raisons de lisibilité.

    Citation : Darkodam


    1.Web Developer



    C'est un plugin de Firefox permettant d'effectuer pas mal d'actions sur une page internet dont la visualisation de la source HTML, des sources CSS et du javascript. L'avantage étant que cet outil regroupe tout les fichiers d'un même type et les organise sur une seule page, ce qui permet d'avoir sous les yeux tout le code dont on a besoin sans avoir à jongler entre les onglets ni a bidouiller le code source d'une page pour chercher toutes les balises de style ou de javascript. On peut aussi modifier dynamiquement le code HTML et CSS de la page (en local) et observer le résultat directement.


    2.View Source Chart



    Un autre plugin Firefox qui permet de visualiser de facon ordonnée le code source d'une page. Et comme une image vaut mieux qu'un long discours : <couleur nom="turquoise"></couleur>

    Image utilisateur



    • Partager sur Facebook
    • Partager sur Twitter
    Liste ou site de naissance original à découvrir sur www.o-liste.net
      14 juin 2006 à 18:57:47

      Remarque HTML : vous pouvez aussi taper :
      view-source:http://www.un-site.com
      dans la barre d'adresse de votre navigateur pour afficher le code source d'une page spécifique (fonctionne, à priori, sur tous les navigateurs actuels (même I.E ! ;) ))
      Ce peut-être pratique lorque le site dont vous voulez voir la source bloque le clique droit.

      Remarque CSS : Après avoir affiché le code source d'une page, copiez l'URL (attribut "href") d'une feuille de style (dans une balise <link />) puis collez-la dans la barre d'adresse de votre navigateur pour afficher la feuille de style voulue.
      • Partager sur Facebook
      • Partager sur Twitter
        19 juin 2006 à 11:19:33

        Piotr > on doit posté question ET réponse et sans faute non plus.
        • Partager sur Facebook
        • Partager sur Twitter
          30 juin 2006 à 13:06:37

          Comment faire lire une propriété CSS uniquement à IE (Hack) ?

          Si on veut donner un padding-left de 5px pour IE alors qu'il faut 10px aux autres navigateurs, on écrit cela:

          padding-left: 10px;
          _padding-left: 5px;


          Le underscore (_) rendra la propriété illisible à tout les navigateurs sauf à IE (5.5, 5.0, 6.0 et IE4L)
          • Partager sur Facebook
          • Partager sur Twitter
            30 juin 2006 à 13:19:08

            Et rendra la feuille CSS non-valide.
            • Partager sur Facebook
            • Partager sur Twitter
              30 juin 2006 à 13:24:57

              Citation : IntoX94

              Comment faire lire une propriété CSS uniquement à IE (Hack) ?


              Si on veut donner un padding-left de 5px pour IE alors qu'il faut 10px aux autres navigateurs, on écrit cela:


              padding-left: 10px;
              _padding-left: 5px;



              Le underscore (_) rendra la propriété illisible à tout les navigateurs sauf à IE (5.5, 5.0, 6.0 et IE4L)



              Non, on écrit cela, et c'est valide :
              #divtruc
              {

              padding-left : 10px !important ;
              padding-left : 5px ;
              }


              La propriété !important n'est pas encore reconnue par ie, par défaut, ce navigateur prend donc la dernière propriété écrite.
              • Partager sur Facebook
              • Partager sur Twitter
                1 juillet 2006 à 7:42:57

                Empêcher Mozilla et/ou Opera de lire un code CSS et pas l'autre ?



                Caché du CSS à Opera mais pas Mozilla :



                Une seul manière et pas forcément pratique, puisqu'obligatoirement placer dans un document HTML
                Pas moyen de le lier donc. Enfin je n'ai pas trouvé tout du moins.

                <style type="text/css" media="sc&#82;een">
                <!--
                /* les styles qui suivent ne sont pas lus par opera*/
                .cat_l{color:#F5F;}
                -->
                </style>


                Caché du CSS à Mozilla mais pas Opera :



                Cela risque de le cacher à pas mal de navigateur en faite car il faut utiliser du JS :( et peu pratqiue comme le code-ci avant:

                <script language="javascript" type="text/javascript">
                <!--
                if(!(document.getElementById&&!document.all))
                document.write('<STYLE TYPE="text\/css"> .test2b {color: green } \/* hides from NS6.1, Mozilla1.0 and Opera when posing as any of the former. Make sure the script is on one line and to comment out slashes with backslashes. *\/ <\/STYLE>');
                //-->
                </script>


                Source : http://hem.fyristorg.com/g-force/test/hidecss.htm


                Si vous mettez un margin ou un padding négatif sur mozzila et que dans votre élément se trouve un lien... Celui-ci ne sera plus reconnue comme lien par mozilla, (bonjour le casse tête ...)
                • Partager sur Facebook
                • Partager sur Twitter
                  1 juillet 2006 à 9:58:06

                  Citation : Gectou4

                  Pas moyen d ele lier donc. Enfin je n'ai pas trouvé tout du moins.



                  Suffit d'utiliser @import ^^ Mais une sorte de hack ça. A ne pas utiliser donc :colere2:;)
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

                    3 juillet 2006 à 11:15:06

                    Pour ce qui des tableaux margin: auto centre sans souci sur ie et firefox.

                    Il faut juste savoir que si vous n'avez pas de doctype margin: auto n'agit pas avec ie. Cela rapelle que le doctype n'est pas seulement là pour le validateur.

                    • Partager sur Facebook
                    • Partager sur Twitter
                      25 juillet 2006 à 13:47:20

                      Comment faire pour sauter des lignes dans une liste ?


                      Quand dans une liste on met des <br /> ce n'est pas valide, il faut rajouter du css.


                      <ul>
                          <li><a href="page1.html">Lien</a></li>
                          <li><a href="page2.html">Lien</a></li>
                          <li><a href="page3.html">Lien</a></li>
                          <li><a href="page4.html">Lien</a></li>
                      </ul>



                      li
                      {
                         margin-bottom: 10px; /* Mettez la valeur que vous voullez, c'est le nombre de pixel qu'il y a entre les li */
                      }


                      Voilà
                      • Partager sur Facebook
                      • Partager sur Twitter
                        27 juillet 2006 à 13:05:37

                        Effacé. Désolé d'avoir posté ici.
                        • Partager sur Facebook
                        • Partager sur Twitter
                          27 juillet 2006 à 22:02:48

                          Citation : k1mpeR

                          Comment faire pour sauter des lignes dans une liste ?


                          Quand dans une liste on met des <br /> ce n'est pas valide, il faut rajouter du css.


                          Mettre des <br /> dans un <li> ce n'est pas interdit :
                          <!ELEMENT li %Flow;>
                          <!ATTLIST li
                          %attrs;
                          >

                          Et si je reprend ton exemple, il n'y a pas de saut de ligne mais un espacement entre les items, donc au final, la réponse n'est pas la bonne il faut à mon avis jouer avec line-height pour imiter un saut de ligne entre deux items.
                          • Partager sur Facebook
                          • Partager sur Twitter
                            27 juillet 2006 à 22:35:02

                            On ne saute pas de ligne mais sa revien au même.
                            • Partager sur Facebook
                            • Partager sur Twitter
                              27 juillet 2006 à 22:45:29

                              Pas si la hauteur de ligne est différente de 10px.
                              • Partager sur Facebook
                              • Partager sur Twitter
                                28 juillet 2006 à 16:08:17

                                Comment créer 3 "colonnes" sans tableaux ?



                                Il suffit d'utiliser float une seconde fois.
                                N'oubliez pas de préciser une taille.

                                Par exemple, pour trois colonnes de même largeur:

                                <div style="float: left; width: 30%;">
                                Tout à gauche
                                </div>
                                <div style="float: left; width: 30%;">
                                Au milieu
                                </div>
                                <div style="float: right; width: 30%;">
                                Tout à droite
                                </div>


                                N'oubliez pas non plus le clear: both; au besoin.
                                • Partager sur Facebook
                                • Partager sur Twitter
                                Anonyme
                                  17 août 2006 à 15:19:58

                                  Citation : llouis


                                  Non, on écrit cela, et c'est valide :

                                  #divtruc
                                  {

                                  padding-left : 10px !important ;
                                  padding-left : 5px ;
                                  }



                                  La propriété !important n'est pas encore reconnue par ie, par défaut, ce navigateur prend donc la dernière propriété écrite.


                                  Valide avec des warning donc pas terrible (redéfinition de propriété)
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    23 août 2006 à 22:55:39

                                    Les !important sont tout à fait valides et utilisables, contrairement au _...
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      26 août 2006 à 0:18:19

                                      oui , il sont valide mais risque de vous piegez ! :)
                                      si vraiment il s'agit de reglé un bug de IE , il y parfois d'autre methode plus efficace en css qui risque moins de vous des tours . appliqué un display:inline; sur un element flottant n'a aucune incidence ,sauf eliminer des bugs de marges dans IE par exemple .... et il y en a d'autres astuces de cet accabit n'usant pas de hacks , juste une petite surcharge css ...

                                      ah ,un exemple de piege :
                                      a {
                                      color:red!important;
                                      color:gray;
                                      }
                                      a:hover {color:yellow;
                                      }


                                      a votre avis ! que va t-il se passer au survol du lien dans IE ? et dans firefoxe ?

                                      Surement qu'on va pas comprendre pourquoi le a:hover n'est pas compris dans firefoxe , c'est vrai que le !important est appliqué a a et pas a:hover .
                                      Ensuite si il faut se rappeller des !important dans le css et se dire qu'il vont peut-être etre appliqué ailleurs sans que l'on s'y attende , ça devient un vrai casse-tête .

                                      Microsoft a mis en place la possibilite de se servir des commentaires conditionnels (plus facile et moins couteux pour eux que d'implementer les standards , mais ils ont fait quelque chose !) , alors faites en usage :) non mais alors , ne melangez pas torchons et serviette et prenez l'habitude d'appliquer vos regles css comme elle le devraient et de corriger IE 5 , 5.5 et 6 , (un peu moins IE 7) a part , de plus vos mise a jour css n'en seront que plus aisée .
                                      ++
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        21 septembre 2006 à 18:59:10

                                        bon je réponds un peu tard mais ce n'est peut-êter pas perdu, pour celui qui voulait vailder son formulaire par un lien !

                                        <a href="javascript:formSubmit()">Soumettre mon formulaire</a>
                                        ou
                                        <input type="Button" value="valider" onClick="javascript:formSubmit()" />

                                        On peut aussi mettre une image, il suffit de prendre le code du lien, mettre une image ente les balises et mettre la bordure d'image à 0 !

                                        et un petit javascript dans le head :

                                        function formSubmit{
                                        document.nom_de_mon_formulaire.submit()
                                        }


                                        bien sûr il faut que le client accepte lte javascript ;)
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          21 septembre 2006 à 19:09:27

                                          Citation : the-m

                                          On peut aussi mettre une image, il suffit de prendre le code du lien, mettre une image ente les balises et mettre la bordure d'image à 0 !


                                          Ben...
                                          <input type="image" />

                                          Non ? o_O
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            23 septembre 2006 à 14:36:34

                                            On doit poster la question et la réponse bon sang :colere2:
                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              24 septembre 2006 à 14:00:05

                                              Bonjour, je n'arrive pas à mettre une couleur de fond, pouvez-vous m'expliquer comment faire ?Merci d'avance...
                                              Meredith
                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                24 septembre 2006 à 15:22:27

                                                OMG... poses ta question ici STP... et prière de lire le sujet du topic avant de poster...
                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  22 octobre 2006 à 14:28:28

                                                  Question : Comment centrer mon div verticalement ?

                                                  Réponse :
                                                  <html>
                                                  <head>
                                                  <style type="text/css">
                                                  <!--

                                                  div.centre
                                                  {
                                                  position:absolute;
                                                  left:50%;
                                                  top:50%;
                                                  width:200px;
                                                  height:200px;
                                                  margin-left:-100px; /* Cette valeur doit être la moitié négative de la valeur du width */
                                                  margin-top:-100px; /* Cette valeur doit être la moitié négative de la valeur du height */
                                                  background-color:#CCCCDD;
                                                  }

                                                  -->

                                                  </style>

                                                  </head>
                                                  <body>



                                                  <div class="centre">
                                                  ce calque est centré dans la page

                                                  </div>


                                                  </body>
                                                  </html>

                                                  (via)
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    28 octobre 2006 à 22:04:19

                                                    bonjour,

                                                    Comment englober un flottant ?

                                                    Reponses : 4 Methodes.

                                                    1ere methode classique et tres repandue css + html :

                                                    ajouté dans le conteneur et en dernier un <hr> avec en regle css : clear:both (ou right ou left, selon configuration de la page ). Cette methode peut ne pas etre appliquable , car le clear both va aussi prendre en compte les elements flottants exterieurs. :( , zut alors.

                                                    2eme methode css
                                                    Elle consiste en quelque sorte a activé le "layout" dans firefoxe (par exemple).

                                                    appliqué un overflow:hidden ou auto au conteneur , .... oui mais si je donne une dimension en hauteur a mon div , que se passe t-il quand ça depasse ? ... la regle overflow: est appliqué. (Il faudra choisir entre extensible ou fixe ):)

                                                    3eme methode css
                                                    Cette methode va consisté a reprendre la premiere methode sans ajouté de balise dans le html mais de provoqué cet etat par le biais du css a l'aide du pseudo element :after , avec les mêmes effets et defauts.

                                                    .conteneur:after {
                                                    content: "";
                                                    display: block;
                                                    clear: both;
                                                    }

                                                    une simple "class" suffit a reutilisé le principe a plusieurs reprise dans la page.
                                                    Bien entendu , IE ne reconnait pas cette régle , mais il englobe généralement de lui même les flottants.

                                                    4eme methode css

                                                    Cette methode va consister , comme l'overflow a activer le "layout" et ainsi forcer l'affichage en englobant le flottant dans la zone du conteneur.

                                                    Cette regle css est : display:table; pour firefoxe , et/ou au choix pour opera display:inline-block cette seconde valeur peut-etre accessoirement utilisée pour IE.
                                                    en adjoignant a cette methode un width:100%; l'element retrouve son comportement de balise de type "block" en s'etalant sur la largeur disponible de son parent .

                                                    d'accord , mais dans firefoxe , l'element va se comporter comme un tableau , et s'elargir si le contenu (image ou tres long mots), est inséré ? ... jamais content ! :p

                                                    5eme methode
                                                    (je n'en ai pas en tête , mais peut-etre y en a t-il dautres. )

                                                    Nous voila donc tres content , ces satanées flottant qui depassent ont maintenant au moins 4 methodes qui permet de les garder en boites !

                                                    Chacunes de ces methodes auront leur inconvenients , a vous de choisir celle qui vous convient le mieux.

                                                    voici le code test de la 4eme methode ( comportement que j'ai remarqué en cherchant a faire de l'alignement-vertical d'element de type "block" ):
                                                    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                                                    <html>
                                                    <head>
                                                    <title>display:table; / display:inline-block;</title>
                                                    <style type='text/css'>
                                                    ul {
                                                            float:left;
                                                            margin:0 1em;
                                                            padding:0 1em;
                                                            border:1px solid #eee;
                                                    /* enlevons le bug de "double marge" d'IE */
                                                            display:inline;
                                                    }
                                                    div {
                                                    background:gray;
                                                    /* activons les "layout" respectif des navigateurs */
                                                            display:table;       /* pour ff */
                                                            display:inline-block;/* pour IE , opera  et les autres vraisemblablement */
                                                            width:100%;          /* pour reprendre le comportement de base d'un "block" */
                                                    }</style>
                                                    </head>
                                                    <body>
                                                    <div>
                                                    <ul>
                                                    <li>item</li>
                                                    <li>item</li>
                                                    <li>item</li>
                                                    <li>item</li>
                                                    <li>item</li>
                                                    <li>item</li>
                                                    <li>item</li>
                                                    <li>item</li>
                                                    </ul>
                                                    <h1>Alternative a , overflow, clear both ou :after</h1>
                                                    <p>un petit paragraphe pour faire : bonjour le monde ! ça va ?</p>
                                                    </div>
                                                    </body>
                                                    </html>


                                                    et le lien pour les faineant du analyser/copier/coller/comprendre :)
                                                    http://gcyrillus.free.fr/trucs_css/bug-flottant-nouvelle-methode.html

                                                    ++


                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      3 novembre 2006 à 2:12:04

                                                      Hello ! Je traite ici les questions les plus souvent posées (qui non pas déjà été abordées).


                                                      Comment ôter la bordure autour d'une image-lien ?


                                                      Réponse :


                                                      <a href="url"><img src="url_de_image" alt="nom" id="image_lien" /></a>


                                                      #image_lien
                                                       {

                                                        border: none;
                                                       }





                                                      Comment changer l'image-lien au passage de la souris ?


                                                      Réponses, 2 solutions :


                                                      Solution n°1 : avec le (x)html



                                                      <a onmouseover="nom.src='image_2.gif'" onmouseout="nom.src='image_1.png'"href="url" ><img src="image_1.png" name="nom"></a>


                                                      Attention ! Le nom est très important car c'est ce qui lis les images entre-elles.
                                                      Le nom doit être le même pour tous !



                                                      Solution n°2 : avec le css



                                                      <a href="url" id="image_lien"></a>


                                                      #image_lien
                                                      {

                                                        cursor: pointer; /* si l'on ne pas afficher la main */
                                                        background-image: url("url_image_1");
                                                        width: 100px;
                                                        height: 100px;
                                                      }
                                                      #image_lien:hover
                                                      {
                                                        cursor: pointer; /* si l'on ne pas afficher la main */
                                                        background-image: url("url_image_2");
                                                        width: 100px;
                                                        height: 100px;
                                                      }


                                                      N'oubliez la première question, si vous voulez ôter les bordures.. vous savez comment faire ;)




                                                      Optimiser son référencement sur les moteurs de recherche


                                                      1 -/ Le contenu



                                                      Cela peut paraître tout simple mais il est primordial d'avoir un contenu utile et original, il faut intéresser le visiteur. Il est également indéniable qu'un gros site (plus de 100 pages) aura bien plus de chances d'être bien classé qu'un petit site de 10 pages. D'une part car ayant plus de contenu, vous avez plus de mots-clés susceptibles de correspondre avec une recherche sur Google. D'autre part vous augmenterez globalement le PageRank de votre site.


                                                      2 -/ De nombreux liens externes



                                                      Il est absolument indispensable d'avoir un grand nombre de liens pointant vers votre site. Proposez aux webmasters de sites similaires d'échanger des liens. N'oubliez pas qu'il est parfois intéressant d'avoir un lien vers une page différente de la page d'accueil : le lien sera sans doute plus adapté au contenu de la page faisant le lien, donc plus intéressant pour le visiteur, et vous améliorerez directement le PageRank de votre page spécifique.


                                                      3 -/ Des liens externes de qualité



                                                      Choisissez bien (dans la mesure du possible) les sites à qui vous demandez de faire un lien vers le vôtre. Privilégiez bien sûr les sites ayant un bon PageRank (ou plus précisément ceux dont la page de liens a un bon PageRank et peu de liens). Préférez également les sites traitant du même sujet : en général il est plus fréquent que l'échange de liens se fasse, cela profite au visiteur, et vous resterez dans les mêmes mots-clés (ce qui pourrait être pris en compte par Google).


                                                      4 -/ Bien choisir le titre de chaque page



                                                      C'est un critère très important. Le titre doit refléter le contenu réel de la page. Il ne doit pas être constitué d'une série de mots-clés, bien que le choix des mots soit primordial. Placez de préférence les mots les plus stratégiques en début de titre. La taille maximale conseillée est d'environ 60 caractères.


                                                      5 -/ S'inscrire dans les grands annuaires



                                                      Certains semblent avoir une importance plus grande pour Google, il faut donc absolument y être inscrit : il s'agit de DMOZ et Yahoo!. Les autres annuaires (MSN, Voila, Nomade, etc.) apportent également non seulement du trafic mais aussi améliorent votre PageRank, au prix d'une soumission rarement gratuite...


                                                      6 -/ Pas de frames, et un nom de domaine



                                                      N'utilisez pas de frames, donc pas non plus d'adresse de redirection (style Ulimit) : achetez-vous un nom de domaine et un hébergement payant. En plus avec un nom de domaine vous ne risquez pas de changer d'adresse (ex : hébergeurs gratuits qui se font racheter et changent d'adresse), ce qui est catastrophique pour le référencement.


                                                      7 -/ Un site toujours disponible



                                                      Googlebot, Le robot d'indexation de Google réagit comme tout autre visiteur : s'il vient voir votre site et que celui-ci n'est pas accessible (ex : pages introuvables, erreur 404), alors il risque de rayer votre site de la liste jusqu'à la prochaine mise à jour (mensuelle). Encore une fois, un site hébergé chez un professionnel aura plus de chances d'être toujours accessible que chez un gratuit.


                                                      8 -/ Interconnexion de vos pages



                                                      Bien penser à lier vos pages entre elles, en utilisant des mots ciblés au lieu de liens du style "cliquez ici". En général plus une page est importante, plus elle doit recevoir de liens des autres pages (structure hiérarchique arborescente). Il est conseillé de concentrer sur une ou quelques pages les liens externes.
                                                      Il est souvent utile de faire un plan du site, qui permet à vos visiteurs mais aussi aux robots d'indexation de parcourir l'ensemble des pages de votre site. Tenez donc ce plan à jour, et faites un lien vers cette page depuis quelques unes ou toutes les autres pages de votre site (un petit lien en bas de page par exemple).


                                                      9 -/ Pas de site sans texte



                                                      ex: tout en flash, ou tout en images. Sinon le site ne comporte presque aucun mot-clé et en conséquence ne pourra pas sortir dans les résultats de Google. Pour les images il est conseillé d'utiliser l'attribut ALT qui permet de donner une description textuelle. Si l'image est incluse dans un lien, alors le texte situé dans le ALT peut jouer un rôle similaire au texte des liens classiques, ce qui est très important.

                                                      Si vous avez un catalogue de pages avec peu de texte, ou par exemple une galerie d'images, débrouillez-vous pour attribuer des titres différents à chaque page.


                                                      10 -/ Mises à jour régulières du site



                                                      Google adore les sites mettant souvent à jour leur contenu. C'est logique, les internautes aussi préfèrent les sites qui proposent régulièrement du nouveau ! Ajoutez donc aussi souvent que possible du contenu, si possible sur des pages liées par d'autres sites.
                                                      De plus, un site régulièrement mis à jour aura des chances de voir GoogleBot venir indexer les pages fréquemment. Pour analyser ses visites, installez RobotStats, c'est facile et gratuit !

                                                      Ajoutez par exemple une rubrique Actualité, ou même un WebLog, c'est à la mode !



                                                      Sources : http://www.webrankinfo.com
                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        4 novembre 2006 à 1:04:10

                                                        suite aux flottants


                                                        Comment empecher un "block" de passer sous un flottant ?


                                                        Reponses:

                                                        d'abord un petit blabla a propos de ces "satanés " flottants.


                                                        Les elements placées en "float" , ont des comportements difficiles a apprehender pour les débutants.
                                                        On ne sait pas trop ou il se trouvent , ni comment ils interagissents avev le reste des elements.

                                                        Tout d'abords ils vont se placé a droite ou a gauche (selon float:left; ou right; )a partir de l'endroit ou il se trouvent dans le html .
                                                        Premiere reaction etonnante , ils fonds un saut de ligne si il y a quelque chose devant eux !
                                                        comme un element de type "block".


                                                        Deuxieme reactions ils se reduisent a la taille de leur contenu .
                                                        comme s'ils etait positionné en absolu !


                                                        Troisieme effet desagreable , ils n'etirent pas leur conteneur ou deborde sur les autres en repoussant leurs contenus.
                                                        ça ressemble presqu'a du position:absolute; ça .


                                                        En fait c'est presque ça , le flottant est effectivement retiré du flux , mais pas son contenu auquel il reserve de la place . et pourtant il semble etre invisible aux elements block qu'il le cotoient (excepté pour les contenus qui n'iront ni glisser dessous n'y s'y superposé, arf !)
                                                        Il peut-etre dimensionné quelque soit la balise a la base inline ou block. (une reserve toutefois sur certains elements de formulaires et selon les navigateurs qui en generale acceptent difficilement d'etre re-stylés).

                                                        Et pourtant

                                                        , on peut "ouvrir" les yeux aux autres element de la page qui pourront alors les prendre en compte dans leur positionement.

                                                        Dans IE

                                                        , on aura besoin d'activer le layout (haslayout).

                                                        celui-ci s'active de plusieurs manieres .
                                                        • display:inline-block;
                                                        • width:xx;
                                                        • height:xx;
                                                        • :( float:left; ou right; (tiens !)
                                                        • :( position:absolute; (bon la on a tout faux pour le resultat recherché )
                                                        • :( zoom:1; (non valide , mais utile a connaitre pour tester rapidement si un probleme vient de la )


                                                        pour l'exemple je releve que le display:inline-block; est la regle qui me convient au mieux , width et height ne me sont d'aucune utilité , et les autres ne conviennent pas mieux.


                                                        Pour les autres :

                                                        il y a aussi quelques regles que l'ont peut utiliseés , il ne s'agit pas la du même concept de "haslayout" typique d'IE mais simplement de prendre en compte les flottants.
                                                        • :( display:table;
                                                        • :( display:table-cell;
                                                        • :( display:table-row;
                                                        • :( display:inline-block;
                                                        • :( float:left; ou right; (tiens encore!)
                                                        • overflow:hidden;
                                                        • overflow:auto;


                                                        On remarque a nouveau le "display:inline-block; "
                                                        Attention , Firefoxe ne reconnait pas cette valeur , quand aux autres ils applique cette valeurs comme le preconise le w3c. LE resultat ne sera pas celui que IE va donner si les blocks auxquels on applique cette valeur on peut de contenus.
                                                        Les valeurs display:table et les 2 autres (ainsi que inline-block) vont bien effectivement se demarquer du flottant mais auront un comportement assez similaire , il ne prendront que la taille de ce qu'il contiennent .Inline-block , ne provoqueras pas de retour a la ligne apres lui !


                                                        reste le overflow:auto; ou hidden .
                                                        Si vous usez du overflow:auto; et que votre boite (block) reçoit aussi une valeur de hauteur (ou largeur) , le scroll apparaitras bien sur , mais le "haslayout" dans IE sera automatiquement activé par la taille donnée.
                                                        Si vous souhaité donné une dimension mais gardé l'effet d'etirement alors , choissisez un display:table ; + width:xx; et height:xx; .


                                                        Pour l'exemple on garde donc le overflow :)

                                                        le code de la page exemple et un lien pour tester (apres le code vous allez le regarder quand - même ! ).
                                                        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

                                                        "http://www.w3.org/TR/html4/strict.dtd">

                                                        <html>
                                                        <head>
                                                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                                                        <title>overflow:hidden; / display:inline-block;</title>
                                                        <style type='text/css'>
                                                        html {
                                                                background:#345;
                                                        }
                                                        body {
                                                                background:#678;
                                                                padding:0.5em;
                                                        }

                                                        ul {
                                                                float:left;
                                                                margin:0.5em 1em;
                                                                padding:0 1em;
                                                                border:1px solid #eee;
                                                        /* enlevons le bug de "double marge" d'IE */
                                                                display:inline;
                                                                background:#abc;
                                                        }

                                                        div {
                                                                background:#789;
                                                                padding: 10px ;
                                                                margin-bottom:1px;
                                                        }
                                                        #contourne h1 , #contourne p , #aligne {

                                                        /* activons le layout */
                                                                overflow:hidden;
                                                        }

                                                        h1 , p {
                                                                background:#abcdef;
                                                                margin:0px 0px 1px;
                                                               
                                                        }
                                                        </style>
                                                        <!--[if IE ]>
                                                        <style type="text/css">
                                                        #contourne h1 , #contourne p , #aligne {
                                                        /* activons le layout */
                                                                display:inline-block;/* pour IE  */
                                                        }
                                                        </style>
                                                        <![endif]-->
                                                        </head>
                                                        <body>
                                                        <ul >
                                                                <li>item</li>
                                                                <li>item</li>
                                                                <li>item</li>
                                                                <li>item</li>
                                                        </ul>
                                                        <div id ="contourne">
                                                                <h1>Empecher des 'block' de passer sous un flottant</h1>
                                                                <p>un petit paragraphe pour faire : bonjour le monde ! ça va ?</p>
                                                                <p> et d'autre pour montré qu'ils peuvent glisser dessous </p>
                                                                <p> et d'autre pour montré qu'ils peuvent glisser dessous </p>
                                                                <p> et d'autre pour montré qu'ils peuvent glisser dessous </p>
                                                                <p> et d'autre pour montré qu'ils peuvent glisser dessous </p>
                                                                <p> et d'autre pour montré qu'ils peuvent glisser dessous </p>
                                                                <p> et d'autre pour montré qu'ils peuvent glisser dessous </p>
                                                        </div>
                                                        <ul >
                                                                <li>item</li>
                                                                <li>item</li>
                                                                <li>item</li>
                                                                <li>item</li>
                                                                <li>item</li>
                                                                <li>item</li>
                                                                <li>item</li>
                                                                <li>item</li>
                                                        </ul>
                                                        <div id="aligne" >
                                                                <h1>Empecher un 'block' de passer sous un flottant et aligner ses contenus au dela .</h1>
                                                                <p>un petit paragraphe pour faire : bonjour le monde ! ça va ?</p>
                                                                <p> et d'autre pour montré qu'ils peuvent rester aligner dans le conteneur </p>
                                                                <p> et d'autre pour montré qu'ils peuvent rester aligner dans le conteneur </p>
                                                                <p> et d'autre pour montré qu'ils peuvent rester aligner dans le conteneur </p>
                                                                <p> et d'autre pour montré qu'ils peuvent rester aligner dans le conteneur </p>
                                                                <p> et d'autre pour montré qu'ils peuvent rester aligner dans le conteneur </p>
                                                                <p> et d'autre pour montré qu'ils peuvent rester aligner dans le conteneur </p>
                                                        </div>
                                                        </body>
                                                        </html>


                                                        ah oui la page test en ligne :
                                                        http://gcyrillus.free.fr/trucs_css/flottant-et-element-exterieur-methode.html

                                                        Pour en savoir plus sur ces proprietes , n'hesitez pas a faire des recherches sur le site du w3c et surtout google , plusieurs sites proposes des dicos , triées de preferences les pages les plus recentes et recoupées les infos recoltées , faites vous mêmes vos petits tests pour apprivoisse ces valeurs "css" .

                                                        ++


                                                        <edit> zut , peut-etre un peu long pour une faq , désolé</>
                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          4 novembre 2006 à 10:45:30

                                                          Citation : Variable

                                                          Comment ôter la bordure autour d'une image-lien ?



                                                          Réponse :



                                                          <a href="url"><img src="url_de_image" alt="nom" id="image_lien" /></a>



                                                          #image_lien
                                                           {

                                                            border: none;
                                                           }


                                                          Pourquoi pas, mais ceci risque d'être très long quand on a beaucoup d'images cliquables. C'est dommage d'attribuer un id à chaque image pour faire cela, alors que cela suffit pour toutes les images contenues dans un lien :

                                                          <a href="http://"><img src="image.png" alt="mon image" /></a>

                                                          a img {
                                                            border: none;
                                                            }
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter

                                                          [FAQ] Mise en place

                                                          × 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