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é.
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.
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>
Liste ou site de naissance original à découvrir sur www.o-liste.net
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.
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="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:
<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>
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 ...)
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.
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.
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:
<divstyle="float: left; width: 30%;">
Tout à gauche </div> <divstyle="float: left; width: 30%;">
Au milieu </div> <divstyle="float: right; width: 30%;">
Tout à droite </div>
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 .
++
Question : Comment centrer mon div verticalement ?
Réponse :
<html> <head> <styletype="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>
<divclass="centre">
ce calque est centré dans la page
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 methodecss
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 methodecss
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.
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 methodecss
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" ):
<!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> <styletype='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>
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
<ahref="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 !
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> <metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"/> <title>overflow:hidden; / display:inline-block;</title> <styletype='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 ]> <styletype="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> <divid="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>
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é</>
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 :
× 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.
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui