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.

----------------- FIN -----------------

Si vous avez des critiques à formuler sur ce que j'ai écrit, c'est le moment

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



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.



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




Je pense que le code parle de lui-même

En espérant vous avoir aidé.

Ca y est strucky, j'ai trouvé une soluce bien connue.

Ouaip, là je suis d'accord, les colonnes sont bien extensibles en hauteur

Par contre un truc à rectifier, c'est le padding pour #deco_gauche.
Il n'en faut pas

Oui effectivement, je viens de m'en rendre compte.
Boh, je modifierais demain.

C'est ajouté

A vot' bon coeur m'sieurs dam'

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

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



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 :



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

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>

Réponse :

Aperçu :


Si votre feuille de style est semblable a :

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 */
}

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

Apprenez à créer votre site web !

plusieurs vont me remercier car ils n'avaient pas vus le lien dans toutes les pages du site!

Citation : strucky

Pour en finir avec les images qui ne s'affichent pas

Vos images ne s'affichent pas dans votre navigateur ?
Cette explication est faite pour vous et vous permettra sans doute de régler votre problème.

Première chose à savoir, il ne faut jamais mettre le chemin d'une image (ou autres fichiers) depuis la racine du disque dur, les chemins du genre C:\Documents and Settings\mon_site_web\mes_images\image.jpg ne doivent-être en aucun cas utilisés.
A la place, on utilisera 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/mes_images/mon_image.gif) sont préférables.

Ensuite, on procède par étapes pour résoudre ce problème d'affichages :

1. C'est sans doute quelque chose de très con, mais votre image existe t-elle ?
   Si vous avez un espace sur un hébergement, a t-elle été correctement transférée vers votre espace ?
   Ce sont des choses élémentaires à vérifier.
   
2. Avez-vous bien mit l'extension de votre image, dans le chemin vers celle-ci ?
   

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

3. On vérifie que la casse (différences entre majuscules et minuscules) est correcte dans le nom et extension de l'image, pour le navigateur, mon_image.jpeg est totalement différent de monImage.JPEG

___________________

J'ai peut-être oublié d'autres trucs pouvant concerner un problème d'affichage d'une image, si vous avez d'autres conseils à émettre, n'hésitez pas.

J'ai rectifié le tir afin que cela s'applique aux images et css :

Citation

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 :

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

Je pense aussi que tu pourrais l'arboresence (oui, ça ne s'écrit pas comme ça )
Genre si fond.jpg et bien par rapport à la feuille de style, si soleil.png, bien par rapport à index.html --> [dossier]images --> soleil.png

Car beaucoup de personne oublie ceci

J'en parle lorsque je fais allusion aux chemins

Réponse :

Je précise que le code que je vais vous donner est invalide.

Pour faire défiler du code dans un page web, on utilise les balises <marquee> .
Cette balise marquee prend plusieurs attributs :

