Je n'arrive pas à aligner mon image avec ma liste à puce, auriez vous une solution ? 

Voici le code CSS et HTML de mon header:

header
{
	
	background-color: rgb(234,234,234);
	min-width: 1028px;
	min-height: 302px;
	border-radius: 5px;

                                <header>


<div id="content">
	<ul>
	    <li> Jouer</li>
	    <li>Apprendre</li>
	    <li>Histoire des échecs</li>
    <ul>
   <a href="Mon Site.html"><img src="../Photos/chessplayer.png" alt="logo"></a>
</div>

                                
                                </header>

Merci d'avance

Salut,

quel résultat tu veux obtenir exactement ?

Le texte à droite de l'image, à gauche, en bas à droite en haut à gauche, etc...

Bonjour, merci pour votre réponse rapide. J'aimerai le texte à gauche et l'image à droite. J'ai essayé avec display mais sa ne marche pas, j'ai du faire une manip bizarre... Est-ce qu'il serait conseillé dans ce genre de cas d'utiliser 

{
position: absolute;
}

? Merci.

Avec un position absolute tu y arrivera par tatonnement mais c'est un peu du bricolage.

Place ta liste (<ul>) et ton image dans une div chacune. Essai ensuite un display:inline-bloc sur la div de la liste ou sur celle de l'image

position:absolute n'est la solution idéale.
C'est vraiment à utiliser que si tu ne peux pas faire autrement.

Tu peux le faire avec display:inline-block que tu applique à ton <a> et à 'l<ul>. <ul> qu'il faudrait mettre devant le <a> dans le code html.

Si tu veux garder ta structure html tel quelle est, tu peux mettre un float:left sur le <a>.
Et pour éviter des problèmes de sortie de flux liés au float, tu mets un overflow:hidden sur content et <ul>.

Bonjour à toi !

Je sais pas si tu connais le principe des colonnes ? Le but est de diviser ta page web en plusieurs colonne, le framework css bootstrap  propose ce système, tu as juste à positionner ton text dans des colonnes et ton image dans d'autres colonnes.

Regarde ici : https://getbootstrap.com/docs/4.0/layout/grid/

En espérant que ça t'aide !

Non désolé sa ne marche pas du tout, mon bloc devient un carré et mes et ma liste reste collée en haut à droite, j'imagine que les margin et les padding ne sont pas fait pour sa, n'est ce pas ? Merci quand même d'avoir proposé quelque chose.

Ajoute vertical-align: bottom à ton <a> et à ton <ul> si tu as choisi inline-block.

Comment ça ton bloc devient un carré ?

C'est ça que tu veux obtenir ? :

https://jsfiddle.net/Site_Frogweb/verod3ny/13/

PS :ton <ul> n'est pas fermée correctement.

-
Edité par Frogweb 6 août 2018 à 14:15:17

Bonjour Frogweb et NicolaLas2,

Je suis débutante, et ceci est ma première interaction avec le forum.

Je viens d'apprendre la fonction display: flex;

Est-ce que c'était envisageable de l'utiliser dans le cas d'IssaClement ?

Bonjour,

C'est effectivement parfaitement envisageable.

Et ce serait d'ailleurs la méthode la plus moderne et la plus propre. 

Je suis d'accord avec @Mewen_bzh, les propriétés de flexbox sont tellement bien quand elles sont maîtrisées

ok ok !

Merci Mewen_bzh ! 

Merci KévinH !

Bonjour,

Ma fois si tu veut le texte à gauche et l'image à droite c'est plutôt simple.

suffit de coller l'image en 1er dans le flux à l’intérieur du content en lui allouant un float right.

<div id="content">
  <a href="Mon Site.html"><img class="imgh" src="../Photos/chessplayer.png" alt="logo"></a>
    <ul>
        <li> Jouer</li>
        <li>Apprendre</li>
        <li>Histoire des échecs</li>
    <ul>
   
</div>

header
{
     
    background-color: rgb(234,234,234);
    min-width: 1028px;
    min-height: 302px;
    border-radius: 5px;
  }
  .imgh{
    float: right;
  }