Mettre des sous titres horizontales

21 février 2017 à 18:29:27

Bonjour/Bonsoir,

Je fais actuellement une activité et j'ai besoins de faire un CV le problème c'est que j'arrive pas à mettre les sous titres au centre espacé avec les ul/paragraphe en dessous, j'ai essayer plusieurs commande, j'ai changer l'HTML j'ai mit tous les sous titres les uns en dessous des autres en espérant que ça marche mais maintenant il ne bouge plus Y_Y je vous met le code en ci-dessous

HTML

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Mon CV</title>
		<link rel="stylesheet" href="style.css"/>
		<link rel="stylesheet" href="fonts/3dumb_regular_macroman/stylesheet.css" type="text/css"	/>
	</head>

	<body>
		
		<img id="lisere" src="img/lisere.png" alt="liséré gauche" />
		<header>
		<h1></h1>
		<p></p>
		</header>
		<figure>
		<a id="Image" href="img/Anonyme.png"> <img src="img/anonyme_miniature.png" alt="Photo d'une personne"/> </a>
		</figure>
		<div id="container">
		<h2>Mon expérience</h2> 
		<h2>Mes compétence</h2> 
	 <h2>Ma formation</h2>
		
		
		</div>

			
		<div id="main">
		
		<footer>
		<ul>
			 <li>De 2013 à 2017 : Élève au collège</li>
			 <li>Février 2017 : Obtention d'un certificat <a href="http://openclassrooms.com">Openclassrooms</a></li>
		</footer>
		</ul>
		
		<ul>
			<li>Apprentissage de l'HTML5</li>
			<li>Un certificat "Comprendre le web" sur <a href="http://openclassrooms.com">Openclassrooms</a></li>
			
		</ul>
		
				<p> J'apprends actuellement le codage sur <a href="http://openclassrooms.com">Openclassrooms</a> en espérant atteindre un bon niveau plus tard !</p>
		</div>
	</body>
</html>

Code CSS3

h2
{
	color: #BA7F00;
	font-size: 1.8em;
}
h1
{
	text-align: center;
	border:3px black solid;
	box-shadow: 3px 3px 3px black;
}
h1 + p

{
	text-align: center;
}
figure
{
	text-align: right;
}
p,ul,h1,h2
{
	font-family: '3dumbregular', Arial , sans-sherif;

}
body
{
	background-image: url(img/Background.png);

	
}
ul,p
{
	color: black;
	font-size:1.3em;
}



#main

{
	display: flex;
	width: 80%;
	
	



}



p , ul

{
	display: flex;
	flex-direction: column;
		

}

#lisere

{


	float: left;
	background: url(img/lisere.png) no-repeat;
	width: 10%;

	

}
.container

{
	
	display: flex;
	text-orientation: upright;
	


}

footer

{

	display: flex;



}

Merci de votre aide d'avance si vous avez des liens pour mieux comprendre les balises et trouvé des choses comme cela pour apprendre ça m'aderais énormement

PS: ceci est mon deuxième poste sur le forum si j'ai oublié des choses n'hésitez pas a demander

-
Edité par Manissar 17 février 2020 à 1:18:55

Anonyme

21 février 2017 à 19:44:45

Déjà, ton indentation est nulle, je ne sais pas si c'est parce que le parser d'OC a niqué ton code ou si c'est comme ça dans tes sources HTML mais c'est illisible.

Ensuite, tu as un chevauchement lignes 31 à 36 :

<footer>
<ul>
   <li>De 2013 à 2017 : Élève au collège</li>
   <li>Février 2017 : Obtention d'un certificat <a href="http://openclassrooms.com">Openclassrooms</a></li>
</footer>
</ul>

Pour résoudre ton problème principal, je te conseille d'organiser ton HTML autrement :

<div id="main">

    <div class="container">
        <h2>Mon expérience</h2>
        <ul>
            ...
        </ul>
    </div>

    <div class="container">
        <h2>Mes compétence</h2>
        <ul>
            ...
        </ul>
    </div>

    <div class="container">
        <h2>Ma formation</h2>
        <p>
            ...
        </p>
    </div>

</div>

Plutôt que d'avoir des titres d'un côté et le contenu de l'autre, tu les regroupes et tu modifie ton CSS en conséquence.

Bonne soirée.

-
Edité par Anonyme 21 février 2017 à 19:45:50

Manissar

21 février 2017 à 20:11:32

Merci de ta réponse plutôt rapide je verrais tout ça demain et je te dirais :D, je pense refaire tout le code HTML car je l'ai fait au tout début de mon apprentissage à l'HTML (2 jours après) et la ça fait + ou - une semaine que j'ai commencé du coup je vais refaire le code HTML et je vais essayer de l'organiser merci de ta réponse et bonne soirée à toi