Partage

[FAQ] Mise en place

Donnez-nous vos idées...

1 2 3 4 >>

15 décembre 2005 à 23:11:39

Bonjour !

D'un commun accord entre modérateurs, nous avons décidé de mettre en place une <acronym title="Frequent Asqued Questions">FAQ</acronym> sur ce forum afin de rassembler les questions les plus fréquemment posées et de répondre ainsi aux nombreux problèmes des débutants en matière de codage sans avoir à réécrire chaque fois la même chose.
Dans cette optique, nous vous demandons votre aide afin de rassembler les questions qui reviennent le plus souvent ainsi que leurs réponses.

Pour ce faire, vous nous répondrez à ce message de la manière suivante :

Citation : FAQ

Question : Posez ici la question en des termes clairs...

Réponse : Répondez ici clairement, simplement et correctement à la question posée ci-dessus.

Ce qui donne en zCode :

<question><gras>Question :</gras> Posez ici la question en des termes clairs...</question>
<gras>Réponse : </gras>Répondez ici clairement, simplement et correctement à la question posée ci-dessus.

Attention :

- Toute question ou réponse non explicite ne sera pas prise en compte.
- Tout message comportant des fautes d'orthographe ne sera pas pris en compte.
- Tout message hors sujet sera supprimé et son auteur se verra sanctionné.

Ceci n'est pas un topic d'aide : merci de ne PAS y poser vos questions personnelles !

Vous y êtes ? Vous avez déjà plein d'idées ? Alors à vos claviers !

[Edit] Nyro Xeo > Merci d'être le plus précis possible, en donnant éventuellement des liens vers des articles externes (ou même internes), la compatibilité, les avantages/désavantages de la méthode (par exemple pour les popups). Essayez de garder à l'esprit de faire des réponses accessibles et valides (au mieux, et sinon dites pourquoi, etc.).
Et évitez également de remettre l'intégralité des cours ici

JulFisher

16 décembre 2005 à 18:13:52

Question : Quelles différences entre un lien absolu et un lien relatif ?

Réponse :

Lien absolu

Il faut marquer l'adresse complète du lien ou de l'image que l'élément aura une fois sur votre FTP, comme ceci : http://julfisher.free.fr/de_vallentia/images/mozilla.gif

Lien relatif

Quant à l'adresse relative, elle est très utile : quelque soit la future adresse de votre site, vous n'aurez pas besoin de la modifier, à condition de ne pas changer les nom de vos fichiers. L'adresse absolue se fera toute seule par la suite lors du clic.

Exemple

Si vous avez un dossier "mon_site_web" avec un fichier .css à l'intérieur, et dans ce dossier un dossier "images" pour stocker toutes vos images, vous devrez indiquer dans votre fichier se trouvant dans "mon_site_web" l'adresse comme ceci : "images/header.gif". Bien sûr l'extension (.gif ou .jpg pour les plus connues, sans oublier .png) dépend de votre image.

Anonyme

16 décembre 2005 à 18:27:06

Question : Pourquoi mon bloc ne se centre pas même avec

margin:auto;

Réponse : Pour fonctionner,

margin:auto;

a besoin d'un largeur fixe (exprimée en pixels ou en pourcentage ect...).
Par exemple :

BaliseDuBloc
{
margin:auto;
/* Les marges sont automatiques */
width:100px;
/* On donne une taile fixe au bloc pour que cela fonctionne */
}

JulFisher

16 décembre 2005 à 19:01:52

Question : Comment mettre mon pied de page en dessous du menu et du corps qui sont des floats ?

Réponse : Il suffit de lui appliquer la propriété clear avec la valeur both :

#pied_de_page
{
/* Vos autres propriétés positonnant
et stylisant votre pied de page*/
clear: both;
}

Cette propriété aura pour effet d'ignorer les float (left ou right), et donc votre pied de page sera mis à la ligne de ces blocs floattant.

Kels

17 décembre 2005 à 10:14:55

Comment faire pour que mon lien s'ouvre dans une autre fenêtre?
pour faire un pop-up quoi..

Le (X)HTML ne permet pas de le faire, il faut utiliser du javascript.

Ce script permet d'ouvrir la page "page.html" dans une nouvelle fenêtre.

Pour plus d'informations et des options comme par exemple la taille de la fenêtre qui va s'ouvrir, consultez ce site.

Attention tout de même à ne pas abuser des pop-up, les net-addicts que vous êtes le savent: trop de pop-up tue la navigation.

Sachez également que certains navigateurs récent, je pense à firefox, ont le pouvoir de forcer les pop-up à s'ouvrir dans un nouvel onglet et non une nouvelle fenêtre.

Thunderseb

17 décembre 2005 à 14:21:14

Comment empêcher Internet Explorer des mettre une petite barre d’outils sur les images, lors du survol des celles-ci par la souris ?

Mettez tout simplement cette petite META dans le HEAD de votre page :

Comment définir les marges intérieures des cellules ainsi que les espaces entre les cellules ?

Pas besoins de CSS pour cela. On va utiliser les attributs CELLSPACING (espace entre les cellules) et CELLPADDING (marge intérieure) de la balise TABLE. Ces attributs sont valides XHTML 1.1 :

<table cellspacing="2" cellpadding="4">
<tr>
<td>Cellule du dessus</td>
</tr>
<tr>
<td>Cellule du dessous</td>
</tr>
</table>

Comment insérer une animation Flash, et que le code soit valide en XHTML 1.1 ?

Il faut supprimer le balise <embed> :

<div id="anim_flash">
<object data="anim/animation.swf" type="application/x-shockwave-flash" width="300" height="250">
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="movie" value="anim/animation.swf" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="scalemode" value="noborder" />
<param name="wmode" value="transparent" />
<p>Texte de remplacement si FlashPlayer n'est pas installé</p>
</object>
</div>

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

JulFisher

19 décembre 2005 à 18:12:58

Question : Comment supprimer l'espace autour de mon titre <h*> ?

Réponse : Il faut savoir qu'il y a par défaut une marge en haut et en bas de 20px autour des balises block <h1></h1>, <h2></h2>... Et donc pour supprimer l'espace qui pose souvent problème autour de ces balises, il suffit de leur appliquer une marge nulle :

h1, h2, h3 {
margin: 0;
}

Les h4 et autres sont de la taille du texte, voir plus petit, alors bon

Thunderseb

23 décembre 2005 à 11:59:19

Comment faire pour que Internet Explorer affiche correctement des images PNG 24 bits?

A mettre dans le HEAD de votre page :

Créer un fichier Javascript appelé png.js, contenant :

// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);

Voilà. Comme cela, IE gèrera la transparence des images PNG

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

Thunderseb

23 décembre 2005 à 12:46:02

Citation : yom

C'est valide ça ? Je pense que "" ira mieux

C'est valide

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

IntoX94

26 décembre 2005 à 14:52:42

Pourquoi mon site n'est pas centré sous IE ?

On vous a appris à utiliser:

body{
margin: auto;
width: 800px/*largeur de votre site*/}

Pour centrer votre site.
Mais cette technique ne fonctionne pas sous Internet explorer.
Pour centrer le site sous IE, il faut utiliser cela:

body{
width: 800px;
text-align: center;/*on centre le site, mais le texte est lui aussi centré*/
margin: auto;/*on centre pour Firefox et les autres navigateur excepté IE*/
}

#all{/*id qui englobe tout votre site*/
width: 800px; /*largeur du site*/
text-align: left; /*on align le texte à gauche*/}

JulFisher

27 décembre 2005 à 12:36:10

Question : Comment définir une ou des propriété(s) CSS différents en fonction du navigateur (notemment IE) ?

Réponse : En utilisant un petit code précédant votre balise, id ou class comme ceci :

html>body body {
/* Style appliqué pour tous les navigateurs excepté IE */
}

* html body {
/* Style appliqué seulement pour IE */
}

Webokage

30 décembre 2005 à 9:28:20

Citation : JulFisher

Question : Comment définir une ou des propriété(s) CSS différents en fonction du navigateur (notemment IE) ?

Réponse : En utilisant un petit code précédant votre balise, id ou class comme ceci :

html>body body {
/* Style appliqué pour tous les navigateurs excepté IE */
}

* html body {
/* Style appliqué seulement pour IE */
}

Et ce code marche t-il pour les titres, menu... ?
Car sa m'arrangerais bien

Découvrez les grandes inventions et inventeurs qui font de notre monde ce qu'il est aujourd'hui :)

JulFisher

30 décembre 2005 à 18:56:05

Si tu avais essayé, tu aurais remarqué que oui

yalcin

3 janvier 2006 à 22:00:07

le code suivant ne fonctionne pas

#pied_de_page
{
/* Vos autres propriétés positonnant
et stylisant votre pied de page*/
clear: both;
}

JulFisher

4 janvier 2006 à 13:19:00

Cela ne fonctionne que si ton corps et ton menu sont des flottants

Oylex

7 février 2006 à 14:54:26

Question : Comment faire fonctionner les labels sur IE

Réponse :
Dans le cours (x)html du site, M@teo21 nous dit qu'il existe une manière de faire fonctionner les labels dans IE:

Citation : M@teo21

Il faut savoir qu'il existe une méthode qui fonctionne sur IE, mais elle est un peu compliquée pour pas grand chose.
Je préfère donc volontairement ne pas vous en parler, vous ne perdrez pas grand chose de toute manière

Normalement, pour utiliser les labels, il faut écrire:

<form method="post" action="traitement.php">
<p>
<label>Votre pseudo : <input type="text" name="pseudo" /></label>
</p>
</form>

Pour qu'il fonctionne avec IE, il faut mettre un id sur l'input et mettre un for sur le label:

<form method="post" action="traitement.php">
<p>
<label for="nom">Votre pseudo : <input type="text" name="pseudo" id="nom" /></label>
</p>
</form>

Ce code fait aussi la même chose:

<form method="post" action="traitement.php">
<p>
<label for="nom">Votre pseudo : </label>
<input type="text" name="pseudo" id="nom" />
</p>
</form>

Voilà.

Poliak

21 février 2006 à 16:16:15

Citation : Thunderseb

Voilà. Comme cela, IE gèrera la transparence des images PNG

sa c'est beau merci

Steve Jobs est un sacré magicien, avec une seule pomme, il a fait naître des millions de poires.

Hawks

23 février 2006 à 18:55:19

Citation : JulFisher

Question : Comment définir une ou des propriété(s) CSS différents en fonction du navigateur (notemment IE) ?

Réponse : En utilisant un petit code précédant votre balise, id ou class comme ceci :

html>body body {
/* Style appliqué pour tous les navigateurs excepté IE */
}

* html body {
/* Style appliqué seulement pour IE */
}

Un autre

margin: 0px!important; /* Reconnu par les navigateurs récents le terme !important signifie quand cas de doublon c'est cette valeur qui faudra prendre */
margin: 10px; /* IE lui ne connait pas !important, donc il l'ignore, il utilisera la dernière valeur énoncé */

5.56 mm

12 mars 2006 à 20:34:15

Question : Comment faire une fonction SECRET mais sans Javascript, uniquement en CSS ?

Réponse simple : Avec la pseudo-classe :hover

Le but de la manoeuvre est de confondre le texte avec le fond, en leur appliquant la meme couleur.
Puis, il suffit de changer au moins la couleur du fond ou du texte au passage de la souris

Mon téléphone est le <span class="secret">01.23.45.67.89</span>

.secret{ /* mon message secret est ...*/
color:#ff0000; /*... écrit en blanc ...*/
background–color:#ff0000; /*... sur fond blanc*/
}
.secret:hover{ /*lorsque je survole mon texte ...*/
color:#ffffff;/*... je change sa couleur enrouge‚ et je peux le voir*/
}

Cela marche aussi avec le pseudo-classe :active sauf sous Internet Explorer (même la v7b2).

Les messages secrets ne sont pas tous secrets sous un navigateur texte (en tout cas, pas cette méthode).

Il existe enormement de méthodes pour faire une fonction de messages secrets en CSS avec les pseudos-classes (display:none, imbrication de balises <span>, déplacement du message hors de la fenetre ...)

Le plus amusant étant de les découvrir

Thunderseb

10 avril 2006 à 12:00:08

Comment center un tableau en CSS ?

Réponse simple : Il suffit d'attribuer un margin-left et right automatique, comme ceci :

<table style="margin-left: auto; margin-right: auto;">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
</table>

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

Thunderseb

15 avril 2006 à 1:00:08

[edit] en fait non, j'ai dit une connerie. Zut, il n'y a pas moyen d'éffacer son dernier post comme sur un phpbb.

Désolé

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

St!L1g

15 avril 2006 à 11:03:23

Question : Comment utiliser un bouton comme un lien ?

Réponse :

C'est très facile, on va utiliser un lien dans lequel au lieu de mettre du texte, on met un bouton.
Ce qui donne ce code là :

Mais le texte du lien est donc souligné, comment puis-je enlever ça ?

Pour que le texte du bouton ne soit pas souligné, il va faloir utiliser du CSS.
Ce qui donne ça au final :

.lien_bouton{
text-decoration:none
}

Attention, comme on vient de le voir, il ne faut pas appliquer le text-decoration:none au bouton, il faut l'appliquer au lien.

yöm

19 avril 2006 à 14:20:14

Je ne suis pas sûr de la sémantique : les boutons ne sont pas uniquement cantonnés à être placés dans des formulaires ?

Edition : et pour ton exemple, pense à fermer correctement tes balises <input /> beaucoup de nous codons en XHTML 1.0.

St!L1g

19 avril 2006 à 17:21:57

