[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > FOIRE AUX QUESTIONS (X)HTML - CSS > Lecture du sujet

FOIRE AUX QUESTIONS (X)HTML - CSS

A CONSULTER IMPERATIVEMENT AVANT DE POSTER

Vous devez être inscrit pour pouvoir poster des messages

Page : 1

Auteur

Message

1 visiteur sur ce sujet (1 anonyme)

Page : 1

strucky

# Posté le 02/08/2007 à 19:57:52

Les questions (X)HTML et CSS

Autres points & ressources

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

strucky

# Posté le 02/08/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 :Code : CSS

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

strucky

# Posté le 02/08/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 :

Code : HTML

strucky

# Posté le 02/08/2007 à 20:20:34

Auteur : Thunderseb

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

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 :

Code : HTML

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

strucky

# Posté le 02/08/2007 à 20:26:02

Auteur : IntoX94

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

strucky

# Posté le 02/08/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 :
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>

strucky

# Posté le 02/08/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:
Code : HTML

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

strucky

# Posté le 02/08/2007 à 20:39:22

Auteur : le_stoppeur

Question : Comment centrer un bloc verticalement ?

Réponse :
Code : HTML

<html>
<head>
<style type="text/css">

</style>

</head>
<body>

<div class="centre">
ce calque est centré dans la page
</div>

</body>
</html>

(via)

strucky

# Posté le 02/08/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.
Code : CSS

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

<!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-flottant-nouvelle-methode.html

strucky

# Posté le 02/08/2007 à 20:47:49

Auteur : Tails the fox

Comment oter la bordure autour d'une image située dans un lien ?

Réponse :

Code : HTML

Code : CSS

a img
{
border: none;
}

strucky

# Posté le 03/08/2007 à 09:38:18

Auteur : gcyrillus

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

Reponses:

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

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

</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/flottant-et-element-exterieur-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" .

strucky

# Posté le 03/08/2007 à 09:45:48

Auteur : rk2

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

Réponse : Utiliser le code css suivant :

Code : CSS

Variante:
Code : CSS

background-repeat: repeat-x;

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

Variante 2:
Code : CSS

background-repeat: repeat-y;

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

strucky

# Posté le 03/08/2007 à 09:50:42

Auteur : Sylvain.sab

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

Réponse :

Ca veut dire que vous utilisez plusieurs fois la même proriété sur un élément.
Par exemple : Code : CSS

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.

strucky

# Posté le 03/08/2007 à 09:53:56

Auteur : metalking

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

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

Code : CSS

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

Code : HTML

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

strucky

# Posté le 03/08/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

strucky

# Posté le 04/08/2007 à 02:00:08

Comment centrer un émoticone sur une ligne de texte ?

Réponse :

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

Code : HTML

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

Code : CSS

img.emoticone {
vertical-align: middle;
}

strucky

# Posté le 04/08/2007 à 22:27:42

Auteur : Boo2M0rs0

Pourquoi mon script d'actualisation (ajax) ne marche pas sur Internet Explorer alors que je n'ai aucune erreur ?

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

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

//Exemple 1676. Interdire la mise en cache avec header()
//http://fr.php.net/manual/fr/function.header.php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date du passé

strucky

# Posté le 06/08/2007 à 15:56:23

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

Réponse :

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.

Code : CSS

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

strucky

# Posté le 16/08/2007 à 13:00:54

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

Ainsi, si vous souhaitez écrire ceci :

Citation

Il vous faudra écrire cela :

Citation

N'oubliez pas, si votre code est inclut 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

strucky

# Posté le 08/09/2007 à 13:19:54

Auteur : 5.56 mm

Liste des outils de validation (non exhaustive)

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

strucky

# Posté le 08/09/2007 à 13:34:09

Auteur : KorangaR

Pourquoi mes accents s'affichent bizarrement ?

Reponse :

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

strucky

# Posté le 15/09/2007 à 15:12:29

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.

strucky

# Posté le 20/09/2007 à 09:23:54

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 :
Code : HTML - Afficher / masquer les numéros de ligne

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

strucky

# Posté le 11/01/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 ...

Citation

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.

Code : HTML - Afficher / masquer les numéros de ligne

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

Code : CSS - Afficher / masquer les numéros de ligne

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

Code : PHP - Afficher / masquer les numéros de ligne

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

strucky

# Posté le 27/02/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 :

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.

strucky

# Posté le 02/03/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 :

Code : CSS - Afficher / masquer les numéros de ligne

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.

Code : HTML - Afficher / masquer les numéros de ligne

<div id="deco_gauche">
<div id="deco_droite">
</div>
</div>

Jusque là, c'est simple

.
Maintenant le CSS :

Code : CSS - Afficher / masquer les numéros de ligne

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

strucky

# Posté le 13/03/2008 à 11:54:17

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 :

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

Code : HTML

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

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

Vous devez être inscrit pour pouvoir poster des messages

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

FOIRE AUX QUESTIONS (X)HTML - CSS

A CONSULTER IMPERATIVEMENT AVANT DE POSTER

Les questions (X)HTML et CSS

Autres points & ressources

d'abord un petit blabla a propos de ces "satanés " flottants.

Et pourtant

Dans IE

Pour les autres :

Réponse :

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

Entités

Firefox/Iceweasel et autres navigateurs basés sur gecko

Internet Explorer

Opera

Pour un design fixe

Pour un design extensible