Image du Logo et titre H1 sur la même ligne
je veux créer ma première page Web mais j'ai rencontré un problème.
j'ai le code suivant:
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
je veux savoir comment faire le logo et le H1 pour être dans la même ligne. Merci!
10 réponses
à titre d'exemple ( DEMO):
HTML:
<div class="header">
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
</div>
CSS:
.header img {
float: left;
width: 100px;
height: 100px;
background: #555;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
essaye ceci:
- mettez les deux éléments dans un conteneur DIV.
- Donner que le conteneur à la propriété overflow:auto
- faire flotter les deux éléments vers la gauche en utilisant float: left
- donnez au H1 une largeur pour qu'il ne prenne pas toute la largeur de son conteneur parent.
Si votre image fait partie du logo, pourquoi ne pas faire ceci:
<h1><img src="img/logo.png" alt="logo" /> My website name</h1>
utilisez CSS pour mieux le style.
Et c'est aussi des bonnes pratiques pour faire de votre logo, un lien hypertexte, l'utilisateur vers la page d'accueil.
donc vous pouvez faire:
<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>
essaye ceci:
<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
il suffit de coller la balise img à l'intérieur de la balise h1 comme partie du contenu.
vous pouvez le faire comme Billy Moat vous a dit, enveloppez votre <img> et <h1> dans un <div> et utiliser float: left; flotter votre image vers la gauche <div> width et que line-height pour votre h1 et utiliser <div style="clear: float;"></div> pour nettoyer vos éléments flottants.
dans votre fichier css n' img { float: left; } et h1 {float: left; }
Cochez cette.
.header{width:100%;
}
.header img{ width: 20%; //or whatever width you like to have
}
.header h1{
display:inline; //It will take rest of space which left by logo.
}
j'utiliserais bootstrap et définirais le html comme:
<div class="row">
<div class="col-md-4">
<img src="img/logo.png" alt="logo" />
</div>
<div class="col-md-8">
<h1>My website name</h1>
</div>
</div>
<head>
<style>
header{
color: #f4f4f4;
background-image: url("header-background.jpeg");
}
header img{
float: left;
display: inline-block;
}
header h1{
font-size: 40px;
color: #f4f4f4;
display: inline-block;
position: relative;
padding: 20px 20px 0 0;
display: inline-block;
}
</style></head>
<header>
<a href="index.html">
<img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
<a href="index.html">
<h1><span> Technocrat</span> Blog</h1></a>
</div></header>