Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS / Javascript > [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

Page : 1  2  3  4  Suivante
Auteur Message
1 visiteur sur ce sujet (1 anonyme)
Page : 1  2  3  4  Suivante
Hors ligne Deeder # Posté le 15/12/2005 à 23:11:39
Libriste et standardiste...
Avatar
Groupe : Membres
Bonjour ! :)

D'un commun accord entre modérateurs, nous avons décidé de mettre en place une FAQ 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 :
Code : 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 ^^
Édité le 17/12/2005 à 16:09:01 par Nyro Xeo

Image utilisateur
 
Hors ligne JulFisher # Posté le 16/12/2005 à 18:13:52
Un Zér0 sur le réZ0
Avatar
Groupe : Membres
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.

Image utilisateur
Édité le 16/12/2005 à 18:16:14 par JulFisher

Image utilisateur

Un Rubik's Cube complexe ? Une solution simple !
http://www.rubikscube.fr

Legend of Mana, Vagrant Story, Parasite Eve, powaa !
Image utilisateurImage utilisateurImage utilisateur
 
Hors ligne Duarna # Posté le 16/12/2005 à 18:27:06
Avatar
Groupe : Membres
Question : Pourquoi mon bloc ne se centre pas même avec Code : CSS
margin:auto;
?

Réponse : Pour fonctionner, Code : CSS
margin:auto;
a besoin d'un largeur fixe (exprimée en pixels ou en pourcentage ect...).
Par exemple :Code : CSS
BaliseDuBloc
{
 margin:auto;
/* Les marges sont automatiques */
 width:100px;
/* On donne une taile fixe au bloc pour que cela fonctionne  */
}


Édité le 16/12/2005 à 21:52:38 par Duarna
Hors ligne JulFisher # Posté le 16/12/2005 à 19:01:52
Un Zér0 sur le réZ0
Avatar
Groupe : Membres
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 :

Code : CSS
#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.
Édité le 07/02/2006 à 23:35:57 par JulFisher

Image utilisateur

Un Rubik's Cube complexe ? Une solution simple !
http://www.rubikscube.fr

Legend of Mana, Vagrant Story, Parasite Eve, powaa !
Image utilisateurImage utilisateurImage utilisateur
 
Hors ligne Kels # Posté le 17/12/2005 à 10:14:55
..communiste refoulé
Avatar
Groupe : Membres
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.
Code : JavaScript

<a href="page.htm" onclick="window.open(this.href); return false;">

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. :D

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.
Édité le 17/12/2005 à 10:17:19 par Kels
 
Hors ligne Thunderseb # Posté le 17/12/2005 à 14:21:14
La bière ? Chnafon !
Avatar
Validateurs
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 :

Code : HTML
<meta http-equiv="imagetoolbar" content="no" />


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 :

Code : HTML
<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> :

Code : HTML
<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>
Édité le 20/12/2005 à 12:18:51 par Thunderseb
 
Hors ligne JulFisher # Posté le 19/12/2005 à 18:12:58
Un Zér0 sur le réZ0
Avatar
Groupe : Membres
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 :

Code : CSS
h1, h2, h3 {
margin: 0;
}


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

Image utilisateur

Un Rubik's Cube complexe ? Une solution simple !
http://www.rubikscube.fr

Legend of Mana, Vagrant Story, Parasite Eve, powaa !
Image utilisateurImage utilisateurImage utilisateur
 
Hors ligne Thunderseb # Posté le 23/12/2005 à 11:59:19
La bière ? Chnafon !
Avatar
Validateurs
Comment faire pour que Internet Explorer affiche correctement des images PNG 24 bits?


A mettre dans le HEAD de votre page :

Code : HTML
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="png.js"></script>
<![endif]-->


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

Code : JavaScript
// 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 ;)
Édité le 05/01/2006 à 23:39:50 par Thunderseb
 
Hors ligne Thunderseb # Posté le 23/12/2005 à 12:46:02
La bière ? Chnafon !
Avatar
Validateurs
Citation : yom
C'est valide ça ? Je pense que "<!--[endif]-->" ira mieux ;)


C'est valide ;)
 
Hors ligne IntoX94 # Posté le 26/12/2005 à 14:52:42
Linux§§§
Avatar
Groupe : Membres
Pourquoi mon site n'est pas centré sous IE ?



On vous a appris à utiliser:
Code : CSS
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:
Code : CSS
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*/}


Édité le 26/12/2005 à 14:54:47 par IntoX94
 
Hors ligne JulFisher # Posté le 27/12/2005 à 12:36:10
Un Zér0 sur le réZ0
Avatar
Groupe : Membres
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 :

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

* html body {
/* Style appliqué seulement pour IE */
}
Édité le 27/12/2005 à 21:28:02 par JulFisher

Image utilisateur

Un Rubik's Cube complexe ? Une solution simple !
http://www.rubikscube.fr

Legend of Mana, Vagrant Story, Parasite Eve, powaa !
Image utilisateurImage utilisateurImage utilisateur
 
Hors ligne Webokage # Posté le 30/12/2005 à 09:28:20
www.total-lanfeust.com
Avatar
Groupe : Membres
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 :

Code : CSS
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 ^^

Vous êtes un fan de Lanfeust de Troy, de Lanfeust des étoiles, ou de Trolls de Troy..? Vous voulez simplement découvrir ces BDs ? N'attendez plus,Total-Lanfeust est fait pour VOUS !
Image utilisateur





 
Hors ligne JulFisher # Posté le 30/12/2005 à 18:56:05
Un Zér0 sur le réZ0
Avatar
Groupe : Membres
Si tu avais essayé, tu aurais remarqué que oui ;)

Image utilisateur

Un Rubik's Cube complexe ? Une solution simple !
http://www.rubikscube.fr

