Réponse : Utiliser le code css suivant :



Variante:

repete le background seulement sur l'axe X

Variante 2:

repete le background seulement sur l'axe Y

Vous pouvez ensuite appliquer ce code css à votre tableau ou met a votre site. Libre cours à votre imagination

Cependant je rapelle qu'un site en tableau n'est pas valide W3C, preferer le css et les div.

-----------------------------------



Réponse : Utiliser le code suivant :



Regler votre opacité sur une echelle de 0 à 100 _ Pratique pour des design de style vista



rk2-studio

Question

Réponse :

Ca veut dire que vous utilisez plusieurs fois la même proriété sur un élément.
Par exemple : C'est souvent le cas lorqu'on utilise des !important pour avoir un style différent dans IE et les autres navigateurs.

Citation : RévoX

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>

Explications :

• readonly="readonly" empêche la modification du champ
• disabled="disabled" empêche la séléction et la modification du champ. Le champ devient gris.
• maxlenght="x" empêche l'entrée de plus de x caractères.

Réponse : Séparez simplement les différentes classes par un espace dans l'attribut class=""

Il faudrait rassembler les questions dans le premier post et les faire pointer vers le post FAQ correspondant. Je dis ça car je trouve la configuration actuelle très... chiante :s

Salut à tous,

La FAQ du forum a été réorganisée dans un nouveau sujet en post-it modifiable uniquement par les modérateurs afin d'y garder une totale clarté.

Vous pouvez continuer bien sûr à faire vos propositions de questions/réponses dans ce sujet, le sujet en post-it sera mit à jour au fur et à mesure de vos contributions

