28112 sujets

CSS et mise en forme, CSS3

[Résolu] Placer un bloc aside avec inline-block

Salut tout le monde, il me faut déplacer un bloc aside sur la droite de la page aligné avec le texte mais le bloc se met automatiquement en dessous du texte. Je trouve pas ce qu'il faut faire, merci de votre aide !

<section>
	<article>
		<h1><img src="../images/ico_epingle.png"> Je suis un grand gourmand</h1>
		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>
		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>
		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>
		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>
		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>	
	</arcticle>

 	<aside>
 		<h1>A propos de l'auteur</h1>
 		<img src="../images/bulle.png" alt="bulle" id="bulle">
 		<img src="../images/pastor.png" alt="pastor" id="pastor">
 		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>
 		<img src="../images/facebook.png" style="margin: 5px"/><img src="../images/twitter.png" style="margin: 5px"/><img src="../images/vimeo.png" style="margin: 5px"/><img src="../images/flickr.png" style="margin: 5px"/><img src="../images/rss.png" style="margin: 5px">


/* Le corps (<section>) */

article, aside {
	display: inline-block;
	vertical-align: top;
	text-align: justify;
}

article {
	width: 60%;
	margin: 15px;
}

aside {
	position: relative;
	width: 30%;
	background-color: #706b64;
	border-radius: 5px;
	padding : 10px;
	font-size: 0.9em;
	color: #FFFFFF;
	box-shadow: 4px 4px 5px #1c1a19;
}

article p {
	font-size: 0.8em;
}

#bulle {
	position: absolute;
	top: 100px;
	left: -12px;
}
Modérateur
Bonjour,

Ça semble fonctionner, mais dans ton html, ta balise fermante </article> contient une faute de typo (tu as mis </arcticle>).

C'est peut-être ça qui empêche ton code réel de fonctionner (s'il contient la même faute).

Amicalement,
parsimonhi a écrit :
Bonjour,

Ça semble fonctionner, mais dans ton html, ta balise fermante &lt;/article&gt; contient une faute de typo (tu as mis &lt;/arcticle&gt;).

C'est peut-être ça qui empêche ton code réel de fonctionner (s'il contient la même faute).

Amicalement,


Merci de votre réponse ! J'ai corrigé mais je ne trouve toujours pas la solution
J'ai un texte sur le côté gauche de l'écran et j'aimerai rajouter le cadre aside à la suite du texte sur la droite où il y a un grand espace.
Or le aside s'affiche automatiquement en dessous du texte.
Je n'arrive pas à charger de photo sur le site pour que vous puissiez comprendre, j'espère avoir été assez clair.

Bien à vous
J'ai essayé en rajoutant float : right; au niveu du aside { sur le code, le cadre se met à droite de la page mais toujours en dessous du texte et non sur la même ligne
Modérateur
Bonjour,

Si je prends le code que tu as posté, et si je remplace </arcticle > par </article>, j'obtiens le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Test">
<title>Test</title>
<style>
article, aside {
	display: inline-block;
	vertical-align: top;
	text-align: justify;
}

article {
	width: 60%;
	margin: 15px;
}

aside {
	position: relative;
	width: 30%;
	background-color: #706b64;
	border-radius: 5px;
	padding : 10px;
	font-size: 0.9em;
	color: #FFFFFF;
	box-shadow: 4px 4px 5px #1c1a19;
}

article p {
	font-size: 0.8em;
}

#bulle {
	position: absolute;
	top: 100px;
	left: -12px;
}
</style>
<script>
</script>
</head>
<body>
<section>
	<article>
		<h1><img src="../images/ico_epingle.png"> Je suis un grand gourmand</h1>
		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>
		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>
		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>
		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>
		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>	
	</article>

 	<aside>
 		<h1>A propos de l'auteur</h1>
 		<img src="../images/bulle.png" alt="bulle" id="bulle">
 		<img src="../images/pastor.png" alt="pastor" id="pastor">
 		<p>Blablabla... Blablabla... Blablabla... Blablabla...</p>
 		<img src="../images/facebook.png" style="margin: 5px"/><img src="../images/twitter.png" style="margin: 5px"/><img src="../images/vimeo.png" style="margin: 5px"/><img src="../images/flickr.png" style="margin: 5px"/><img src="../images/rss.png" style="margin: 5px">
	</aside>
</section>
</body>
</html>

Le résultat n'est certes pas beau, mais <aside> est bien à droite de <article>.

EDIT: après, il se peut que les images perturbent l'affichage.

Amicalement,
Modifié par parsimonhi (12 Mar 2021 - 23:37)
Meilleure solution
parsimonhi a écrit :
Bonjour,

Si je prends le code que tu as posté, et si je remplace &lt;/arcticle &gt; par &lt;/article&gt;, j'obtiens le code suivant :
&lt;!DOCTYPE html&gt;
&lt;html lang="fr"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
&lt;meta name="description" content="Test"&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;style&gt;
article, aside {
	display: inline-block;
	vertical-align: top;
	text-align: justify;
}

article {
	width: 60%;
	margin: 15px;
}

aside {
	position: relative;
	width: 30%;
	background-color: #706b64;
	border-radius: 5px;
	padding : 10px;
	font-size: 0.9em;
	color: #FFFFFF;
	box-shadow: 4px 4px 5px #1c1a19;
}

article p {
	font-size: 0.8em;
}

#bulle {
	position: absolute;
	top: 100px;
	left: -12px;
}
&lt;/style&gt;
&lt;script&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;section&gt;
	&lt;article&gt;
		&lt;h1&gt;&lt;img src="../images/ico_epingle.png"&gt; Je suis un grand gourmand&lt;/h1&gt;
		&lt;p&gt;Blablabla... Blablabla... Blablabla... Blablabla...&lt;/p&gt;
		&lt;p&gt;Blablabla... Blablabla... Blablabla... Blablabla...&lt;/p&gt;
		&lt;p&gt;Blablabla... Blablabla... Blablabla... Blablabla...&lt;/p&gt;
		&lt;p&gt;Blablabla... Blablabla... Blablabla... Blablabla...&lt;/p&gt;
		&lt;p&gt;Blablabla... Blablabla... Blablabla... Blablabla...&lt;/p&gt;	
	&lt;/article&gt;

 	&lt;aside&gt;
 		&lt;h1&gt;A propos de l'auteur&lt;/h1&gt;
 		&lt;img src="../images/bulle.png" alt="bulle" id="bulle"&gt;
 		&lt;img src="../images/pastor.png" alt="pastor" id="pastor"&gt;
 		&lt;p&gt;Blablabla... Blablabla... Blablabla... Blablabla...&lt;/p&gt;
 		&lt;img src="../images/facebook.png" style="margin: 5px"/&gt;&lt;img src="../images/twitter.png" style="margin: 5px"/&gt;&lt;img src="../images/vimeo.png" style="margin: 5px"/&gt;&lt;img src="../images/flickr.png" style="margin: 5px"/&gt;&lt;img src="../images/rss.png" style="margin: 5px"&gt;
	&lt;/aside&gt;
&lt;/section&gt;
&lt;/body&gt;
&lt;/html&gt;

Le résultat n'est certes pas beau, mais &lt;aside&gt; est bien à droite de &lt;article&gt;.

Amicalement,


Miiiiiiiillllleeeee merci, c'est une erreur bête sachant que j'avais mis <article> au tout départ, j'ai hésité entre les deux balises et je suis pas revenu dessus en pensant que le problème était ailleurs.
Encore merci !
Modérateur
Bonjour,

doogie a écrit :
et pourquoi le résultat n'est pas beau ? Il y a quelque chose de génant ?


Sans les images, ce n'est pas beau (mais c'est normal). Ta version avec les images est sans doute très bien.

Amicalement,
parsimonhi a écrit :
Bonjour,



Sans les images, ce n'est pas beau (mais c'est normal). Ta version avec les images est sans doute très bien.

Amicalement,


Ah oui bien sûr, encore merci
Sujet clos
Aller à