Legend of Mana, Vagrant Story, Parasite Eve, powaa !
Image utilisateurImage utilisateurImage utilisateur
 
Hors ligne yalcin # Posté le 03/01/2006 à 22:00:07
Groupe : Membres
:(
le code suivant ne fonctionne pas

Code : CSS
#pied_de_page
{

/* Vos autres propriétés positonnant
et stylisant votre pied de page*/

clear: both;
}
Hors ligne JulFisher # Posté le 04/01/2006 à 13:19:00
Un Zér0 sur le réZ0
Avatar
Groupe : Membres
Cela ne fonctionne que si ton corps et ton menu sont des flottants ;)

Image utilisateur

Un Rubik's Cube complexe ? Une solution simple !
http://www.rubikscube.fr

Legend of Mana, Vagrant Story, Parasite Eve, powaa !
Image utilisateurImage utilisateurImage utilisateur
 
Hors ligne Oylex # Posté le 07/02/2006 à 14:54:26
PHPGator !!! Grrrr.
Avatar
Groupe : Membres
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:
Code : HTML
<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:
Code : HTML
<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:
Code : HTML
<form method="post" action="traitement.php">
   <p>
       <label for="nom">Votre pseudo : </label>
       <input type="text" name="pseudo" id="nom" />
   </p>
</form>


Voilà.

Boo
 
Hors ligne TrAsHeR # Posté le 21/02/2006 à 16:16:15
T'es beau toi :)
Avatar
Groupe : Membres
Citation : Thunderseb
Voilà. Comme cela, IE gèrera la transparence des images PNG ;)


sa c'est beau merci

:p
 
Hors ligne Hawks # Posté le 23/02/2006 à 18:55:19
Myxomatose et pipe en bois
Avatar
Groupe : Membres
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 :

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

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


Un autre
Code : CSS
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é */

Édité le 27/02/2006 à 16:07:23 par Hawks
 
Hors ligne 5.56 mm # Posté le 12/03/2006 à 20:34:15
Groupe : Membres
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

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

Code : CSS
.secret{ /* mon message secret est ...*/
  color:#ff0000; /*... écrit en blanc ...*/
  backgroundcolor:#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 ;)
Édité le 13/03/2006 à 20:55:27 par 5.56 mm

Décoche la 8eme case sur cette page !
 
Hors ligne Thunderseb # Posté le 10/04/2006 à 12:00:08
La bière ? Chnafon !
Avatar
Validateurs
Comment center un tableau en CSS ?


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

Code : HTML
<table style="margin-left: auto; margin-right: auto;">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>
 
Hors ligne Thunderseb # Posté le 15/04/2006 à 01:00:08
La bière ? Chnafon !
Avatar
Validateurs
[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é
Édité le 15/04/2006 à 01:08:02 par Thunderseb
 
Hors ligne St!L1g # Posté le 15/04/2006 à 11:03:23
Ma Citation !!!
Groupe : Membres
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à :
Code : HTML
<a href="page_du_lien.html" title="cliquez là"><input type="submit" value="texte du bouton"></a>


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 :
Code : HTML
<a href="page_du_lien.html title="cliquez là" class="lien_bouton"><input type="submit" value="texte du bouton"></a> 


Code : CSS
.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.
Édité le 15/04/2006 à 12:34:41 par St!L1g

geeking...

Enigmes en chaînes
"Je suppose que vous voulez aller à l'énigme suivante"






 
Hors ligne yöm # Posté le 19/04/2006 à 14:20:14
Ich bin intégriste !
Avatar
Groupe : Membres
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.
Édité le 19/04/2006 à 14:21:39 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.
 
Hors ligne St!L1g # Posté le 19/04/2006 à 17:21:57
Ma Citation !!!
Groupe : Membres
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.

geeking...

Enigmes en chaînes
"Je suppose que vous voulez aller à l'énigme suivante"






 
Hors ligne yöm # Posté le 19/04/2006 à 18:29:23
Ich bin intégriste !
Avatar
Groupe : Membres
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 ! ^^
Édité le 20/04/2006 à 08:08:32 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.
 
Hors ligne St!L1g # Posté le 19/04/2006 à 22:41:46
Ma Citation !!!
Groupe : Membres
Bon, voici un petit fichier HTML où j'utilise la balise input comme dans ma question-réponse :

Code : HTML
<!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.

geeking...

Enigmes en chaînes
"Je suppose que vous voulez aller à l'énigme suivante"






 
Hors ligne gcyrillus # Posté le 08/05/2006 à 18:48:32
restons curieux !
Avatar
Groupe : Membres
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 )
Code : HTML
<!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>
Édité le 08/05/2006 à 19:31:53 par gcyrillus

Mes recettes re7net
"des gabarits" Gabarits
test en ligne: (x)html, css , js et doctype dans une popup editeur fmr
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 !
 
Hors ligne deuterium360 # Posté le 11/05/2006 à 19:24:05
rebelle refoulé
Groupe : Membres
Citation : Oylex

Code : HTML
<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 :)
Hors ligne gcyrillus # Posté le 11/05/2006 à 23:04:48
restons curieux !
Avatar
Groupe : Membres
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 ++

Mes recettes re7net
"des gabarits" Gabarits
test en ligne: (x)html, css , js et doctype dans une popup editeur fmr
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 !
 
Hors ligne St!L1g # Posté le 24/05/2006 à 20:00:36
Ma Citation !!!
Groupe : Membres
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 ! ;)

geeking...

Enigmes en chaînes
"Je suppose que vous voulez aller à l'énigme suivante"






 

Retour au forum "XHTML / CSS / Javascript" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 107 Zéros connectés | Requêtes SQL 7 requêtes | Temps de génération de la page : Total (SQL) 0.1721s (0.1543s)