Discussion :

[L'aigle de Carthage]

Bonjour à toutes et à tous,

J'ai le bout de code HTML suivant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

[L'aigle de Carthage]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[L'aigle de Carthage]

DSL, mais est ce que l'attribut position influe dans cette histoire?

[Muchos]

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

[L'aigle de Carthage]

Bsr,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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