Question à propos l'attribut position

Version imprimable

Bonjour à toutes et à tous,

J'ai le bout de code HTML suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <section> <header> <h1>Formation</h1> </header> <h3>Stages</h3> Description <h3>Congres</h3> Description <aside> <h6>Remarques</h6> Description </aside> <aside> <h6>Remarques</h6> Description </aside> </section>
et dans le fichier CSS
Code:

1 2 3 4 5 aside{ position:absolute; right:50px; top:20px; }
Le problème c'est qu'une seule balise <aside> s'affiche alors que je voudrais bien avoir les 2 (l'une au dessus de l'autre).

Merci dés l'avance.

09/09/2013, 17h38
Torgar

C'est normal ton CSS veut dire :

"Tu mets tous les éléments "aside" en position relative que tu places à telles coordonnées". Donc fatalement elles se chevauchent.

Le plus simple c'est de coller une classe ou un identifiant que tu personnalises par le CSS.

Sinon tu peux jouer avec les pseudoclasses.

Merci pour la réponse, mais pourquoi le code HTML suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<section>
	<header>
		<h1>Formation</h1>
	</header>
    <h3>Stages</h3>  
    Description
    <h3>Congres</h3>
    Description
    <aside>
    	<h6>Remarques</h6>
		Description
    </aside>
	<aside>
    	<h6>Remarques</h6>
		Description
	</aside>
</section>
 
<section>
<header>
<h1>Loisirs</h1>
</header>
<h3>Loisir1</h3>
Football
 
<h3>Loisir2</h3>
Musique
 
<h3>Loisir3</h3>
Films
 
</section>

fonctionne avec ce fichier css:

Code:

1
2
3
4
section{
	position:relative;
	top:250px;	
}

C'est à dire que les 2 blocs <section> se succèdent, alors que les deux ont la propriété "relative"?

09/09/2013, 18h14
L'aigle de Carthage

DSL, mais est ce que l'attribut position influe dans cette histoire? :roll:
09/09/2013, 21h15
Muchos

@L'aigle de Carthage: Peut-être n'avez-vous pas bien compris le sens des valeurs de la propriété POSITION?

Bsr,

J'ai essayé de procéder comme ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <section id="base"> <header> <h1>Formation</h1> </header> <h3>Stages</h3> Description <h3>Congres</h3> Description <aside> <h6>Remarques</h6> Description </aside> <aside> <h6>Remarques</h6> Description </aside> </section> <section> <header> <h1>Loisirs</h1> </header> <h3>Loisir1</h3> Football <h3>Loisir2</h3> Musique <h3>Loisir3</h3> Films </section>
avec le fichier CSS suivant:
Code:

1 2 3 4 5 6 7 8 9 10 aside{ position:absolute; right:20px; top:40px; } .base aside:nth-child(2){ position:absolute; right:40px; top:90px; }
mais ça n'a pas marché :calim2:

Comment pourrais-je avoir les deux balises <aside> à droite avec l'une est au dessus de l'autre?

J'ai enlevé l'id et le pseudoclasse et j'ai fait comme suit:
Code:

1 2 3 4 5 6 7 8 9 section{ position:relative; top:250px; } aside{ position:relative; left:90%; bottom:180px; }
ça marchait mais j'aimerais avoir vos critiques sur la solution!

merci :ccool:

10/09/2013, 20h20
NoSmoking

Bonjour,
à lire à tout prix http://torgar.developpez.com/glossai...e=page_6#LVI-B