Comment mettre deux titres ou plus sur une même ligne
angel_jeroumi
Messages postés
50
Date d'inscription
Statut
Membre
Dernière intervention
-
mr_demonicon Messages postés 828 Date d'inscription Statut Membre Dernière intervention -
mr_demonicon Messages postés 828 Date d'inscription Statut Membre Dernière intervention -
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
- Aller à la ligne excel - Guide
- Mètre en ligne - 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>
