Difficulté avec les différents positionnements

[Zen_Spirit]

Bonjour tout le monde.

Voilà, je suis entrain de suivre des tutos concernant les différents types de poditionnements de boite ( relatif et absolu ) mais je me perds complètement.

En fait je confond tout avec le z-index.

Pour moi les 2 fonctions servent à superposer.

Je me creuse la tête sur pleins de tutos de divers forum, mais je comprends pas quand est ce que l'on utilise position : absolute et quand est ce que l'on utilse position : relative.

Afin que vous puissez m'éclairer et m'aider, je m'explique :

- 1/ Pour moi la position relative sert à mettre une boite contenant du texte ou image dessous et la position absolu sert à mettre une autre boite contenant du texte ou image par dessus de cette autre boite comme expliqué ICI ( voir la boite jaune sur la verte ). Là, dans ce tutos c'est clair pour moi.

Mais quand je regarde les cours sur les positions relatives et absolu ici :

**Position relative1et Position relative2

**position absolue

Alors là, maintenant c'est plus clair du tout, je ne vois aucune différence entre les deux types de positionnements, alors que pourtant s'il existe ces 2 types c'est qu'il y a une différence.

- 2/ Pour moi le z-index sert de superposition d'image ou de texte les uns sur les autres. ( Voir exemple ici ) Alors ici pourquoi ce que je ne comprends pas c'est à quoi servent les " <div style="position:absolute; Si on avait mis relative çà aurait changé quoi ?

Alors s'il vous plait, mettez moi dans le vrai chemin, car je confond vraiement tout maintenant.

MERCI à vous.

[Perrine]

Salut Zen

Effectivement, les débuts sont compliqués en css mais il suffit de prendre le coup de main.

Seul z-index à pour fonction de superposer 2 éléments.