Nom	Traduction	Fonction	Valeurs	Exemple
scrollamount	Montant de défilement	Gère la vitesse de défilement	Un nombre positif (décimaux acceptés)	scrollamount="3"
scrolldelay	Retard de défilement	Délai entre chaque mouvement	Un nombre en millisecondes	scrolldelay="1000"
direction	Direction	Gère la direction	up, down, left, ou right	direction="up"
loop	Boucle	Nombre de boucles	Un nombre (0 signifie l'infini, valeur par défaut)	loop="3"
behavior	Comportement	Type de défilement	scroll (par défaut), slide (repart brusquement) ou alternate (rebondit)	behavior="alternate"
onmouseover onmouseout	Quand la souris arrive/quitte	Gère les évènments au survol de la souris	this.start() (démarrer) et this.stop() (arrêter)	onmouseover="this.stop();" onmouseout="this.start();"
class ou id	Classe/Identifiant	Repère CSS	Chaîne de caractères.	class="news_defile"

Et après vous n'avez plus qu'a améliorer votre marquee avec un peu de css !

PS : Cette question à étée tirée d'un tuto crée par moi et Dunedune qui a été refusé.

Cela s'apparente à du javascript et non du html.

De plus comme c'est invalide, cela n'a aucunement sa place dans une FAQ.

Il y a juste le onmouseover et le onmouseout qui sont du javascript.

Mais bon, c'est vous qui voyez !

Heu bah juste savoir si c'est normal que dans mon siteje met le fon en gris et que je met des images ok? Jusque là tout le monde suit?Bon,j'ai IE et Firefox mais sur IE mes images s'affichent mais pas les couleurs et sur FireFox c'est l'inverse,les coleurs s'affichent mais pas les images aidez-moi Svp

Citation : maniaco-maniaque

Heu bah juste savoir si c'est normal que dans mon siteje met le fon en gris et que je met des images ok? Jusque là tout le monde suit?Bon,j'ai IE et Firefox mais sur IE mes images s'affichent mais pas les couleurs et sur FireFox c'est l'inverse,les coleurs s'affichent mais pas les images aidez-moi Svp

Pour demander de l'aide, ouvre un topic.

ah bah oui logique =p

J'ai une suggestion à mettre dans la FAQ, la réponse à une question à laquelle je réponds chaque jour.

Le problème est que les débutants essaient parfois de mettre une hauteur en pourcentage, ce qui ne fonctionne pas.

Réponse :

Pour appliquer une feuille de style à un navigateur il faut utiliser les commentaires conditionnels.
Un commentaire conditionnel ressemble à ceci :

<!--[if IE 9]> Xhtml pour IE 9 <![endif]-->

Et signifie : "Si le navigateur est IE 9, alors affiche ceci."

Il existe différents opérateurs pour les commentaires conditionnels :

Citation : Mathieu Nebra dans le livre 'Réussir son Site web avec Xhtml et CSS'

Opérateur	Signification
!	"N'est pas".
lt	"Inférieur à". Abréviation de "Lower Than."
lte	"Inférieur ou égal à". Abrévation de "Lower Tahn or Equal"
gt	"Supérieur à". Abréviation de "Greater Than".
gte	"Supérieur ou égal à". Abréviation de "Greater Than or Equal".

Quelques exemples...

<!--[if !IE]><--> 
Xhtml pour les navigateurs différents de IE. 
<!--><![endif]-->

<--[if gt IE 6]> 
Xhtml pour les versions d'IE supérieur à IE 6. 
<![endif]-->

Et c'est ainsi qu'on peut appliquer une feuille de style à un navigateur en particulier, en utilisant les commentaires conditionnels dans l'en tête .

<!--[if lt IE 7]>
<link href="Designs/style_ie6.css" title="Design pour IE inférieur à 7" 
rel="stylesheet" type="text/css" media="screen" /> 
<![endif]-->

Bonjour a tous

j'ai juste une question,voila,jai une liste de menu tout en haut de ma page,ce que je voudrais savoir cest comment faire en sorte que a chaque fois que je clique sur un lien de ma liste de menu qui est tout en haut de mon site,le nouvelle page souvre tout en bas de la meme page.en claire lorsque je clique sur photos,videos ou contact tout en haut de la page,le contenu de chaque lien qui est en fait un page souvre tout en bas dans un div.voici un petit code pour illustrer lexemple:

<!DOCTYPE html>

    <html>

        <head>

            <style>

                ul li a:link {display: block;}

                .content {color: black;position: absolute;left: 100px;top: 200px;;border: 1px solid;display: none;}

                .content:target {display: block;}

            </style>

        </head>

        <body>

            <ul>

                <li><a href="photos.html#l1"  class="l11">photos</a></li>

                <li><a href="videos.html#l2"  class="l11">videos</a></li>

                <li><a href="contact.html#l3"  class="l11">contact</a></li>

            </ul>

            <div class="content" id="l1"></div>

            <div class="content" id="l2"></div>

            <div class="content" id="l3"></div>

        </body>

    </html>

merci pour vos reponses

Salut,

Merci de faire un minimum de recherches pour résoudre ton problème par toi-même. Si tu ne trouves toujours pas, tu devrais plutôt ouvrir une nouvelle discussion afin que les gens puissent te répondre plus facilement.

En outre, lorsque tu postes du code sur le forum, n'oublie pas le bouton « </> » qui permet de le colorer. C'est bien plus agréable à lire pour tout le monde.

Merci de ta compréhension et bon courage pour ton problème, GuilOooo

bonjours tout d'abord j’espère être au bonne endroit pour ce post .

Je voudrais savoir si y serai possible de modifier le cour HTML5/CSS3 dans la partit 5 "Hébergeur".

Vous nous envoyer a la référence de 1&1 et vous nous expliqué l'offre "Ultimed", pourriez vous nous présenté les autres offres de cette hébergeur car tout le monde ne connait pas forcément le vocabulaire utilisé sur ce site et ce demandera  pourquoi vous recommander cette offre et pas la basic par exemple voila tout.

Merci pour votre futur réponse car dans ce post.

il y avait une petite partit personnel donc vous comprendrai naturellement que je suis un peu perdu 

Si cela rendrais le cours trop long vous pourriez le faire tout de même en vidéo ou en pdf ?

Bonjour,

Je programme en R et je souhaite creer une page Markdown a partir de mon programme R. J'ai vu que vous aviez poste un sujet sur votre site au sujet de la programmation Markdown, qui est en fait relativement similaire a html. Bon mon probleme est que je souhaite tout simplement inserer une image enregistre dans mon mac a ma pahe html cree via markdown. Je tape donc:

![alt text][/Users/tessier.n/Projects/Abby/analyses/workflow.jpg]

Et ca ne marche pas.. j'ai lu sur votre site qu'il peut s'agir du fait qu'il ne fait pas utiliser des chemins absolus mais relatifs, alors j'essaye:

setwd("/Users/tessier.n/Projects/Abby") Programmation R

![alt text][../analyses/workflow.jpg] Programmation R Markdown

Et ca ne marche toujours pas, pourquoi? Il n'y a rien qui ne s'affiche a l'ecran.

Merci pour votre aide.

TachouTachou

...tu es sur le topic de la FAQ sur le forum html/css, tu sais ?

Si tu as un souci, crée un topic, merci.

Bonjour,

Dans le premier chapitre (vidéo organiser son texte) de la formation html et css nous faisons l'exercice suivant dans la balise body : <p>bonjour et bienvenue sur mon site !</p> . Apres enregistrement des modifications de la notepad++, l'actualisation de la page web ne la prend pas en compte ma nouvelle balise puisqu'elle n'affiche pas mon paragraphe. 

Pouvez vous m'expliquer la raison ? afin que je puisse poursuivre ma formation 

Merci d'avance 

...tu es sur le topic de la FAQ sur le forum html/css, tu sais ?

Si tu as un souci, crée un topic, merci.

(j'ai comme l'impression de me répéter)

Bonjour Lamecarlate,

c'est ce je voulais faire mais je n'ai pas trouvé l'endroit pour créer un topic.

Cette formation est un vrai challenge pour moi étant donné mon faible niveau en informatique (comme tu peux le constater je n'ai même pas réussi à faire un topic) et le besoin professionnel de comprendre et mettre en oeuvre ce language.

Si je ne suis pas au bon endroit, peux tu me dire comment faire un topic sur ce site ? 

Dans la liste des topics, tu as les 4 sujets épinglés, puis en dessous la pagination (carrés oranges/gris), et sur la même ligne, à droite, un bouton bleu "Créer un sujet".

Merci

Je viens de le faire