Positionner la balise <aside>

**btstour** · 23/01/2015, 19h23

Bonjour,
Je suis actuellement entrain de construire un site internet pour le présenter lors de mon examen en BTS Tourisme, cependant je rencontre un problème avec les balises <aside>.
Je voudrai les placer à droite en alignement horizontal avec mes blocs <article> cependant ces dernières se placent en dessous et sont donc cachées par le contenu des balises <article>. J'ai essayé d'utiliser les fonction <div>, float etc et ça ne fonction pas. Je cherche depuis la fin du mois de décembre et j'ai un professeur peu compétent qui ne parvient pas à m'aider...
Pourriez-vous m'aider à résoudre ce problème ?
Je vous en serai très reconnaissante.

Merci.

Mon HTML :

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
<section>
	<article>
		<p>Ce site internet a été conçue afin de pouvoir présenter mes différents travaux lors des épreuves orales du BTS Tourisme mais également pour servir de support et de travail pour l'épreuve orale de la matière intitulée Gestion de l'Information Touristique (GIT)  dont j'ai choisi la spécialité multimédia.</p>
	</article>
	<aside>
		<p>Située dans le département du Calvados en Basse-Normandie, la cité scolaire André Maurois se trouve au centre de la station balnéaire de Deauville.<br> Elle accueil un collège, un lycée et une section BTS Tourisme composée d'une classe de première année et une classe de deuxième année.</p>
	</aside>
</section>
<section>
	<article class="image">
		<figure>
			<img src="images/panneaulycee.jpg" alt="photo panneau lycée"style="margin-right: 7px;"/>
			<figcaption style="width:300px;margin-left:15px;text-align:center;font-size:75%;">Panneau De la cité scolairee André Maurois de Deauville</figcaption>
		</figure>
		<figure>
			<img src="images/logobts.jpg" alt="logo du BTS tourisme du Lycée André Maurois de Deauville"style="margin-right: 7px;"/>
			<figcaption class="logo" style="width:300px;margin-left:15px;text-align:center;font-size:75%;">Logo du BTS Tourisme D'André Maurois</figcaption>
		</figure>
		<figure>
			<img src="images/vueaeriennelycee.jpg" alt="vue aérienne du lycée"/>
			<figcaption style="width:300px;margin-left:15px;text-align:center;font-size:75%;">Vue aérienne du lycée André Maurois </figcaption>
		</figure>
	</article>
	<aside style="margin-left:265px;">
		<figure>
			<img src="images/qrcodesitemaurois.png" alt="QR code lycée maurois" style="width: 140px;"/>
		</figure>
		<figure>
		</figure>
	</aside>
</section>

Mon CSS :

Code css :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
section{
	width:1050px;
	height:226px;
	display:inline-block;
	vertical-align:top;
}
aside{
	width:138px;
	font-family: Indie Flower;
	font-size:100%;
	text-align:center; 
	border-style: solid;
	border-width: 2px;
	border-color:#ABD0FF;
	border-radius:10px;
	margin-right:50px;
	margin-left:20px;
	padding:2px;
	padding-left:5px;
	background-color:#003E8E;
	padding-left:15px;
	padding-right:15px;
	left:250px;	
	color:#ABD0FF; 
	float:right;
}
article{
	font-family: Indie Flower;
	font-size:150%;
	border-style: solid;
	border-width: 2px;
	border-color:#ABD0FF;
	border-radius:10px;
	position:relative;
	background-color:#7CB5FF;
	width:1000px;
	margin-left:15px;
	padding-left:15px;
	padding-right:15px;
	text-align:justify;	
	color:#003E8E; 
}
figure {
    display: inline-block;
	vertical-align:top;
	margin:0px;
}
figure img {
    vertical-align: top;
	margin:0px;
}
figure figcaption {
    text-align: center;
}
.image{
	padding:0px;
}

**Muchos** · 24/01/2015, 08h56

Bonjour,
Je me permets une proposition en modifiant la structure (j'ai beaucoup réduit le code pour l'exemple) :

Code css :

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
article {
  float: left;
  width: 65%;
  margin-right: 1%;
}
section {
  background: #abc;
}
p {
  margin-top: 0;
}
aside {
  float: left;
  width: 33%;
  background: #def;
}

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
33
34
35
36
37
38
39
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Accueil - Mon site</title>
</head>
<body>
<article>
  <section>
    <p>Ce site internet a été conçue afin de pouvoir présenter 