Prenons l'exemple de 2 blocs de même dimension, positionnés sur ta page au même endroit : grâce à z-index tu vas pouvoir décider lequel de ton bloc A ou B sera au-dessus de l'autre (c'est à dire en 3D, le plus proche de toi).

Quant aux positionnements, il faut toujours garder à l'esprit que le html, comme le français, se lit de de gauche à droite et les éléments en ligne (inline) s'affichent les uns après les autres (c'est le cas de span, a...) tandisque les éléments bloc se positionnent les uns en dessous des autres (c'est le cas du célèbre div, p, hn, li...).

Partant de ce constat, on trouve divers positionnements tels que le absolute et le relative.

L'absolute est un positionnement qui sort l'élément du flux. C'est à dire qu'il n'interagit plus avec les blocs qui l'entourent. Un élément positionné en absolute se retrouve automatiquement en haut à gauche de son bloc conteneur.

Prenons un div A qui contient un div B, si B est en absolute, il se positionne dans le bloc A, en haut, à gauche.

Le relative quant à lui, reste dans le flux, mais il est possible de le positionner par rapport à sa place initiale. On peut alors le positionner plus haut ou plus bas (ou plus à gauche ou plus à droite) que sa place initiale. Réfère toi aux illustrations de l'article d'Openweb.

Cette phrase t'aidera :

Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.

- 2/ Pour moi le z-index sert de superposition d'image ou de texte les uns sur les autres. ( Voir exemple ici ) Alors ici pourquoi ce que je ne comprends pas c'est à quoi servent les " <div style="position:absolute; Si on avait mis relative çà aurait changé quoi ?

Dans ton exemple, le z-index sert à placer les chiens les uns au dessus des autres, tandisque le absolute sert à positionner les chiens à différentes coordonnées dans la page.

Si on avait utilisé le position=relative, les chiens auraient été les uns à la suite des autres et il aurait été plus fastidieux de les afficher comme ils le sont avec le position=absolute.

[Zen_Spirit]

Salut Perrine ! Merci d'avoir répondu.

Merci pour tes explications au combien précise, grace à toi, j'ai compris tout le fonctionnement des positions absolu et relative ainsi que l'utilisation des z-index.

Cependant, j'ai déjà suivi les cours du site du zéro et jusqu'à aujourd'hui je n'ai jamais compris l'utilisation des "span"et sa différence avec les "div". pourtant sur le site du zéro, tout est bien expliqué !!!

Là, je viens de comprendre en partie son utilisation, mais pour être plus clair dans ma compréhension, aurais tu un exemple à me montrer concernant l'utilisation des "span". Par rapport au "div".

Merci

[Perrine]

C'est tout bête : le span est ce qu'on appelle un élément "en ligne" contrairement au div qui est un élément de type "bloc"

En ligne : signifie que les éléments s'affichent les uns à côté des autres

Bloc : les éléments s'affichent les uns en dessous des autres

Fais le test sur une page avec le code suivant :

<span>élément 1</span><span>élément 2</span>

puis

<div>élément 1</div><div>élément 2</div>

Quelle est la différence ?

A noter que le span et le div sont tous les 2 des balises dites "neutres", c'est à dire qu'ils ne transportent aucun sens contrairement au h1, h2 (etc...) qui annoncent un titre, ou le p qui annonce un paragraphe, ou encore le ul et li qui annoncent une liste.

[Zen_Spirit]

Re-salut.

Si j'ai bien commpris l'un enchaine à coté de l'autre et l'autre renvoi à la ligne ! OK

Mais les "span" s"utilise comment ? Je veux dire par là, entre quelle balises ? Entre les <div>....</div> ou tout seul comme les <div>. d'où ta définition de balise neutre.

Merci !

[Perrine]

Tu as compris la différence entre div et span

Les span s'utilisent généralement pour donner un style particulier à du texte.

Par exemple, je peux écrire

Je souhaiterai mettre <span>cette partie en rouge</span> mais garder le reste de mon texte en noir.

Et dans ta css, tu auras (basiquement)

p{color:black;}
span{color:red;}

Les div sont généralement utilisés pour former des blocs dans ta page. Tu pourras ainsi retrouver un bloc #header, un bloc #menu, un bloc #contenu et un bloc #footer

[Zen_Spirit]

Salut Perrine !

Merci encore pour tes explications.

1 / Alors encore une petite précision que je souhaite avoir afin de vraiment bien comprendre.

Par rapport à tes derniers codes, si je fais comme t'as dit, alors celà signigie que le

span{color:red;}

s'appliquera à tout les span de la page HTML.

Une question : au lieu d'utiliser les span comme t'as fais, pourquoi ne pas utiliser les "class" ?

Au moin là, on sera sûr que le

{color:red;}

s'appliquera uniquement à la class défini.

2 / a- Pour être clair sur le span, donc son utilisation c'est uniquement pour donner un effet sur une partie d'un texte ( ou partie d'une phrase, comme dans ton exemple ).

ou b- Je me trompe les "class" s'appliquent à la totalité d'une balise et non à une partie d'une phrase ex:

<p class="paragraphe5">

Sikandara, le tombeau d'Akbar dans l'ex-capitale de Lodi, est déplorable en comparaison

avec le Taj Mahal. Akbar avait commencé la construction de son mausolée en suivant la tradition

de Trimurid, mais l'actuel monument était complété par son fils, Jehangir. Il avait démoli

presque toutes les ..............</p>

3 / Peut'on utiliser le span sur des images. Si oui, il peut servir à aligner les images sur une même ligne c'est çà ?

Merci de m'apporter ces précisions sur ces 3 points bien précis !

[Perrine]

1- Effectivement, si tu utilises la déclaration span{color:red;}, tous les span de ta page seront rouges. A moins que tu n'utilises ailleurs un

<span class="bonjour">Bonjour</span>

avec

.bonjour{color:blue;}

Ce qui signifie que tous les éléments avec une class .bonjour seront bleus.

Tu peux faire une imbrication de plusieurs choses, et c'est ça qui est assez puissant en css. Par exemple

<p class="paragraphe5">
<span>Sikandara</span>, le tombeau d'Akbar dans l'ex-capitale de Lodi, est déplorable en comparaison
avec le Taj Mahal. Akbar avait commencé la construction de son mausolée en suivant la tradition
de Trimurid, mais l'actuel monument était complété par son fils, <span class="bonjour">Jehangir</span>. Il avait démoli
presque toutes les ..............</p>

Dans le code ci-dessus, si l'on reprend les déclarations de nos posts précédents,

- le texte sera noir

- Sikandara sera rouge

- Jehangir sera bleu

Attention à ne pas confondre les class et les éléments (ou sélecteurs) html

Une class est un style que tu appliques à un élément : bonjour est une class de span

Un élément html est une balise html : hn, p, a, span, etc...

Dans ton exemple, écrire

{color:red;}

tout seul n'est pas correct car on ne sait pas à quel élément (ou quelle classe) s'applique cette déclaration

2- ton a) est correct, et ton à moitié

Une class peut s'appliquer à n'importe quel élément html

3- Oui, le span peut être utilisé pour encadrer des images... mais attention à ce qu'il y ait bien une utilité

Utiliser des span pour utiliser des span n'est pas la bonne solution.

Il faut que tu gardes à l'esprit que ton document html doit porter du sens et chaque élément qui le constitue doit être défini de manière précise : où est mon titre (h1) ? Où sont mes sous-titres (h2, h3, h4, etc...) ? Que sont les contenus (dois-je utiliser un p ? une liste de définition (dl, dt et dd) ? ou peut-être une liste à puces (ul et li) ?

Les plus classiques étant le a pour le lien et le img pour l'image

Personnellement, il est rare que j'utilise un span, à moins de faire quelque chose de bien précis en terme de mise en page.

Quant à la distinction entre balises neutres et balises sémantiques : div et span ne portent aucun sens. Quand je vois un div ou un span, je ne peux pas me dire que le contenu est un titre ou une image... Je sais juste que c'est un bloc d'information.

En revanche, si je croise un h1, je sais que c'est le titre de ma page... et ça prend de suite tout son sens.

Enfin, je t'invite à parcourir ce post intitulé Apprendre le (x)HTML

[Zen_Spirit]

Ok, merci encore perrine !

tu m'as appris encore des trucs sur l'utilisation de la balise "span".

Merci pour tes précisions qui sont très très claires !!!!

[Zen_Spirit]

Salut tout le monde !

Voilà, je suis entrain d'analyser le codage d'un site et je constate avoir encore quelques difficultés à comprendre le codage HTML et Css, surtout au niveau du positionnement : Voici le site : ICI le site

Faite afficher le code source et le fichier css du header est ici : ICI CSS

--- /* dashboard

---------------------------------------------------- */ ---

1- Alors voilà, dans le fichier CSS, le :

#dashbrd ul

je sais que c'est le positionnement de toute la liste de l'UL.

2- Mais le :

#dashbrd ul li {..... }

correspond à quoi ?

a- je veux dire par là, que le fait d'enchainer le ul et le li sert à quoi, svp.

b- Aussi il dit pour le

#dashbrd ul {

float: right;

}