Oui, en effet, je me demandais si ça respectait la sémantique.
Je vais faire des recherche.

Et au fait, moi, j'écris en HTML 4.01 non en XHTML 1.0. C'est pour ça que je n'ai pas fermé la balise input.

yöm

19 avril 2006 à 18:29:23

Reste quand même que beaucoup de monde code en XHTML 1.0, fait une petite note. Pour le bouton, j'ai regardé la définition d'un bouton poussoir et elle parait correspondre à ton utilisation, c'est plutôt une restriction de DTD à laquelle il faut s'attendre.

Edition : Ok, pas de problèmes !

St!L1g

19 avril 2006 à 22:41:46

Bon, voici un petit fichier HTML où j'utilise la balise input comme dans ma question-réponse :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>
Essai
</title>
</head>
<body>

<p>
<a href="caca.html" title="la page caca"><input type="submit"></a>
</p>

</body>
</html>

J'ai passé ce fichier au test Validator et d'après ce que j'ai compris (c'est en anglais), il n'y a aucune faute dans mon fichier !

Voici ce qu'il m'a écrit après le test :

Result: Tentatively passed validation
File: caca.html
Encoding: utf-8
Doctype: HTML 4.01 Strict

Attention, ce fichier a passé le test pour le HTML 4.01 et non pour le XHTML 1.0.

gcyrillus

8 mai 2006 à 18:48:32

bonjour,

La page caca.html, ne fonctionne pas dans IE.
pourquoi un type submit de formulaire quand il existe le type : button".
Et puis pourquoi ne pas utilliser directement la balise button ?

derniere remarque :
En mettant un border "outset" a <a>, avec un fond gris ,un peu de padding et un line-height adequate , on obtiens quelque chose qui ressemble a un bouton.
En changeant le "outset" par un "inset" au survol , on a visuellement un "boutton" .
C'est valide et semantiquement correcte en html/ xhtml, vu qu'on obtiens l'aspect du bouton par le biais du css.

les choses sont parfois plus simple qu'il n'y parait.
++

<edit> une page d'essai, a nommer plutot essai.html ;), en xhtml, cette fois ci (peut de difference en fait avec le html, on referme toute les balises ouvertes, br, hr, img,meta, etc ... et on banni les majuscule )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>
Essai
</title>
<style type="text/css" >
a {
padding:1px;
padding-right:20px;
border-top:2px solid #ccc;
border-left:2px solid #ccc;
border-right:2px solid #222;
border-bottom:2px solid #222;
line-height:28px;
height:20px;
background:#ACD1EC url(http://www.siteduzero.com/Templates/images/designs/1/speedbarre/forums.png) right center no-repeat;
text-decoration:none;
color:#000;
}
a:hover {
border-top:2px solid #222;
border-left:2px solid #222;
border-right:2px solid #ccc;
border-bottom:2px solid #ccc;
line-height:26px;
}
p {text-align : center;}
</style>
</head>
<body>
<p>Exemple repris avec une balise de lien uniquement, deguisée en "boutton" avec un fond bleu et le smiley des forums du SDZ !</p>
<p>Les bordures sont dessinée une par une pour un affichage des couleurs identiques d'un navigateur a l'autre.</p>
<p><a href="http://gcyrillus.free.fr/trucs_css/" title="le dossier truc-astuces">D'autres idées.</a></p>
<p>Le css transforme visuellement la balise de lien, on peut donc en faire un boutton .</p>
<p>Gcyrillus ... <p>
</p>
<p>P.S. Ceci est un ultra mini mini tuto
<img src="http://www.siteduzero.com/Templates/images/smilies/smile.png" alt="sourire" />
</p>

</body>
</html>

</edit>

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Anonyme

11 mai 2006 à 19:24:05

Citation : Oylex

<form method="post" action="traitement.php">
<p>
<label for="nom">Votre pseudo : </label>
<input type="text" name="pseudo" id="nom" />
</p>
</form>

En plus, c'est accessible

gcyrillus

11 mai 2006 à 23:04:48

bonjour,

oui tout a fait, d'ailleurs il s'agit bien d'un formulaire a part entiere ou le input fait son office

.
Ce que je releve et qui ne marche pas c'est le detournement d'un imput en dehors d'un formulaire , que l'on place dans une balise <a> pour la "customisé" et qui rend de plus ce lien inactif dans IE ! idée sans interet en finale .
Amicalement ++

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

St!L1g

24 mai 2006 à 20:00:36

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 !

1 2 3 4 >>

[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.

[FAQ] Mise en place

Donnez-nous vos idées...

Attention :

[FAQ] Mise en place

Supprimer

Modérer

Signaler le message aux modérateurs