18079 sujets

Questions générales et questions de débutants

[Résolu] Disposition des blocs

Bonjour,

Je viens vers vous car j'ai un soucis je n'arrive pas a mettre mes blocs comme je le souhaite, pour exposer mon soucis :
(Je ne sais pas si je peux copier toute la partie du code ici ou si je dois expliquer Smiley ohwell )

J'ai donc 2 sections dont une qui comprend 1 article avec 1 photo et l'autre section 2 articles avec 2 photos.
En plus de ça j'ai un aside qui comprend 2 photos et 2 titres

Mais je n'arrive pas à mettre le aside en colonne sur le coté droit le long des 2 sections. Soit tout se met en ligne, soit tout se met en colonne mais je n'arrive pas a différencier aside des sections et articles.

Quelqu'un aurait une idée ?
Je vous remercie d'avance.
Bonjour,
c'est toujours mieux de copier/coller le code ici. Il est difficile de voir les erreurs avec une simple explication sous forme de texte.
Les personne compétentes pourront t'aider bien plus facilement.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="style.css" />
		<title>FCO - Football Club Oermingen</title>
	</head>

	<body>
		<div id="bloc_page">
			<header>
				<img src="banniere.jpg" alt="Bannière du FCO" />

				<nav>
					<ul>
						<li><a href="FCO.html">Accueil</a></li>
						<li><a href="https://lafa.fff.fr/competitions/?id=363192&poule=1&phase=1&type=ch&tab=calendar">Calendrier</a></li>
						<li><a href="https://lafa.fff.fr/competitions/?id=363192&poule=1&phase=1&type=ch&tab=ranking">Classement</a></li>
						<li><a href="#">Evènements</a></li>
					</ul>
				</nav>
			</header>
								<div id="bord">

			<section>
				<div id="entrainements">
				<article>
					<h1> Les entrainements </h1>

						
							<img src="entrainement.jpg" alt="repas de joueurs" id="training"/>
											
							<p> Les horaires : </br>
								<ul>
									<li> Mardi 19h </li>
									<li> Jeudi 19h Suivis d'un repas </li>
								</ul>

					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>
					Texte pour présenter le club etc... </br>

							</p>
						
				</article>
				</div>
			</section>
			<section>
				<article>
					<h1> Résumé des derniers matchs </h1>
					<div id="equipe_1">
						

						<img src="mini_joueur_1.jpg" alt="joueur de foot" id="match_1"/>
						
						<p> Résumé du match de l'équipe 1 : </br>
						Ici figure le résumé du dernier match de l'équipe 1 du FCO
						Face à une belle équipe dont certain joueurs jouaient en équipe A l'année dernière les poullannais se sont bien battus . Les verts ont tenus une mi temps . Score à la pause 3-1 pour les locaux . A noter le splendide but de Matthieu Diraison ( reprise de volée coté droit et hors de la surface qui finit dans la lucarne ) . Lors de la seconde période les locaux accéléraient le jeu et cela devenait dur pour les poullannais . Score final 10-1 ; Le score est un-peu lourd au vu des efforts fournis . Bon état d'esprit des 14 joueurs présents . </p>
					</div>

					<div id="equipe_2">
						<img src="mini_joueur_2.jpg" alt="joueur de foot" id="match_2"/>

						<p> Résumé du match de l'équipe 2 : </br>
						Ici figure le résumé du dernier match de l'équipe 2 du FCO
						Face à une belle équipe dont certain joueurs jouaient en équipe A l'année dernière les poullannais se sont bien battus . Les verts ont tenus une mi temps . Score à la pause 3-1 pour les locaux . A noter le splendide but de Matthieu Diraison ( reprise de volée coté droit et hors de la surface qui finit dans la lucarne ) . Lors de la seconde période les locaux accéléraient le jeu et cela devenait dur pour les poullannais . Score final 10-1 ; Le score est un-peu lourd au vu des efforts fournis . Bon état d'esprit des 14 joueurs présents  </p>
					</div>
				</article>

			</section>

			<aside>
					<h1>Prochain Match</h1>
					<p id="prochain_match"><img src="prochain_match.png"/></p>
					<h1>Prochains Evènements</h1>
					<p id="image_evenement"><img src="#"/></p>
			</aside>
						</div>
			<footer>
				<div id="facebook">
					<a href="https://www.facebook.com/fcoermingen">Facebook</a>
				</div>

				<div id="photos">
					<p><img src="mini_joueur_1.jpg" alt="joueur de foot"/><img src="mini_joueur_2.jpg" alt="joueur de foot" />  </p>
				</div>

				<div id="contact">
					<p> Président : </br> 
					BRASSEL Frederic 0601020304 </p>
				</div>
			</footer>
		</div>
	</body>
</html> 


/* Polices personnalisées */


@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Elements principaux */ 

body
{
	background: url('gazon_fond.jpg') ;
	font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

#bloc_page
{
	width: 900px;
	margin: auto;
}

section h1, footer, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Header */

header 
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-center;
}


