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>
A voir également:
- Mettre sur la même ligne css
- Partager photos en ligne - Guide
- Mètre en ligne - Guide
- Aller à la ligne excel - Guide
- Comment se mettre hors ligne sur instagram - Guide
- Comment se mettre hors ligne sur facebook - Guide
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 css
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
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 css
h1{
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
comment faire ?
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>
<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>