et pour le dashbrd ul li

{float: left;}

Je me perds un peu, il dit le ul de flotter à droite et le li de flotter à gauche. D'accord, mais puisque le #dashbrd {

width: 764px;

padding-top: 10px;

font-family: Tahoma, Verdana, sans-serif;

}

Alors puisque le #dashbrd fait 764 de large, moi je ne vois rien qui flotte à gauche.

3- Dans le :

#dashbrd ul {

float: right;

margin: 0 15px 0 0;

padding: 0;

list-style: none;

background: url(/sitewide/headerfooter/images/login_bg_r.gif) no-repeat top right;

}

Alors pour le margin, le margin: 0 15px 0 0; signifie t'il bien dans l'ordre que le premier 0 c'est pour le top, le 15 c'est pour le right, l'autre 0 c'est pour le bottom et le dernier 0 c'est le left ?

4- Au tout début du code CSS il y a le background et vu la taille de l'image d'origine, pourquoi là il n'y a pas de x-repeat ?

Ici le background

5- Dans le code CSS, il y a ensuite :

#dashbrd li#dash-first {

padding-left: 20px;

background: url(/sitewide/headerfooter/images/login_bg_l.gif) no-repeat top left;

}

a- Cette propriété signifie quoi avec les 2 # ?

b- D'autant plus que pour l'image backround, je n'arrive pas à me repérer ici pa rapport au code:

Alors padding-left: 20px; pour moi signifie : l'espace intérieur gauche. Mais il fait réference à quoi sur le site ? !!!

Ici le Background question 5 - b

6- Alors pour les liens :

#dashbrd a {

padding-left: 8px;

color: #9f9f9f;

font: 10px Tahoma, Verdana, sans-serif;

text-decoration: none;

background: url(/sitewide/headerfooter/images/icon_dshbrd_off.gif) no-repeat 0 50%;

}

Ici, c'est pareil, je ne comprends pas le codage de l'image du lien que le webmaster donne ici.

Voir cette image de lien ici

a- Alors ici ce que je ne comprends pas c'est que lorsque le lien sur le site ne représente pas uniquement cette image en forme de flèche, mais aussi les mots "Join" "Sign in", ... .Alors pourquoi spécifie t'il uniquement cette image pour le lien alors c'est le texte aussi.

b- quand il met :

padding-left: 8px;

C'est marge intérieur gauche par rapport à quoi ? Car la largeur du header fait 764 px, et concernant les : "# Join

# Sign In # Inbox # Account # Profile # Message Boards # Cart" la première image en forme de petite flèche n'est pas à 8 px du bord gauche des 764 px.

7- Concernant le :

#dashbrd a:hover {

color: #fff;

background-image: url(/sitewide/headerfooter/images/icon_dshbrd_on.gif);

}

Ce que je ne copmrends ici, c'est qu'en passant la souris sur les textes : "# Join

# Sign In # Inbox # Account # Profile # Message Boards # Cart"

, le texte doit normalement disparaitre pour laisser place à l'image du lien qu'il a spécifié dans son code CSS.

C'est çà que je ne comprends pas. Alors qu'ici le texte reste quand même lors du hover.

/* hdr

---------------------------------------------------- */

8-

#hdr {

z-index: 2600;

position: relative;

width: 764px;

margin: 0;

padding: 4px 0 0 0;

font-family: Tahoma, Verdana, sans-serif;

border-bottom: 5px solid #000;

background: #272727 url(/sitewide/headerfooter/images/grad_bg.jpg) repeat-x top left;

}

/* logo

---------------------------------------------------- */

#sitelogo {

position: relative;

margin: 4px 14px 0 14px;

padding: 0;

}

a- Ici, ce que je comprends pas c'est pourquoi, en position relative, il applique un z-index.

b- Pourquoi lorsqu'il met le logo d'MTV sur le background du header, il laisse met le logo en position relative ?

Bref, je pense avoir assez posé de question comme çà.

Désolé, pour toute ces questions. Si vous pouvez répondre à certaines de ces questions, çà serait sympa.

Afin de m'éclairer.

Merci.

++

[Perrine]

Salut Zen,

Avant tout, lorsque tu regardes le code source d'un site, essaie de te baser sur des sites qui sont conformes. Le site que tu indiques contient 137 fautes, et aucun encodage de caractères ni doctype n'est indiqué... Dur dur de se baser là-dessus pour apprendre

Ceci dit, pour ton 2/ :

Le #dashboard, si tu as bien regardé contient les liens tout en haut de la page : Inbox, Account, Profile, etc...

Il place donc la liste à droite (le dernier item est collé à droite) et chaque lien est en float à gauce, c'est ce qui permet à chaque lien de se retrouver les uns à côté des autres.

3/ : oui

4/ : Si tu regardes bien, le background ne s'applique pas à toutes les pages mais uniquement au lien "Join" (d'ailleurs, je ne vois pas l'utilité d'avoir fait ça, il suffisait de mettre un background-color:#000000; ... mais peut-être n'ai-je pas tout vu dans le code)

5/

a : le # signife que c'est un id contrairement au . qui appelle une class

