[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > [FAQ] Mise en place > Lecture du sujet

[FAQ] Mise en place

Donnez-nous vos idées...

Vous devez être inscrit pour pouvoir poster des messages

Auteur	Message
Page : Précédente 1 2 3 4 Suivante
1 visiteur sur ce sujet (1 anonyme)
Page : Précédente 1 2 3 4 Suivante
St!L1g	# Posté le 24/05/2006 à 20:00:36
Je dirais même + : 0 kelvin Groupe : Membres	Reprise du dernier message de la page précédente : Oui, mais c'est quand même tout à fait valide en HTML 4.01 - bon d'accord, j'arrête de chipoter - Merci à tout le monde pour leurs démonstrations d'XHTML. Vous m'avez appris pas mal de choses ! Enigmes en Chaînes "Je suppose que tu veux allez à l'énigme suivante..."
RévoX	# Posté le 10/06/2006 à 00:36:13
fr.hypo-theses.com Groupe : Membres	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 : 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> Édité le 18/12/2006 à 09:38:24 par RévoX Hypo-thèses : www.hypo-theses.com (un site passé dans les projet des zéros et nominé dans la catégorie meilleur site communautaire") a été traduit et est maintenant devenu en.hypo-theses.com et fr.hypo-theses.com Sachez que nous recrutons des gens passionnés par les sciences
BSoD	# Posté le 14/06/2006 à 18:57:47
Groupe : Membres	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. Édité le 19/06/2006 à 11:38:37 par BSoD
Piotr	# Posté le 18/06/2006 à 23:16:50
j'ai faim (H.Simpson) Groupe : Membres	effacé Édité le 20/06/2006 à 01:57:37 par Piotr
minirop	# Posté le 19/06/2006 à 11:19:33
吸血鬼	Piotr > on doit posté question ET réponse et sans faute non plus. pas commencés - en cours - finis - (dernier tome lu) manga : Love Hina - Ichigo 100% - Fruits Basket - School Rumble - Death Note - Parmi Eux - One Piece (46) - Naruto (45) - Lovely Complex (10) - Fullmetal Alchimist (22) -> My Manga IDE multiplateforme pour Qt !! Qt @ IRC --> #qt-fr@irc.freenode.net
IntoX94	# Posté le 30/06/2006 à 13:06:37
Linux§§§ Groupe : Membres	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: Code : CSS 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) Édité le 30/06/2006 à 13:07:30 par IntoX94 Mon ouebsite
yöm	# Posté le 30/06/2006 à 13:19:08
Ich bin intégriste ! Groupe : Membres	Et rendra la feuille CSS non-valide. La Scaña del Domingo [fla] c'est vraiment de la balle. Prennez un banjo rock'n'roll, une batterie keupon, une basse qui slap et qui tâche et cuivres cuivrés. Absolutely fantastique.
llouis	# Posté le 30/06/2006 à 13:24:57
Avec ou sans sucre ? Groupe : Membres	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: Code : CSS 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 : Code : CSS #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. Édité le 30/06/2006 à 13:25:44 par llouis Plein de nouveaux smileys !
Gectou4	# Posté le 01/07/2006 à 07:42:57
Daijobu ka ? Groupe : Membres	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. Code : CSS <style type="text/css" media="scReen"> <!-- /* 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: Code : JavaScript <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 ...) Édité le 01/07/2006 à 13:45:20 par Gectou4 Citation : Moi même Mateo ... Poil au Zéro !
Thunderseb	# Posté le 01/07/2006 à 09:58:06
Trolleur en chef !	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 Édité le 01/07/2006 à 09:58:23 par Thunderseb Drache, boue et VTT \| Smilies \| Mettre des vidéos Flash \| Ça puxx \| Browsers RealFox \| FOXYCODE \| AJAX et l'échange de données en JavaScript \| L4D Une map pour Half-Life² avec Hammer 4 \| Protect the witch
LaoSeb	# Posté le 03/07/2006 à 11:15:06
N'oubliez pas le résolu Groupe : Membres	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.
k1mpeR	# Posté le 25/07/2006 à 13:47:20
Fuyez pauvres fous !! Groupe : Membres	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. Code : HTML <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> Code : CSS li { margin-bottom: 10px; /* Mettez la valeur que vous voullez, c'est le nombre de pixel qu'il y a entre les li */ } Voilà Édité le 27/07/2006 à 22:53:34 par k1mpeR Merci à mon frère pour ma signature et mon avatar.
LiNeerlay	# Posté le 27/07/2006 à 13:05:37
Groupe : Membres	Effacé. Désolé d'avoir posté ici. Édité le 27/07/2006 à 13:18:20 par LiNeerlay
yöm	# Posté le 27/07/2006 à 22:02:48
Ich bin intégriste ! Groupe : Membres	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 : Code : Autre <!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. Édité le 27/07/2006 à 22:03:19 par yöm La Scaña del Domingo [fla] c'est vraiment de la balle. Prennez un banjo rock'n'roll, une batterie keupon, une basse qui slap et qui tâche et cuivres cuivrés. Absolutely fantastique.
k1mpeR	# Posté le 27/07/2006 à 22:35:02
Fuyez pauvres fous !! Groupe : Membres	On ne saute pas de ligne mais sa revien au même. Merci à mon frère pour ma signature et mon avatar.
yöm	# Posté le 27/07/2006 à 22:45:29
Ich bin intégriste ! Groupe : Membres	Pas si la hauteur de ligne est différente de 10px. La Scaña del Domingo [fla] c'est vraiment de la balle. Prennez un banjo rock'n'roll, une batterie keupon, une basse qui slap et qui tâche et cuivres cuivrés. Absolutely fantastique.
Lpu8er	# Posté le 28/07/2006 à 16:08:17
[R34n1m4T3d] Groupe : Membres	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: Code : HTML <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. Le or die(mysql_error()), nom d'un chien !!! (et apprenez à concaténer avant de le faire)
angelsafrania	# Posté le 17/08/2006 à 15:19:58
623 Groupe : Membres	Citation : llouis Non, on écrit cela, et c'est valide : Code : CSS #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é) Projet Actuel : Faire le site perso le plus vite possible en XML/XSLT compatible mobile + modularité formidable (enfin des trucs de rêve)
llouis	# Posté le 23/08/2006 à 22:55:39
Avec ou sans sucre ? Groupe : Membres	Les !important sont tout à fait valides et utilisables, contrairement au _... Plein de nouveaux smileys !
gcyrillus	# Posté le 26/08/2006 à 00:18:19
restons curieux ! Groupe : Membres	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 : Code : CSS 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 . ++ Édité le 26/08/2006 à 00:23:57 par gcyrillus Mes recettes re7net "des gabarits" Gabarits L'alignement vertical , avec ou sans tableau Blog sur le CSS Quelques bout de code ou trucs en vrac. (Sans pretentions , mais si ça peut servir, tant mieux !) ... Si je revient pas sur un sujet/topic, c'est que: j'ai déjà oublie,je suis absent !le sujet est resolue ,rien a ajouté ou pas envie de troller !
the-m	# Posté le 21/09/2006 à 18:59:10
Groupe : Membres	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 ! Code : HTML <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 : Code : JavaScript function formSubmit{ document.nom_de_mon_formulaire.submit() } bien sûr il faut que le client accepte lte javascript Si j'ai posté dans un sujet d'aide qui n'a pas été résolu et semble abandonné, vous pouvez me demander de l'aide par MP car j'oublie tout le temps de repasser sur le forum
BSoD	# Posté le 21/09/2006 à 19:09:27
Groupe : Membres	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... Code : HTML <input type="image" /> Non ?
Mckey	# Posté le 23/09/2006 à 11:12:48
Groupe : Membres	dsl Édité le 24/09/2006 à 09:09:19 par Mckey
BSoD	# Posté le 23/09/2006 à 14:36:34
Groupe : Membres	On doit poster la question et la réponse bon sang
meredith	# Posté le 24/09/2006 à 14:00:05
"Qui ne tente rien n'a rien !" Groupe : Membres	Bonjour, je n'arrive pas à mettre une couleur de fond, pouvez-vous m'expliquer comment faire ?Merci d'avance... Meredith Meredith
BSoD	# Posté le 24/09/2006 à 15:22:27
Groupe : Membres	OMG... poses ta question ici STP... et prière de lire le sujet du topic avant de poster...
le_stoppeur	# Posté le 22/10/2006 à 14:28:28
Juste un sourire ! Ex-Newser Groupe : Membres	Question : Comment centrer mon div verticalement ? Réponse : Code : HTML <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) Ex-Newser.\| De quoi ? - Evode DeP - Lalphabet
gcyrillus	# Posté le 28/10/2006 à 22:04:19
restons curieux ! Groupe : Membres	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. Code : CSS .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 ! 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" ): Code : HTML <!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 ++ Édité le 28/10/2006 à 22:06:23 par gcyrillus Mes recettes re7net "des gabarits" Gabarits L'alignement vertical , avec ou sans tableau Blog sur le CSS Quelques bout de code ou trucs en vrac. (Sans pretentions , mais si ça peut servir, tant mieux !) ... Si je revient pas sur un sujet/topic, c'est que: j'ai déjà oublie,je suis absent !le sujet est resolue ,rien a ajouté ou pas envie de troller !
'Titi	# Posté le 03/11/2006 à 02:12:04
Groupe : Membres	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 : Code : HTML <a href="url"><img src="url_de_image" alt="nom" id="image_lien" /></a> Code : CSS #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 Code : 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 Code : HTML <a href="url" id="image_lien"></a> Code : CSS #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 Édité le 03/11/2006 à 02:37:03 par 'Titi
gcyrillus	# Posté le 04/11/2006 à 01:04:10
restons curieux ! Groupe : Membres	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 ! ).Code : HTML <!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é</> Édité le 04/11/2006 à 01:06:12 par gcyrillus Mes recettes re7net "des gabarits" Gabarits L'alignement vertical , avec ou sans tableau Blog sur le CSS Quelques bout de code ou trucs en vrac. (Sans pretentions , mais si ça peut servir, tant mieux !) ... Si je revient pas sur un sujet/topic, c'est que: j'ai déjà oublie,je suis absent !le sujet est resolue ,rien a ajouté ou pas envie de troller !
JulFisher	# Posté le 04/11/2006 à 10:45:30
Un Zér0 sur le réZ0 Groupe : Membres	Citation : Variable Comment ôter la bordure autour d'une image-lien ? Réponse : Code : HTML <a href="url"><img src="url_de_image" alt="nom" id="image_lien" /></a> Code : CSS #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 : Code : HTML <a href="http://"><img src="image.png" alt="mon image" /></a> Code : CSS a img { border: none; } Un Rubik's Cube complexe ? Une solution simple ! http://www.rubikscube.fr Legend of Mana, Vagrant Story, Parasite Eve, powaa !