79 votes

Six Quads avatar

Image du logo et titre H1 sur la même ligne

Demandé el 28 de Juillet, 2012
Quand la question a-t-elle été
605961 affichage
Nombre de visites la question a
3 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je souhaite créer ma première page web mais je rencontre un problème.

J'ai le code suivant :

<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>

J'aimerais savoir comment faire pour que le logo et le H1 soient sur la même ligne. Merci de votre réponse.

Demandé el 28 de Juillet, 2012 par Six Quads

Réponses

Trop de publicités?

0voto

Saqib Omer avatar
Saqib Omer Points 3339

Vérifier ceci.

 .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.
}
Répondu el 2 de Juillet, 2014 par Saqib Omer (3339 Points )

0voto

satya pati avatar
satya pati Points 1 
<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>
Répondu el 20 de Juin, 2018 par satya pati (1 Points )

0voto

Richa Mehta avatar
Richa Mehta Points 1

Les étapes :

  1. Entourez les deux éléments d'une div conteneur.
  2. Ajouter overflow:auto à la div du conteneur.
  3. Ajouter float:left au premier élément.
  4. Ajouter position:relative; top: 0.2em; left: 24em au deuxième élément (les valeurs du haut et de la gauche peuvent varier selon les cas).
Répondu el 25 de Juin, 2019 par Richa Mehta (1 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X