/* Nav */ 

nav ul
{
	background-color: red;
	list-style-type: none;
	display: flex;
	justify-content: space-around;

}

nav a 
{
	color: black;
	font-weight: bold;
	padding-bottom: 3px;
	text-decoration: none;
}

nav a:hover
{
    color: blue;
    border-bottom: 3px solid blue;
}

/* Corp */

section
{
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

aside
{
	display: flex;

	background-color: grey;
	text-align: justify;
	flex-direction: column;
}
#bord
{
	display: flex;
	flex-direction: row;
}

article
{
	display: flex;
	flex-direction: column;
	text-align: justify;
	background-color: white;
}

#entrainements
{
	margin-right: 20px;
	flex: 3;
	background-color: white;
	padding: 12px;
}
#training 
{
	float: left;
	margin: 12px;
}

#equipe_1
{
	margin-right: 20px;
	flex: 3;
	background-color: white;
	padding: 12px;

}
#equipe_2
{
	margin-right: 20px;
	flex: 3;
	background-color: white;
	padding: 12px;

}
#match_1
{
	float: left;
	margin: 12px;
}

#match_2
{
	float: right;
	margin: 12px;
}




/* Pied */

footer
{
	display: flex;
	background-color: grey;
}
Modérateur
et si tu n'utilise qu'un seul section ?
<div id="bloc_page">
  <header>
    <img src="banniere.jpg" alt="Bannière du FCO" />

    <nav>
      <ul>
        <li><a href="FCO.html">Accueil</a></li>
        <li><a href="https://lafa.fff.fr/competitions/?id=363192&poule=1&phase=1&type=ch&tab=calendar">Calendrier</a></li>
        <li><a href="https://lafa.fff.fr/competitions/?id=363192&poule=1&phase=1&type=ch&tab=ranking">Classement</a></li>
        <li><a href="#">Evènements</a></li>
      </ul>
    </nav>
  </header>
  <div id="bord">

    <section>
      <div id="entrainements">
        <article>
          <h1> Les entrainements </h1>

          <img src="entrainement.jpg" alt="repas de joueurs" id="training" />

          <p> Les horaires : </br>
            <ul>
              <li> Mardi 19h </li>
              <li> Jeudi 19h Suivis d'un repas </li>
            </ul>

            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>
            Texte pour présenter le club etc... </br>

          </p>

        </article>
      </div>
    

      <article>
        <h1> Résumé des derniers matchs </h1>
        <div id="equipe_1">

          <img src="mini_joueur_1.jpg" alt="joueur de foot" id="match_1" />

          <p> Résumé du match de l'équipe 1 : </br>
            Ici figure le résumé du dernier match de l'équipe 1 du FCO Face à une belle équipe dont certain joueurs jouaient en équipe A l'année dernière les poullannais se sont bien battus . Les verts ont tenus une mi temps . Score à la pause 3-1 pour les locaux
            . A noter le splendide but de Matthieu Diraison ( reprise de volée coté droit et hors de la surface qui finit dans la lucarne ) . Lors de la seconde période les locaux accéléraient le jeu et cela devenait dur pour les poullannais . Score final
            10-1 ; Le score est un-peu lourd au vu des efforts fournis . Bon état d'esprit des 14 joueurs présents . </p>
        </div>

        <div id="equipe_2">
          <img src="mini_joueur_2.jpg" alt="joueur de foot" id="match_2" />

          <p> Résumé du match de l'équipe 2 : </br>
            Ici figure le résumé du dernier match de l'équipe 2 du FCO Face à une belle équipe dont certain joueurs jouaient en équipe A l'année dernière les poullannais se sont bien battus . Les verts ont tenus une mi temps . Score à la pause 3-1 pour les locaux
            . A noter le splendide but de Matthieu Diraison ( reprise de volée coté droit et hors de la surface qui finit dans la lucarne ) . Lors de la seconde période les locaux accéléraient le jeu et cela devenait dur pour les poullannais . Score final
            10-1 ; Le score est un-peu lourd au vu des efforts fournis . Bon état d'esprit des 14 joueurs présents </p>
        </div>
      </article>

    </section>

    <aside>
      <h1>Prochain Match</h1>
      <p id="prochain_match"><img src="prochain_match.png" /></p>
      <h1>Prochains Evènements</h1>
      <p id="image_evenement"><img src="#" /></p>
    </aside>
  </div>
  <footer>
    <div id="facebook">
      <a href="https://www.facebook.com/fcoermingen">Facebook</a>
    </div>

    <div id="photos">
      <p><img src="mini_joueur_1.jpg" alt="joueur de foot" /><img src="mini_joueur_2.jpg" alt="joueur de foot" /> </p>
    </div>

    <div id="contact">
      <p> Président : </br>
        BRASSEL Frederic 0601020304 </p>
    </div>
  </footer>
</div>
Meilleure solution
Super merci, je n'y avais pas pensé !
Merci beaucoup.
Modifié par Gunry (04 Oct 2019 - 12:12)
Sujet clos
Aller à