Un tri a été effectué par mes soins dans les questions/réponses qui avaient été mises dans ce post (comme par exemple les hacks IE qui d'après moi n'ont plus lieu d'exister), si vous jugez que certaines que j'ai décidé de ne pas mettre y auraient encore leurs places, je suis à l'écoute.

Voilà

Je n'avais jamais pensé à fournir un peu cette faq, pourtant il y a des questions qui reviennent souvent en javascript (Vous vous en doutez. De quoi je pourrais parler sinon ? )

javascript/ajax

(si il faut une catégorie plus particulière juste pour "ajax"):


Réponse :
Tous vos fichiers sont sûrement encodés en ISO-8859-15. Or, le fichier téléchargé par XMLHttpRequest est considéré par défaut comme étant encodé en utf-8.

Il faut donc modifier le fichier téléchargé pour indiquer explicitement son encodage, grâce à un header php en début de code:




Réponse :
Si vous utilisez la méthode "GET", Internet Explorer va mettre le fichier téléchargé en cache et n'en téléchargera pas un nouveau à chaque actualisation.

Il faut rajouter des header en début de code php dans la page qui est téléchargée pour interdire la mise en cache:



Réponse :
Si vous ne le faites pas déjà, il faut utiliser la fonction escape pour protéger les variables (issues des formulaires par exemple).
Par exemple, si on fait:

En tapant "blabla&variable2=foo" dans le formulaire,
On va obtenir la chaîne:

Citation

variable1=blabla&variable2=foo

soit deux variables au lieu d'une !

C'est pour cela qu'il faut utiliser escape pour remplacer les caractères spéciaux (comme le "&"):


Seulement, cette fonction est boguée et ne remplace pas le caractère spécial "+", il faut donc la corriger:
(ce morceau de code est à placer en début des sources pour "corriger" escape).

Javascript (normal)

Réponse : Il faut utiliser la propriété window.opener qui donne accès à la page mère.
Par exemple:



Réponse :
L'attribut onclick sur une balise option est invalide et Internet Explorer a donc raison de refuser de fonctionner.
Il est plus logique (et souvent plus pratique) d'utiliser l'évènement onchange sur la balise select.

Exemple dans le cas d'un bbcode:


Devient (en utilisant value):




Réponse :
C'est dû à la gourmandise des quantificateurs: l'expression régulière cherche à englober le plus de caractères possibles:

En plaçant un "?" après le quantificateur, la gourmandise est inversée:



(je crois que je vais m'arrêter là pour le moment )

Merci Boo2M0rs0, c'est vrai qu'à part toi peu de monde s'intéresse beaucoup au javascript sur le forum.

Je vais mettre à jour

Ce n'est pas qu'on ne s'y intéresse pas, c'est qu'on n'y connait rien, voir pas grand chose....

J'ai regardé ce que vous avez proposé dans le sujet ouvert par Bogoris, et à vrai dire je trouve que c'est pas assez complet, oui je sais je suis chiant

Bogoris :

- Les balises pre ou code ne transforme pas les chevrons en entités.
- Pour les images, ok, mais il faudrait approfondir un peu plus sur les contrôles, nom du fichier, extension etc...
- Le doctype non trouvé n'est pas je pense assez pertinent pour être dans la FAQ.
- Pour ce qui est des liens vers des tutos, il faut privilégier ceux du sdz en priorité, et dans ce cas, carrément mettre la liste de tous les tutos serait même bien

KorangaR :
- Pour le centrage IE ok, mais il faudrait ajouter le text-align du body qui s'avère nécessaire pour les hébergeurs ajoutant du js avant le doctype (j'enlèverais l'autre question).
- Pour la liste, ce n'est pas spécifique à IE il me semble (corrige moi si je me trompe), mais je penserais plus à mettre un truc plus générique sur les margin, padding par défaut des navigateurs.
- Pour les accents, oui.

5.56 mm, non justement je ne vais pas fermer cette FAQ, cela est fait pour que celle-ci reste claire et ne deviennent pas comme la précédente.

J'attends vos remarques sur ce que j'ai dit.

Il m'a bien fallu 3 minutes pour comprendre de quoi tu parlais! (maintenant j'ai mal au crâne, c'est désagréable)

Dans la FAQ en post-it, tu as écrit

Citation : Pas de titre

Pour compléter cette FAQ vous pouvez apporter votre contribution dans ce sujet

Le lien qui figure sous les mots "ce sujet" n'est pas visible (en tout cas, pas sous le design zfruit). Pour cela on peut croire qu'il faut répondre au sujet en post-it alors qu'il est fermé (ce que moi j'ai cru et que tu n'as pas pu comprendre car tu connaissais l'existence de ce sujet,celui dans lequel j'écris actuellement !).
Si tu pouvais augmenter la visibilité du lien dans la FAQ en post-it, cela éviterai la création de FAQ-bis.

J'ai oublié ce que je voulais proposé, je l'écrirait quança me reviendra.

Ok, je viens de tester ton design, et en effet le lien ne ressort pas du reste de la phrase, je vais le mettre en bleu

Tiens, pour le javascript (et un bout de xHTML...)...



On peut imiter le comportement de :hover en le simulant à l'aide du javascript (c'est un peu bordellique), en utilisant les evenements (attributs) "onmouseover" et "onmouseout" sur la balise. Par exemple, pour changer la couleur d'un texte en survolant une puce dans une liste :


Voila...

2 choses a dire :
- le code pour centrer verticalement est faux, du moins totalement incompatible et invalide
il faut redoubler d'astuce pour centrer verticalement :



et ca a mettre en haut de la page :

Enlever le $, j'ai du le mettre car sinon, ca faisait planter le zcode

Et je poste aussi pour poster (c'est bien tourné ca ) une structure type de menu avec les listes a puces, donc se rapportant a la plupart des question sur les li :


Et le code css :

Timot, tu parles de quoi pour le positionnement vertical ?
Ca http://www.siteduzero.com/forum-83-173639-1591256.html#r1591256 ?

Chez moi ça fonctionne très bien

Et en ce qui concerne ta liste, ta syntaxe est invalide, manque un </li>
L'utilité a être dans la faq n'est pas assez pertinente je trouve, ça se rapporte plus à l'utilisation de la bonne sémantique des balises en général.
La méthode d'imbrication de listes aurait été plus utile.

Pour le centrage vertical, ca ne devrait pas fonctionner, du moins pas sur tous les navigateurs normalement.

Pour le systeme de menu, les gens postes souvent des messages a propos de probleme de marge avec des li ou avec des problemes de décallage de menu, etc...
Ce code peut etre une bonne base pour un menu ou autre utilisant des liste a puces

Tu vois, moi je conçois mes menus autrement, c'est à dire le titre du menu hors de la liste, je trouve que c'est plus "correct".

Pour le centrage, sur quels navigateurs c'est mal interprété ?

Salut

Je remonte un peu ce sujet, car la FAQ aurait vraiment besoin d'être étoffée

Quelques idées de questions qui pourraient y figurer :

- Texte dépassant d'un bloc (solution css et php).

- Explication brève et concise des chemins relatifs.

- background legend fieldset et IE (thunderseb )

- Explications plus détaillées sur les problèmes d'encodages.
éditeur, meta, interclassement table mysql, ajax, xml.

- Afficher/cacher un bloc/texte au clic d'un lien/bouton.

- Effacer la valeur d'un input text au focus sur le champ.

- Centrage image et firefox dans un tableau (bug marge basse).

- Transmettre une variable javascript à php.

- Solutions pour le symbole €

- Css non prit en compte, cause possible du problème.
- Image (background css) ne s'affichant pas, causes possibles du problème.

- Ecrire un texte verticalement (solutions).

Ce ne sont que des suggestions, y'en a peut-être là dedans des nons pertinentes.

Oui, je sais, j'aurais pu les faire moi même (enfin pour ceux que je connais ), mais j'aimerais vraiment que plus de monde mette la main à la pâte

Donc si vous vous sentez d'attaque pour ajouter quelque chose à la FAQ

Si vous avez un problème avec ceci, c'est que sans doute vous effectué des tests avec un mot comportant énormément de lettres, ce genre de cas se présente très rarement puisque le mot le plus long en français comporte 25 caractères.

C'est en général le forfait d'un emmerdeur qui se délecte de déformer vos pages avec des phrases contenant des mots aussi long.

monmottrèslllllllllllllllllllllllllllllllllooooooooooooooooooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg hihi !!!

Solutions à envisager.

Pour la plus simple, mais sans doute pas la meilleure, en css utiliser un overflow sur le bloc, ce qui aura fait de rogner ce qui dépasse ou mettre un scroll horizontal sur le bloc.

<p class="monParagraphe">monmottrèslllllllllllllllllllllllllllllllllooooooooooooooooooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg hihi !!!</p>
 
<p class="monParagraphe2">monmottrèslllllllllllllllllllllllllllllllllooooooooooooooooooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg hihi !!!</p>

p.monParagraphe {
  width: 200px;
  overflow: hidden; /* le texte est tronqué */
}
 
p.monParagraphe2 {
  width: 200px;
  overflow: scroll; /* un scroll horizontal est ajouté */
}

Une solution meilleure consiste à ajouter des espaces sur les mots trop longs à l'aide d'une expression régulière en php (ou le langage serveur que vous utilisez).

<?php 
$texte = preg_replace('`\S{25}`', '$0 ', $texte); // Ajout d'un espace tout les 25 caractères non blancs 
?>

Si vous voyez quelque chose d'erroné dans ceci

=> Qu'est ce que des colonnes ?

Pour un design fixe

Il suffit de créer une image de la largeur de votre page (le plus classique est 800 pixel) et de la mettre en arrière-plan avec :



Le repeat-y va répéter l'image sur toute la hauteur de la page et top center va la placer avant la répétition.

Pour un design extensible

Pour un design extensible, c'est déjà plus compliqué. Il faudra toucher au xHTML. En fait, nous allons utiliser deux <div> qui seront les deux colonnes. Elles seront en position: absolute et possèderont les background des colonnes.



Jusque là, c'est simple .
Maintenant le CSS :



Je pense que le code parle de lui-même
Donc comme écrit, le seul défaut est la hauteur de la colonne qu'il faut indiquer manuellement.


En espérant vous avoir aidé.

Je voudrais pas faire mon rabat-joie, mais avec ton code ce n'est pas possible de faire un design extensible, la position absolute ne le permet pas.

Bizarre, sur mon site ca marche parfaitement...

Prouve le

Qui dit extensible, dit variable en largeur et en hauteur.

Là ton css implique que l'on donne des dimensions.

Beuh sur la hauteur, oui il demande une dimension; pour la largeur aussi mais il s'adapte quand même à la résolution du visiteur.
Sinon, j'avais pensé à mettre ces deux colonnes en position:fixed, mais ce ne marche pas ... sous MSIE

C'est bien ce que je disais, ton code ne permet pas l'extensibilité en hauteur.

En plus tu devrais tester sur IE car ça le fait pas du tout

Dernière fois que je rajoute mon grain de sel :
Pourquoi ca marche chez moi ?!!? (sous IE)
Décidément, je dois avoir quelque chose dans mon code qui doit me faire fonctionner tout ça

Une url ?

Bah euh, Olympe Network a été piraté donc plus maintenant