IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Aligner image et texte


Sujet :

Positionnement en CSS

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    septembre 2021
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : septembre 2021
    Messages : 3
    Points : 2
    Points
    2
    Par défaut Aligner image et texte
    Bonjour,

    Je suis débutant en css. J'utilise Hugo pour générer un blog et j'utilise un thème déjà fait.

    Mais je souhaite ajouter une petite image/icône à la suite du titre de mon blog et je n'arrive pas à l'aligner.

    Nom : screenshot_2021-09-20-23:16:05.png
Affichages : 82
Taille : 14,3 Ko

    Je souhaite donc mettre ce petit béret sur la même ligne que "Mon blog"

    Actuellement voilà ce que j'ai :

    Dans le head.html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <div class="header">
    	<base href="{{ .Site.BaseURL }}">
    	<h1 class="site-title">
    <img src="{{ "icons/icon.png" | absURL }}" width="40" height="40" ><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
    	<div class="site-description">
    		{{- if isset .Site.Params "subtitle" -}}
    		<h2>{{ .Site.Params.Subtitle | markdownify }}</h2>
    		{{- end -}}
    		<nav class="nav social">
    			<ul class="flat">
    				{{- range $index, $key := .Site.Params.Social -}}
    				<a href="{{ $key.url }}" title="{{ $key.name }}"><i data-feather="{{ $key.icon }}"></i></a>
    				{{- end -}}
    			</ul>
    		</nav>
    	</div>
     
    	<nav class="nav">
    		<ul class="flat">
    			{{ range .Site.Menus.main }}
    			<li>
    				<a href="{{ .URL }}">{{ .Name }}</a>
    			</li>
    			{{ end }}
    		</ul>
    	</nav>
    </div>

    img src="{{ "icons/icon.png" | absURL }}" width="40" height="40" > , ci-dessus, appelle l'image du béret.

    Dans mon main.css j'ai cette partie qui doit correspondre je pense :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .site-title a {
    	color: #000000;
    	text-decoration: none !important;
    }
    Comment puis-je faire ? Merci des conseils ou des pistes me permettant d'y arriver.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 442
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 442
    Points : 13 082
    Points
    13 082
    Par défaut
    montrez nous le code html généré.

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    septembre 2021
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : septembre 2021
    Messages : 3
    Points : 2
    Points
    2
    Par défaut Voici la page index.html générée
    Bonjour,

    Voici la page index.html générée :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Posts - Mon blog</title><link rel="icon" type="image/png" href=icons/icon.png /><meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="alternate" type="application/rss+xml" href="https://xxxx.org/blog/posts/index.xml" title="Mon blog" />
    	<meta property="og:title" content="Posts" />
    <meta property="og:description" content="" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://xxxxx.org/blog/posts/" />
     
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:title" content="Posts"/>
    <meta name="twitter:description" content=""/>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic|Raleway:200,300" rel="stylesheet">
     
    	<link rel="stylesheet" type="text/css" media="screen" href="https://xxxxx.org/blog/css/normalize.css" />
    	<link rel="stylesheet" type="text/css" media="screen" href="https://xxxxx.org/blog/css/main.css" />
    	<link rel="stylesheet" type="text/css" href="https://xxxxx.org/blog/css/custom.css" />
     
     
     
    	<script src="https://xxxxx.org/blog/js/main.js"></script>
    	<script src="https://xxxxx.org/blog/js/abc.js"></script>
    	<script src="https://xxxxx.org/blog/js/xyz.js"></script>
    	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    </head>
     
     
    <body>
    	<div class="container wrapper list">
    		<div class="header">
    	<base href="https://xxxxx.org/blog/">
    	<h1 class="site-title">
    <img src="https://xxxxxorg/blog/icons/icon.png" width="40" height="40" ><a href="https://xxxxx.org/blog/">Mon blog</a></h1>
    	<div class="site-description"><h2>Choses vues, entendues, faites et à faire!</h2><nav class="nav social">
    			<ul class="flat"></ul>
    		</nav>
    	</div>
     
    	<nav class="nav">
    		<ul class="flat">
     
    			<li>
    				<a href="/blog/">Accueil</a>
    			</li>
     
    			<li>
    				<a href="/blog/posts">Billets</a>
    			</li>
     
    			<li>
    				<a href="https://xxxxx.org/gallerie">Photos</a>
    			</li>
     
    			<li>
    				<a href="/blog/tags">Tags</a>
    			</li>
     
    			<li>
    				<a href="/blog/about">À propos</a>
    			</li>
     
    		</ul>
    	</nav>
    </div>
     
     
     
    			<h1 class="page-title">Tous les billets</h1>
     
     
     
     
    		<ul class="posts"><li class="post">
    				<a href="/blog/posts/xxxx-school/">xxxx School</a> <span class="meta">12
    juin 2018</span>
    			</li><li class="post">
    				<a href="/blog/posts/xxxx-selfhosting/">xxxx Selfhosting</a> <span class="meta">13
    mai 2018</span>
    			</li></ul>
    	</div>
     
    	<div class="webring wrapper">
            <nav class="webring">
    		<div><section class="webring">
      <h3>Articles de blogs que je suis sur l'Internet</h3>
      <section class="articles">
     
        <div class="article">
          <h4 class="title">
            <a href="https://drewdevault.com/2021/09/15/Status-update-September-2021.html" target="_blank" rel="noopener">Status update, September 2021</a>
          </h4>
          <p class="summary">It’s a quiet, foggy morning here in Amsterdam, and here with my fresh mug of
    coffee and a cuddly cat in my lap, I’d like to share the latest news on my FOSS
    efforts with you. Grab yourself a warm drink and a cat of your own and let’s get
    started.
    First, a new…</p>
          <small class="source">
            via <a href="https://drewdevault.com">Drew DeVault's blog</a>
          </small>
          <small class="date">September 15, 2021</small>
        </div>
     
        <div class="article">
          <h4 class="title">
            <a href="https://emersion.fr/blog/2021/status-update-33/" target="_blank" rel="noopener">Status update, September 2021</a>
          </h4>
          <p class="summary">Hi all!
    As often, my main focus this month has been Wayland-related stuff. The biggest
    new item is likely the introduction of a scene-graph API to
    wlroots. With this new API, compositors can organize the objects which will be
    rendered on-screen in a tree. Sur…</p>
          <small class="source">
            via <a href="https://emersion.fr/blog/">emersion</a>
          </small>
          <small class="date">September 15, 2021</small>
        </div>
     
        <div class="article">
          <h4 class="title">
            <a href="https://danluu.com/why-benchmark/" target="_blank" rel="noopener">Some reasons to measure</a>
          </h4>
          <p class="summary">
     
    A question I get asked with some frequency is: why bother measuring X, why not build something instead? More bluntly, in a recent conversation with a newsletter author, his comment on some future measurement projects I wanted to do (in the same vein as ot…</p>
          <small class="source">
            via <a href="https://danluu.com/atom/index.xml">Dan Luu</a>
          </small>
          <small class="date">August 27, 2021</small>
        </div>
     
      </section>
      <p class="attribution">
        Généré avec
        <a href="https://git.sr.ht/~sircmpwn/openring">openring</a>
      </p>
    </section>
    <style>
    .webring .articles {
      display: flex;
      flex-wrap: wrap;
      margin: -0.5rem;
    }
    .webring .title {
      margin: 0;
    }
    .webring .article {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      margin: 0.5rem;
      padding: 0.5rem;
      background: #eee;
      min-width: 10rem;
    }
    .webring .summary {
      font-size: 0.8rem;
      flex: 1 1 0;
    }
    .webring .attribution {
      text-align: right;
      font-size: 0.8rem;
      color: #555;
    }
    </style>
    </div>
            </nav>
    </div>
    <div class="footer wrapper">
    	<nav class="nav">
    		<div> © xxxxx  | <a href="https://twitter.com/xxxxx">twitter</a> | <a href="/blog/wechat/">wechat</a> | xxx@xxxx.org | IRC : <a href="ircs://irc.geeknode.org">xxxx</a> @Geeknode.</a> | <a href="https://github.com/vividvilla/ezhil">Ezhil</a> / <a href="https://gohugo.io">Hugo</a></div>
    	</nav>
    </div>
     
     
     
    </body>
     
    </html>

  4. #4
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 674
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 674
    Points : 2 378
    Points
    2 378
    Par défaut
    Bonjour,

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <h1 class="site-title">
    <img src="{{ "icons/icon.png" | absURL }}" width="40" height="40" ><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>

    Si vous souhaitez que l'image se trouve APRES le titre, mettez simplement l'image à la suite plutôt qu'avant

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <h1 class="site-title">
        <a href="{{ .Site.BaseURL }}">
            {{ .Site.Title }}
            <img src="{{ "icons/icon.png" | absURL }}" width="40" height="40" >
        </a>
    </h1>

    Ici j'ai mis l'image dans le lien parce qu'on dirait que vous avez un display: block; sur le lien car sinon l'image devrait s'afficher juste avant le titre, or, sur la capture d'écran, le titre est à la ligne.

    N'hésitez pas à créer une Codepen représentatif de votre problème car il manque énormément d'infos ici dans notre cas.
    Voici un exemple que j'ai créé en remplaçant le béret qu'on a pas par le logo Google avec un fond vert : https://codepen.io/DarkStar123456/pen/dyRKMVX

  5. #5
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    septembre 2021
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : septembre 2021
    Messages : 3
    Points : 2
    Points
    2
    Par défaut Parfait
    Merci darkstar123456, c'est exactement le résultat que je souhaitais obtenir. Merci aussi mathieu de m'avoir répondu.

    Nom : screenshot_2021-09-21-18:13:40.png
Affichages : 25
Taille : 15,5 Ko

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Aligner images et textes
    Par michalyon dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 24/09/2013, 19h17
  2. alignement image et texte
    Par rom117 dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 11/07/2009, 22h10
  3. alignement image et texte
    Par lumat dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 27/03/2008, 14h51
  4. Problème alignement image par rapport au texte
    Par finalfx dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 23/05/2006, 08h12
  5. Alignement image avec texte
    Par finalfx dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 18/04/2006, 16h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo