Problème dimensions background de balise aside

Bonjour à tous,

Voilà je débute en html et css et je bute depuis un moment sur un problème.
Voici la maquette que je suis entrain de créer (j'ai mis des border autour de blocs pour mieux les différencier):


Je ne parviens pas à redimensionner le background gris que j'ai mis dans ma balise <aside> (la zone "A Propos se l'Auteur"). J'aimerai que le background s'arrête juste en dessous des logos twitter, facebook.... et juste au dessus du texte "à propos de l'auteur". Tout en maintenant son contenu à ce niveau sur la page.

J'ai essayé avec padding et sur les côtés je peux me rapprocher ou m'éloigner du texte mais sur le haut et bas impossible de me rapprocher du contenu.
Le bas reste carrément fixé comme sur l'image plus haut c'est à dire juste au dessus du texte "Mes Amis".
La propriété background-size n'a aucun effet non plus...

Voici le code html (raccourcis) des deux blocs encadré en vert sur l'image que j'ai posté plus haut. La balise article "Je suis un grand voyageur" et la balise aside "à propos de l'auteur", ainsi que le code css correspondant :

<section id="page-content">
			 		<article id="article-page-content">
			 			<h2><img src="images/ico_epingle.png" alt="pin-icon">JE SUIS UN GRAND VOYAGEUR</h2>
			 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, 
dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.</p>
....................................................................................</p>
					</article>	 		
						 <aside>
					 		<img src="images/bulle.png" alt="bubble-arrow" id="arrow">
			 				<h3>A PROPOS DE L'AUTEUR</h3>
			 				<figure><img src="images/zozor_classe.png" alt="photo de zozor_classe" id="zozor_photo"></figure>
			 				<p>Laisse moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p>
			 				<p>Bien maigre n'est-ce pas? C'est pourquoi aujourd'hui, j'ai décidé d'écrire ma biographie (ou zBiographie, comme vous voulez !) afin que les zéros sachent enfin qui je suis réellement.</p>
			 				<div class="img-social-network"><img src="images/facebook.png" alt="facebook-link" /><img src="images/twitter.png" alt="twitter-link" /><img src="images/vimeo.png" alt="vimeo-link" /><img src="images/flickr.png" alt="flickr-link" /><img src="images/rss.png" alt="rss-link" />
			 				</div>
			 			</aside>
			 	</section>

ET LE CSS :

section#page-content
{	border: 5px black solid;
	display: flex;
	margin-top: 15px;
	margin-bottom: 0px;
}

article#article-page-content 
{	
	border : 2px green solid;
	text-align: justify;
	margin-right: 20px;
}

#article-page-content h2
{
	display: flex;
	align-items: center;
}

#article-page-content img
{	
	margin-right: 5px;
}

[b]aside
{	
	border: 2px green solid;
	position: relative;
	background: #706b64;
	text-align: justify;
	color: white;
	font-size: 0.9em;
	padding : 20px 5px 0px 5px;
}[/b]

aside h3
{
	text-align: center;
}

#arrow
{
	position : absolute;
	top: 150px;
	left: -12px;
}

#zozor_photo
{
	text-align: center;
	border: 1px black solid;
}

.img-social-network img
{
	text-align: center;
	margin-right: 2px;
}

Voilà désolé pour la longueur de ce message mais j'ai du mal à faire plus court pour tout expliquer.
Merci de votre aide et courage au débutant comme moi...

Les [ b ] et [ /b ] autour de la propriété aside dans le css ont été rajouté par moi en postant le message car je voulais mettre cette partie du code en gras pour vous faciliter la lecture!
Modifié par seo-pierrick (19 Jan 2019 - 22:53)

salut
c'est tout a fais logique, car t'affecte le background pour le "aside" , c'est pour ça il prends toute la surface , ce qu'il fallait faire, c'est de mettre ton contenu dans div avec classe par exemple toto , et au niveau de css tu mets :
.toto{
background: #706b64;
}

et tu change celui de aside avec ce que tu veux !

seo-pierrick a écrit :


Merci AffaireLance! C'est bien ça en effet maintenant ça marche :
upload/1547977533-74083-mini.jpg

Je n'avais pas tenté car étrangement dans le cours que je suis, l'auteur n'en parle pas et affiche des capture écran avec son background placé sur la balise aside. Mais je pense que cela induit en erreur et qu'il est fort probable qu'il est fait comme tu me l'a indiqué et que les captures écran de sont code ne sont pas à jour sur le code final...
Bref, merci de ton astuce, mais j'en profite pour deux questions supplémentaires

Pourquoi selon toi, quand mon background était placé sur la balise aside, je pouvais jouer sur les côtés mais pas sur le haut et le bas? Contrairement à maintenant où je peux jouer sur les côté, le haut et le bas.

Et enfin, j'ai tenté visuellement d'aligner sur une même ligne les deux titres "Je suis un grand voyageur" et "A propos de l'auteur". Y aurait-il une astuce plus cadrée (conventionnelle) pour les placer précisément sur une même ligne? (Sachant que pour rappelle l'un est dans un &lt;article&gt; et l'autre dans &lt;aside&gt;.)

Merci bonne journée

Je n'avais pas tenté vehicle étrangement dans le cours que je suis, l'auteur n'en parle pas et affiche des catch écran avec child foundation placé sur la balise aside. Mais je pense que cela induit en erreur et qu'il est stronghold plausible qu'il est fait comme tu me l'a indiqué et que les catches écran de sont code ne sont pas à jour sur le code last...
Modifié par Rodolphe (11 Oct 2019 - 17:51)