b : tu as bien compris mais je ne comprends pas à quoi sert ce padding. Il faudrait éplucher le code (et encore une fois, je ne compte pas le faire étant donné le nombre important d'erreurs retournées par le validateur)

6/

La flèche qu'il met en background n'est pas faite pour remplacer le texte. Elle est utilisée en tant que puce (la petite flèche à gauche de chaque lien). Quand le lien n'est pas survolé, la flèche est foncée, quand le lien est survolée (a:hover), la flèche devient jaune.

Essaie de trouver des sites qui sont plus faciles à étudier sinon tu risques de t'arracher les cheveux

Tu peux aussi faire des tests en essayant différents codes html/css et regarder ce qui se passe.

Bonne chance

[aymericj]

Bonjour Zen_spirit,

Comme Perrine, quand j'ai vu que tu te lançais dans l'étude de mtv.com, je me suis dit "houlaaaaa".

Je confirme le fait qu'il vaut mieux que tu commences par des sites "simples" et de préférence "valides".

Il y'a un exercice de mise en pratique simple, commenté et efficace que je conseille à toute personne désirant comprendre les histoires de positionnement :

Réalisation d'un designxhtml/css en 5 étapes

C'est un tutoriel du site alsacreations.com

Les explications sont claires, les codes commentés et l'évolution du travail étape par étape permet bien de "comprendre" les css tricks.

Bon courage,

Aymeric

[Zen_Spirit]

Salut tout le monde !

Déjà, je voudrai commencer à dire qu'ici, sur ce forum, j'apprends tous les jours. je l'ai trouvé peu de temps ( ce forum ) et je constate une grande efficacité et une grande compétence de la part de ceux qui aident. De plus la rapidité des réponses est énorme par rapport à d'autres forum. Sincèrement

Aymricj, merci pour ton lien qui est très clair et très intéressant. je m'exerce.

Perrine, merci encore pour ta lumière.

Alors voilà, j'ai suivi des tutos concernant les différents postionnements, (relative et absolue, et j'ai essayé d'utiliser la l'attribut z-index).

Alors, je rencontre quelques petits soucis. End=fin, je voudrai 2 ou 3 peties explications. MErci d'avance !

Alors, voilà, j'ai créé 2 fichiers, un html ( index.html )et l'autre CSS ( exemple1.css ).

Ici le fichier HTML

Ici le fichier CSS

J'ai créé un bloc vert, un bloc jaune et un bloc rouge ( que j'ai rajouter, pour bien apprendre et comprendre ). Alors questions, svp :

1- Pourquoi est ce que le bloc rouge se supperpose sur le bloc jaune et qui lui même se supperpose sur le bloc vert et ceci sans de z-index ?

Alors, j'ai une réponse mais je voudrai confirmation de votre part : C'est parce que ce sont des blocs et non des images, c'est pour celà qu'on n'a pas besoin de z-index, ils se supperposent automatiquement. Est ce la bonne réponse et est-elle complète ma réponse ?

2- Dans ce bloc rouge, il y a 2 images, comme vous pouvez le voir. Ces 2 images viennent se mettre en bas directement.

a-Alors pourquoi, est ce que dans ce boc rouge la dernière ligne du texte est autant séparé ?

b- Donc, les 2 images se mettent en bas directement k'un à la suite de l'autre.

Alors c'est fini pour ces fichiers dans un 1er temps. D'autres questions arrivent, ... . mais je veux déjà qu'on m'éclaire sur çà.

--------------------------------------------------------------------------

Modifié 16 Septembre 2006 par Zen_Spirit

[aymericj]

C'est avec plaisir que je repondrais à tes interrogations Zne_Spirit, mais je n'ai pas accès à tes fichiers.

Il faut être enregistré.

++

Aymeric

[Zen_Spirit]

Salut Aymericj !

Merci pour l'aide que tu proposes, cependant, je suis enregistré moi, et pour les deux fichiers que j'ai joins, clic sur les 2 liens et fait ouvrir avec ton navigateur et après tu peux faire afficher le code source.

Enfin, toi qui est l'expert, je suppose que tu le sais mais qu'il y a un autre soucis pour que tu puisses pas voir mes fichiers.

merci

Modifié 17 Septembre 2006 par Zen_Spirit

[Perrine]

Je confirme : on n'a pas accès à tes fichiers Zen, on est redirigé vers la page de connexion.

