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

FOIRE AUX QUESTIONS (X)HTML - CSS - JAVASCRIPT

A CONSULTER IMPERATIVEMENT AVANT DE POSTER

Vous devez être inscrit pour pouvoir poster des messages

Page : Précédente 1 2

Auteur

Message

1 visiteur sur ce sujet (1 anonyme)

Page : Précédente 1 2

strucky

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

Je suis tombé par terre ...

Groupe : Membres

Reprise du dernier message de la page précédente :

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

Je suis tombé par terre ...

Groupe : Membres

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

Je suis tombé par terre ...

Groupe : Membres

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

Je suis tombé par terre ...

Groupe : Membres

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

Je suis tombé par terre ...

Groupe : Membres

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

Je suis tombé par terre ...

Groupe : Membres

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 / Javascript" 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 - JAVASCRIPT

A CONSULTER IMPERATIVEMENT AVANT DE POSTER

Firefox/Iceweasel et autres navigateurs basés sur gecko

Internet Explorer

Opera

Pour un design fixe

Pour un design extensible