• Pour en finir avec les images qui ne s'affichent pas ou les css n'étant pas pris en comptes.
• Pourquoi mon bloc ne se centre pas même avec un margin défini à auto ?
• Comment empêcher Internet Explorer de mettre une petite barre d’outils sur les images, lors du survol de celles-ci par la souris ?
• Dans un tableau, comment définir les marges intérieures des cellules ainsi que les espaces entre les cellules ?
• Pourquoi mon site n'est pas centré sous IE ?
• Comment faire fonctionner les labels sur IE ?
• Comment créer 3 "colonnes" sans tableaux ?
• Comment centrer un bloc verticalement ?
• Comment englober un flottant ?
• Comment ôter la bordure autour d'une image située dans un lien ?
• Comment empecher un "block" de passer sous un flottant ?
• Comment faire pour que le background ne se répète pas ?
• Le validateur CSS du W3C me donne une erreur : «Redéfinition de la propriété .... » Pourquoi ?
• Comment appliquer plusieurs classes CSS à un seul et même objet ?
• Comment centrer un émoticone sur une ligne de texte ?
• Pourquoi avec IE la hauteur d'un bloc ne veut pas descendre en dessous d'une certaine taille ?
• Comment écrire du code HTML qui ne soit pas interprété ?
• Pourquoi mes accents s'affichent bizarrement ?
• Comment puis-je simuler le pseudo element ":hover" sur une balise (ou un noeud), quand celui-ci n'est pas interprété sur les balises autres que la balise "a" ?
• Comment mettre deux colonnes en background sur une page en CSS ?
• En mettant un background sur un fieldset, IE met également le background sur le legend, comment régler ce problème ?
• Des caractères étranges s'affichent sur mon site à la place de caractères accentués, quelle en est la cause ?
• Comment imbriquer des listes ul ou ol en html ?

• Optimiser son référencement sur les moteurs de recherche
• Liste des outils de validation
• Liste des tutoriels html/css des Zér0s
• Liste des tutoriels javascript des Zér0s
• Outils d'aide au développement à intégrer aux navigateurs
• Les chemins relatifs, brève explication

Auteur : Duarna



Réponse : Pour fonctionner, un margin: auto; a besoin d'une largeur fixe (exprimée en pixels, pourcentages, etc ...).
Par exemple :

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

Auteur : Thunderseb



Mettez tout simplement cette petite balise meta dans le head de votre page :

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

Auteur : Thunderseb



Pas besoin 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>
 

Auteur : IntoX94



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 du bloc (div) qui englobe tout votre site*/
 width: 800px; /*largeur du site*/
 text-align: left; /*on align le texte à gauche*/
}

Auteur : Oylex


Réponse :

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>

Auteur : Lpu8er



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:

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

Edit : Ce tutoriel pourra peut-être vous intéresser : Des techniques modernes pour l'agencement en colonnes.

Auteur : le_stoppeur



Réponse :

<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)

Auteur : gcyrillus



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.

.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" ):

<!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 faineants du analyser/copier/coller/comprendre
http://gcyrillus.free.fr/trucs_css/bug [...] -methode.html

Auteur : Tails the fox

<a href="url"><img src="url_de_image" alt="nom" /></a>

a img
{
 border: none;
}

Auteur : gcyrillus

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 avec le reste des élements.

Tout d'abord ils vont se placer à droite ou à gauche (selon float:left; ou right; )a partir de l'endroit ou ils se trouvent dans le html .
Première réaction étonnante , ils font un saut de ligne s'il y a quelque chose devant eux !


Deuxième réaction, ils se reduisent à la taille de leur contenu .

Troisième effet désagréable , ils n'étirent pas leur conteneur ou deborde sur les autres en repoussant leurs contenus.

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; "


reste le overflow:auto; ou hidden .


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>
<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/flo [...] -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" .

Auteur : rk2

nom_balise
{
 background-image: url(image.jpg);
 background-repeat: no-repeat;
}

Variante:

background-repeat: repeat-x;

répète le background seulement sur l'axe X (horizontal)

Variante 2:

background-repeat: repeat-y;

répète le background seulement sur l'axe Y (vertical)

Auteur : Sylvain.sab



Cela signifie que vous utilisez plusieurs fois la même propriété sur un élément.
Par exemple :

a
  {
     color:green;/*les liens seront en vert*/
     /*............*/
     /*du code*/
     /*............*/
     color:purple;/*ca ne va pas car on utilise deux fois la même propriété*/
  }

C'est souvent le cas lorqu'on utilise des !important pour avoir un style différent dans IE et les autres navigateurs.

A noter que ce ne sont que de simples avertissements et ne rendent pas un css invalide.

Auteur : metalking


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

.centre {
text-align: center;
}
.gras {
font-weight: bold;
}
.rouge {
color: red;
}
.bordure {
border: 1px solid black;
}

<p class="centre gras rouge bordure">
texte auquel on a appliqué les classes CSS 'centre', 'gras', 'rouge' et 'bordure'.
</p>
 

Auteur : Tails the fox

1 -/ Le contenu

2 -/ De nombreux liens externes

3 -/ Des liens externes de qualité

4 -/ Bien choisir le titre de chaque page

5 -/ S'inscrire dans les grands annuaires

6 -/ Pas de frames, et un nom de domaine

7 -/ Un site toujours disponible

8 -/ Interconnexion de vos pages

9 -/ Pas de site sans texte

10 -/ Mises à jour régulières du site

Sources : http://www.webrankinfo.com

Il suffit d'utiliser la propriété css vertical-align :

<p>début du texte <img class="emoticone" src="url_de_l_image" alt="  " /> suite du texte</p>

img.emoticone {
  vertical-align: middle;
}

Ceci est dû à ce qu'IE refuse de descendre la hauteur de ce bloc en dessous de la taille du font-size, il fait comme-ci le bloc en question contenait des caractères.

Pour règler ce problème, il suffit simplement de définir le font-size à 0.

#monBloc {
  height: 7px;
  font-size: 0;
}

Auteur : Thunderseb



Il suffit simplement de remplacer des chevrons d'ouverture et de fermeture des balises par leurs entités respectives :

Entités

Caractères	Entités
<	&lt;
>	&gt;

Ainsi, si vous souhaitez écrire ceci :

Citation

<p><img src="belleimage.png" alt="ne pas oublier cet attribut" /></p>

Il vous faudra écrire cela :

Citation

&lt;p&gt;&lt;img src=&quot;belleimage.png&quot; alt=&quot;ne pas oublier cet attribut&quot; /&gt;&lt;/p&gt;

N'oubliez pas, si votre code est inclus dans une phrase, de le placer dans la balise CODE. Si votre code s'étale sur plusieurs lignes, vous pouvez utiliser la balise block PRE.

Auteur : 5.56 mm

• en anglais
• validator.w3c.org
• en français
• validome.org
• w3qc.org/validateur
• en français et multi page
• proze.net/outils/validation-site.html

Auteur : KorangaR


La solution est de faire en sorte que la déclaration du charset qui se trouve généralement entre une balise meta soit en cohérence avec l'encodage réel de votre page. Pour changer l'encodage réel de votre page sous Notepad, il faut aller dans l'onglet "Format" et choisir entre ANSI et UTF-8 sans BOM tout en sachant qu'ANSI correspond à iso-8859-1(5). Avant de sauvegarder votre fichier, il est nécessaire de retaper tous vos caractères spéciaux.

A noter que c'est une des raisons pour laquelle les caractères spéciaux peuvent-être altérés, il se peut en effet que le problème vienne d'ailleurs (charset de la base de données, fihier xml, script ajax, etc...).

Firefox/Iceweasel et autres navigateurs basés sur gecko

• Web Developper
• FireBug

Internet Explorer

• Developer Toolbar
• DebugBar

Opera

• Web Developer Toolbar
• site validator

Ceci est une liste exhaustive, si vous connaissez d'autres extensions utiles au développement de page web, n'hésitez pas à les signaler.

Auteur : Talus



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

<ul>
    <li onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';" style="color:blue;">Texte bleu, si je passe dessus, il devient rouge !</li>
    <li onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';" style="color:blue;">Pareil !</li>
</ul>

Réponse :

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

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 
?>

