Comment mettre deux titres ou plus sur une même ligne
angel_jeroumi
Messages postés
56
Statut
Membre
-
mr_demonicon Messages postés 921 Statut Membre -
mr_demonicon Messages postés 921 Statut Membre -
salut,
je vais bien mettre trois titres de taille different sur une même ligne avec html 5 et css 3
voici mon code source :
je vais bien mettre trois titres de taille different sur une même ligne avec html 5 et css 3
voici mon code source :
<head>
<title> mon site </title>
<meta charset="utf-8"/>
<style>
body
{
background-color: black;
color: white;
background-image: url("neige3.jpg");
background-repeat: no-repeat;
}
p
{
font-size: 100px;
font-style: italic;
font-weight: bold;
text-decoration: underline;
text-align: center;
color: maroon;
}
.list
{
text-align: left;
}
.propos
{
text-align: right;
}
</style>
</head>
<body>
<div>
<p> Mon site </p>
<h2 class="list"> list </h2>
<h2 class="propos"> à propos </h2>
</div>
</body>
</html>
4 réponses
-
Bonjour,
Par definition un titre ne peux etre que seul sur une ligne il peut y avoir des sous titres mais pas autre chose sinon ton probleme se gere au niveau du type il faut que tu rajoute dans ton cssh1{ display: inline; }et ainsi de suite (exemple:<head> <style> h1,h2,h3{ display: inline; }</style> </head> <h1> hello</h1> <h2> hello</h2> <h3> hello </h3>)
Les titres sont des types block donc un retour a la ligne est obligatoire on les transforme en inline (en ligne, ça porte bien sont nom^^) après il existe le type inline-block qui est un mix entre les deux et je te le laisse le decouvrir.
Pour plus d'info: https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606402-decouvrez-dautres-techniques-de-mise-en-page
Bonne soirée -
-
lorsque j'ai mis
display: inline;
j'ai perdu l'allignement...
comment faire ?-
utilise plutot alors le float
<head>
<title> mon site </title>
<meta charset="utf-8"/>
<style>
body
{
background-color: black;
color: white;
background-image: url("neige3.jpg");
background-repeat: no-repeat;
}
p
{
font-size: 100px;
font-style: italic;
font-weight: bold;
text-decoration: underline;
text-align: center;
color: maroon;
}
.list
{
float:left;
}
.propos
{
float:right;
}
<!--h1,h2 {display:inline-block;}-->
</style>
</head>
<body>
<div>
<p> Mon site </p>
<h2 class="list"> list </h2>
<h3 class="propos"> à propos </h3>
</div>
</body>
</html> -
-
-
-
-
-