mes différents travaux lors des épreuves orales du BTS Tourisme 
mais également pour servir de support et de travail pour l'épreuve orale 
de la matière intitulée Gestion de l'Information Touristique (GIT) 
dont j'ai choisi la spécialité multimédia.</p>
  </section>
  <section>
    <figure>
      <img src="images/panneaulycee.jpg" alt="" />
      <figcaption >Panneau de la cité scolaire André Maurois de Deauville</figcaption>
    </figure>
    <figure>
      <img src="images/logobts.jpg" alt="" />
      <figcaption class="logo">Logo du BTS Tourisme D'André Maurois</figcaption>
    </figure>
    <figure>
      <img src="images/vueaeriennelycee.jpg" alt=""/>
      <figcaption>Vue aérienne du lycée André Maurois </figcaption>
    </figure>
  </section>
</article>
<aside>
  <p>Située dans le département du Calvados en Basse-Normandie, 
la cité scolaire André Maurois se trouve au centre de la station balnéaire de Deauville.
  <br />Elle accueil un collège, un lycée et une section BTS Tourisme 
composée d'une classe de première année et une classe de deuxième année.</p>
  <a href="http://www.etab.ac-caen.fr/maurois/"><img src="images/qrcodesitemaurois.png" alt="www.etab.ac-caen.fr/maurois" /></a>
</aside>
</body>
</html>

**btstour** · 24/01/2015, 22h11

Bonsoir,
merci pour votre aide j'ai essayé le code que vous m'avez envoyé cependant cela ne marche toujours pas.

J'obtiens ceci :

Nom : capture écran.jpg
Affichages : 8074
Taille : 74,6 Ko

Nom : capture écran.jpg
Affichages : 8074
Taille : 74,6 Ko

Et j'aimerai si possible obtenir quelque chose du genre :

Nom : forum.jpg
Affichages : 8225
Taille : 51,7 Ko

**Muchos** · 25/01/2015, 00h53

Je vous propose de jeter un œil à une démo que j'ai réalisée : Une mise en page responsive sur trois colonnes.
Peut-être que le code source vous mènera vers une solution. Pour ma part, je ne saurais pas travailler avec votre code HTML actuel.

ps: Vous devriez peut-être supprimer la référence à votre prof dans votre premier message

**btstour** · 25/01/2015, 01h09

Quel code HTML auriez-vous besoin pour pouvoir m'aider ?
Je commence vraiment à désespérer d'arriver un jour à avoir se que je veux ='(

Euh non je ne la supprimerai pas ça montre à l'éducation nationale que mettre un prof de math pour faire de l'informatique ce n'est pas judicieux surtout quand ce dernier préfère corriger ses copies que faire semblant de nous aider ><

Fin bref en tout cas merci d'essayer de m'aider

**numew** · 25/01/2015, 12h24

Voici rapidement une structure et css donnant le résultat attendu :

Code css :

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

1
2
3
4
5
6
.col1, .col3{width:20%;display:inline-block;vertical-align: top;padding-top:112px;}
.col2{width:55%;display:inline-block;vertical-align: top;}
#titre{height:100px;}
#titre, nav, aside, article{border:1px solid #000;} 
aside{margin-bottom: 20px;}
article{margin-top:10px;}

Code :

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
33
<body>
    <div class="col1">
        <nav>
            nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav 
            nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav 
            nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav 
        </nav>
    </div>
    <div class="col2">
        <div id="titre">
            titre titre titre titre titre titre titre titre titre titre titre 
            titre titre titre titre titre titre titre titre titre titre titre 
        </div>
        <article>
            article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 
            article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 
        </article>
        <article>
            article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 
            article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 
        </article>
    </div>
    <div class="col3">
        <aside>
            aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 
            aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 aside 1 
        </aside>
        <aside>
            aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2
            aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 aside 2 
        </aside>
    </div>
</body>

**btstour** · 25/01/2015, 16h23

Génial j'ai enfin réussi à avoir se que je voulais merci beaucoup numew =D
Après quelque modification j'arrive au résultat attendu =)

Positionner la balise <aside>

HTML

Discussions similaires

Partager

Partager