Dans tout répertoire :
Le . (point) désigne le répertoire dans lequel on se trouve (répertoire courant)
Le .. (double point) désigne le répertoire parent du répertoire courant.

Dans un chemin :
Le / (slash) est un séparateur de répertoire (ou le répertoire racine sur système unix)

Ainsi pour remonter dans l'arborescence de nos répertoires, on utilise le ..

Exemple simple d'une arborescence d'un site web :



Notre fichier index.html est relié à fichier.css (balise link), dans celui-ci, on doit se servir de image_index.png en background.
Le chemin que l'on mettra dans l'attribut url() de la propriété background du css sera donc : ../image/image_index.png
Ce qui pourrait se traduire verbalement par : on sort du répertoire css (..), on entre dans le répertoire image pour prendre image_index.png, en séparant bien entendu le tout avec des slashs.

Notre fichier admin.html est relié à admin.css (toujours la balise link), dans celui-ci, on a besoin d'accéder à l'image image_admin.png.
Le chemin que l'on mettra pour l'attribut url() du background css sera donc : ../../image/image_admin.png
Que l'on exprimerait verbalement par : on sort du répertoire css (1er ..), on sort du répertoire admin (2nd ..), on entre dans le répertoire image pour prendre image_admin.png.

La chose à retenir est que pour remonter dans l'arborescence on utilise ..
Une fois que l'on arrive à se situer correctement dans notre arborescence, accéder à n'importe quel fichier est un jeu d'enfant.

Auteur : treize


=> 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 pixels) et de la mettre en arrière-plan avec :

body
{
   /* Largeur de la page */
   width: 800px; 
   /* Background de la page */
   background: url(../images/arriere_plan.png) top center repeat-y black 
}

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 engloberont la page entière et possèderont les background des colonnes.

<div id="deco_gauche"> 
 <div id="deco_droite">  
 
  <!-- Le contenu de votre page -->
 
 </div>
</div>

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

#deco_gauche
{
  /* On lui applique son background */
  background: url(../images/colonne_gauche.png) top left repeat-y black
}
 
#deco_droite
{
  /* On lui applique un padding, histoire que le corps ne passe pas dessus */
  padding: 0px 20px;
  /* De même pour cette colonne sauf qu'elle est à droite */
  background: url(../images/colonne_droite.png) top right repeat-y black
}

Problématique : Avec Internet Explorer le background d'un fieldset empiète sur le legend.

Exemple d'une page comprenant une partie d'un formulaire :

