Partage

FOIRE AUX QUESTIONS (X)HTML - CSS

A CONSULTER IMPERATIVEMENT AVANT DE POSTER

2 août 2007 à 19:57:52

Les questions <acronym title="(Extensible) HyperText Markup Language">(X)HTML</acronym> et <acronym title="Cascading Style Sheet">CSS</acronym>




Autres points & ressources




Pour compléter cette FAQ vous pouvez apporter votre contribution dans ce sujet ou envoyer un MP à un modérateur.
2 août 2007 à 20:08:02

Auteur : Duarna

Pourquoi mon bloc ne se centre pas même avec un margin défini à auto ?


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  */
}
 
2 août 2007 à 20:15:42

Auteur : Thunderseb

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


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

<meta http-equiv="imagetoolbar" content="no" />
2 août 2007 à 20:20:34

Auteur : Thunderseb

Dans un tableau, comment définir les marges intérieures des cellules ainsi que les espaces entre les cellules ?


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>
 
2 août 2007 à 20:26:02

Auteur : IntoX94

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

Auteur : Oylex

Question : Comment faire fonctionner les labels sur IE ?

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>
2 août 2007 à 20:35:27

Auteur : Lpu8er

Comment créer 3 "colonnes" sans tableaux ?


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.
2 août 2007 à 20:39:22

Auteur : le_stoppeur

Question : Comment centrer un bloc verticalement ?


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)
2 août 2007 à 20:43:03

Auteur : gcyrillus

Comment englober un flottant ?

Reponses : 4 Methodes.

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 ! :p

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


2 août 2007 à 20:47:49

Auteur : Tails the fox

Comment ôter la bordure autour des images situées dans des liens ?


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


a img
{
 border: none;
}
3 août 2007 à 9:38:18

Auteur : gcyrillus

Comment empecher un "block" de passer sous un flottant ?


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 !
comme un élément de type "block".


Deuxième réaction, ils se reduisent à la taille de leur contenu .
comme s'ils etaient positionné en absolu !


Troisième effet désagréable , ils n'étirent 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>
<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" .
3 août 2007 à 9:45:48

Auteur : rk2

Comment faire pour que le background ne se répète pas ?


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)
3 août 2007 à 9:50:42

Auteur : Sylvain.sab

Le validateur CSS du W3C me donne une erreur : «Redéfinition de la propriété .... » Pourquoi ?


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.

3 août 2007 à 9:53:56

Auteur : metalking

Question : Comment appliquer plusieurs classes CSS à un seul et même objet

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>
 
3 août 2007 à 14:19:04

Auteur : Tails the fox

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 !


Sources : http://www.webrankinfo.com
4 août 2007 à 2:00:08

Comment centrer un émoticone sur une ligne de texte ?


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;
}
6 août 2007 à 15:56:23

Pourquoi avec IE la hauteur d'un bloc ne veut pas descendre en dessous d'une certaine taille ?

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

16 août 2007 à 13:00:55

Auteur : Thunderseb

Comment écrire du code HTML qui ne soit pas interprété ?


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.

Faites attention qu'un élément PRE ne peut contenir d'autres éléments (comme des SPAN). Si vous voulez colorer des parties de votre code, vous devrez utiliser une simple balise DIV.
8 septembre 2007 à 13:19:54

Auteur : 5.56 mm

Liste des outils de validation (non exhaustive)


8 septembre 2007 à 13:34:09

Auteur : KorangaR

Pourquoi mes accents s'affichent bizarrement ?

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...).
15 septembre 2007 à 15:12:30

Outils d'aide au développement à intégrer aux navigateurs


Firefox/Iceweasel et autres navigateurs basés sur gecko




Internet Explorer




Opera




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

Auteur : Talus

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


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>
11 janvier 2008 à 13:24:17

Comment empêché mon texte de dépasser d'un bloc dans mon html ?


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


Le CSS3 fournit une propriété permettant de couper les mots trop longs, mais de là à ce que soit implémenté sur tous les navigateurs, il faudra je pense attendre quelques années :-°
27 février 2008 à 14:13:54

Les chemins relatifs, brève explication


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 :

arborescence

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.
2 mars 2008 à 18:42:41

Auteur : treize

Comment mettre deux colonnes en background sur une page en CSS ?

=> 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 :p .
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
}


Je ne mets pas de padding à #deco_gauche car il affecterait #deco_droite et décalerait le background. ;)
13 mars 2008 à 11:54:18

En mettant un background sur un fieldset, IE met également le background sur le legend, comment régler ce problème ?


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 :
Image utilisateur

Rendu sur IE :
Image utilisateur

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.
3 novembre 2008 à 19:01:21

Auteur : graphox

Question : Comment éviter que le background-image d'un input ne se décale quand nous dépassons du champ ? (sous IE)

Réponse :

Aperçu :
Image utilisateur

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;
}
28 décembre 2008 à 11:44:42

Comment imbriquer des listes ul ou ol en html ?


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>
14 janvier 2009 à 17:18:38

Pour en finir avec les images qui ne s'affichent pas ou les css n'étant pas pris en comptes.


Vos images ne s'affichent pas dans votre navigateur ?

Vos css ne sont pas pris en compte dans vos pages ?


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 :

Architecture basique

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