Montre nous l'extrait de ton code et les css en utilisant la balise [ code ].

Pour que cela se superpose sans utilisation du z-index, je soupçconne un position:absolute ?

[Zen_Spirit]

Salut Perrine !

1- Alors voilà le fichier HTMl :

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">

<html xmlns=&quot;http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Bienvenue sur mon site !</title>

<meta httpequiv="ContentType" content="text/html; charset=iso88591" />

<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="exemple1.css" />

</head>

<body>

<h1>Un test de positionnement</h1>

<p class="texte1">

Ce test permet de mieux comprendre la propriété position...

</p>

<div class="verte">

<p>

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

Je fais un test afin de comprendre les différents positionnements avec le z-index.

</p>

<p class="jaune">

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

Boîte jaune en position absolue. Boite jaune en position absolue.

</p>

<p class="rouge">

Boîte rouge en position absolue. Mais cette fois j'essaie d'utiliser le z-index.

Aller, 1,2,3 c'est partie !!!

Boîte rouge en position absolue. mais cette fois j'essaie d'utiliser le z-index.

Aller, 1,2,3 c'est partie !!!

Boîte rouge en position absolue. mais cette fois j'essaie d'utiliser le z-index.

Aller, 1,2,3 c'est partie !!!

Boîte rouge en position absolue. mais cette fois j'essaie d'utiliser le z-index.

Aller, 1,2,3 c'est partie !!!

<img src=&quot;http://ambassadofbollywood.free.fr/bollywood_origin/images_bollywood_origin/raie_rouge.jpg" class="raie_rouge" alt="Raie_rouge" title=" Signification de la raie rouge "/>

<img src=&quot;http://ambassadofbollywood.free.fr/bollywood_origin/images_bollywood_origin/khol.jpg" class="khol" alt="khol" title=" Utilité du Khol "/>

</p>

</div>

</body>

</html>

Et voici le fichier HTML :

.verte {

position: relative;

background-color: #00ff00;

width: 400px;

text-align: justify;

}

.jaune {

position: absolute;

top: 15px;

left: 7px;

background-color: #ffff00;

text-align: justify;

}

.rouge {

position: absolute;

height: 500px;

width: 300px;

border: 4px solid #000000;

top: 20px;

left: 40px;

background-color: #9a071f;

text-align: justify;

padding: 10px 10px 10px 10px;

font-family: Georgia, "Arial Black", "Times New Roman", Times, serif;

font-size: 18px;

}

.raie_rouge

{

position: absolute;

z-index: 2;

border: 2px solid #000000;

bottom: 100px;

left: 10px;

background-color: #504f4f;

padding: 5px 5px 5px 5px;

}

.khol {

position: absolute;

z-index: 1;

border: 2px solid #000000;

bottom: 20px;

left: 10px;

background-color: #504f4f;

padding: 5px 5px 5px 5px;

}

2- Sinon, il y a une question qui me tarode depuis un moment et dont je n'arrive pas à trouver la solution, en tout cas, je n'arrive pas à trouver ce qu'il me faut pour pouvoir réaliser çà. j'ai déjà créé un post pour celà, mais je n'ai pas réussi à trouver ce qu'il me faut.

Alors voilà, J'ai une page HTML avec des blocs, des cadres, des div, ...

Alors, je veux faire de façon à ce que lorsque je clic sur lien dans unn cadre ( ou div), des informations apparaissent dans ce cadre (ou div) sans qu'une nouvelle page se charge.

On m'a dit que c'est du javascript. On m'a dit d'analyser le code source de la page et les fichiers CSS. mais c'est pas évident avec toute la masse d'informations qu'il y a.

Sauriez vous ou pourrai-je trouve ce javascript ?

Sinon, y aurait'il un moyen de créer cet effet en HTMl et CSS uniquement.

En fait je veux utiliser cette technique, car sinon, je serai obligé de créer 65 pages html, alors que j'aurai le même "header", "menu", "pied de page". Je veux que c'est juste le contenu du corps qui change.

Voici, le lien de mon post : ICI pour le modèle

Merci