<!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>Ma page</title>
<meta name="generator" content="Quanta Plus" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
form { width: 500px; padding: 25px; background: #d9fffb }
fieldset { margin: 0 0 25px 0; background: #d9ddff }
fieldset p { margin: 15px 0; padding: 0; height: 25px; line-height: 25px }
legend { margin-left: 2em; font-weight: bold; font-variant: small-caps; }
label{ display: block; width: 150px; padding: 0 5px 0 0; float: left; text-align: right; font-variant: small-caps }
.inputText{ background: #e5e8ff }
.inputText:focus{ background: #fff }
</style>
</head>
<body>
 
<form action="" method="post">
   <fieldset>
      <legend>vos coordonées</legend>
      <p><label for="prenom">prenom : </label><input class="inputText" id="prenom" type="text" name="prenom" /></p>
      <p><label for="nom">nom : </label><input class="inputText" id="nom" type="text" name="nom" /></p>
   </fieldset>
</form>
 
</body>
</html>

Rendu sur opera :


Rendu sur IE :


La solution à ce problème consiste à utiliser un positionnement négatif pour le legend.

A ajouter dans le head de ma page exemple avec un commentaire conditionnel :

<!--[if IE]>
<style type="text/css">
fieldset { position: relative; top: 1em }
legend { position: relative; top: -1em; padding: 0.3em 0 0 0 }
</style>
<![endif]-->

On utilise un positionnement relatif afin que la propriété top s'applique à nos balises.
Sur le fieldset, on utilise un top: 1em afin de décaler le fieldset vers le bas.
Sur le legend on utilise un top: -1em afin que le legend "rentre" dans le fieldset.
On se sert également d'un petit padding-top afin de repositionner correctement le texte du legend.

Les valeurs que j'ai utilisé sont propres à ma page, à vous de modifier légèrement ces valeurs pour obtenir le meilleur rendu possible.

J'ai également mit le css directement dans ma page, mais c'est évidemment mieux d'utiliser des feuilles de styles.

Auteur : graphox


Réponse :

Aperçu :


Si votre feuille de style est semblable à :

input{
  background-image:url('images/champ.png'); /* L'url où se trouve votre image de fond par rapport au fichier css */
  background-color:transparent; /* Pour enlever le fond blanc par défaut */
  background-repeat:no-repeat;
  border:none; /* Pour enlever les bordures se trouvant autour de votre input */
  width:150px; /* Important : Renseigner ici la taille exacte de votre image de fond de l'input, le texte ne dépassera donc pas cette taille, vous pouvez après mettre un padding pour espacer les bords de l'image avec le texte */
}

Et que cette image prend toute la place du champ (pas une petite image dans un coin de l'input), il suffit de rajouter :

input{
  background:url('images/champ.png') right top no-repeat; /* Voilà les nouvautés ! Modifiez la première ligne de votre code par celle-ci, est le tour est joué ! */
  background-color:transparent;
  border:none;
  width:150px;
}

Un élément ul, ou ol ne peut avoir pour enfant direct uniquement que des éléments li.

Donc pour imbriquer une liste dans une autre, la liste enfant doit-être contenue dans un élément li de la liste parente.

Exemple basique :

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>item 2.1</li>
      <li>item 2.2</li>
    </ul>
  </li>
  <li>item 3
    <ul>
      <li>item 3.1</li>
      <li>item 3.2
        <ul>
          <li>item 3.2.1</li>
          <li>item 3.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>item 4</li>
</ul>

Cette explication est faite pour vous et vous permettra sans doute de régler votre problème.

Avant toute chose

Lorsque l'on développe un site ou une application web, il est impératif de mettre tous ses fichiers (que ce soit les fichiers html, les fichiers css, les fichiers javascript, les images, etc..) dans un même répertoire commun, que l'on nomme le répertoire racine..

Exemple simpliste d'une hiérarchisation du répertoire racine d'un site que je vous conseille fortement si vous débutez :

Bonnes pratiques à adopter

• Les noms de répertoires et fichiers ne doivent en aucun cas contenir des caractères spéciaux, accentués ou d'espacements, cela pose fréquemment des problèmes avec certains navigateurs, on ne gardera dans les noms de répertoires et fichiers que les lettres (de préférence en minuscules), les chiffres, les tirets «-» et les caractères de soulignement «_».
• Les chemins absolus depuis la racine de votre disque dur ne doivent jamais être utilisé, les chemins tels que «C:\Documents and Settings\site_web\images\image.jpg» sont à proscrire, on utilisera à la place des chemins relatifs.
  Si votre site est sur un serveur web, les chemins absolus depuis la racine du site ou encore des urls entières (http://monsite.org/images/image.gif) sont préférables.

Méthodes de résolutions du problème

• Chose élémentaire à vérifier, votre fichier image ou css existe t-il ?
  Si vous avez un espace sur un hébergement, a t-il été correctement transféré vers votre espace ?
  Comment vérifier son existence ?
  Il suffit simplement d'aller visualiser le fichier concerné via l'url de ce fichier, par exemple http://monsite.org/images/monimage.jpg.
• L'extension de votre image ou fichier css a t-elle été bien renseignée ?
  

  <!-- Incorrect, l'extension de l'image est omise -->
  <img src="./images/soleil" alt="lever de soleil" />
  <!-- Correct, l'extension indique que l'image est de type "png" -->
  <img src="./images/soleil.png" alt="lever de soleil" />
  

  
  Il en est de même avec une image devant-être affichée en background via le css
  

  #monBloc{
     /* Pas bon, manque l'extension de l'image */
     background: url(../images/fond);
  }
  

• On vérifie que la casse (différences entre majuscules et minuscules) est correcte dans le nom et extension de l'image (je vous conseille une nouvelle fois de n'utiliser que des minuscules), pour le navigateur, monimage.jpeg est totalement différent de monImage.JPEG