Problème position de texte après image

Bonj..soir !

J'ai un petit soucis avec le tuto de base HTML/CSS du bon vieux Zozor : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/tp-creation-d-un-site-pas-a-pas

J'ai beau essayer de comprendre et de refaire le tuto, à moins de recopier les lignes en "trichant", je n'arrive pas à comprendre la logique qui se cache dans le CSS pour réussir à mettre le titre à côté du logo.

Si quelqu'un sait m'expliquer le pourquoi du comment, ou carrément m'ajouter sur skype ou autre moyen de communication pour m'aider tout au long de mon apprentissage (Demandez moi par mp pour que je vous envoies mon ID. Promis, je ne suis pas du genre à demander tous les jours des conseils.. Mais avoir un Maitre Jedi pour le jeune Padawan que je suis, serait vraiment cool )

Merci d'avance !

PS : Je ne sais pas si j'ai le droit de mettre le lien d'un site "concurrent", surtout sachant qu'on vient tous plus ou moins de là-bas.. M'enfin c'est ça ou j'avance pas vraiment . Fouettez moi si jamais j'ai pas le droit.

Hello !

En introduction, tu peux sans problème nommer OpenClassrooms ici. On sait tous d'où l'on vient, et on l'assume tous.

Pour répondre à ta question, je te conseille de relire le chapitre sur flexbox et de bien tester le comportement des différents cas.

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox

Merci pour ta réponse elyppire !

Bon, j'ai essayé de refaire tout ça sans suivre l'exemple du tuto mais en créant le mien. Je n'ai pas réussi du tout. Donc j'ai recommencé. Je vous donne l'image avec les blocs que j'ai coloré pour m'aider à visualiser les blocs (méthode grand mère ? ) :

Et voici le code html :

 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

<Header>
      <div id="header">
        <div id="principal_title">
          <div id="logo">
            <img src="images/logo.png" alt="Logo" />
            <h1>Blagues delirantes</h1>
          </div>
          <h2>Des blagues de qualité !</h2>
        </div>

        <nav class="nav_top">
          <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Catégories</a>
              <ul>
                  <li><a href="#">Courtes</a></li>
                  <li><a href="#">Petites Histoires</a></li>
              </ul>
            </li>
            <li><a href="#">Classement</a>
              <ul>
                <li><a href="#">Blagues</a></li>
                <li><a href="#">Blagueurs</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
</header>

Je n'ai rien mis dans le fichier CSS, juste la coloration background pour essayer de me repérer. J'aimerais recevoir vos "étapes" pour réaliser le même type de header qui est dans le tuto de Zozor

Merci d'avance pour votre aide !

PS : Je précise qu'il y a bien le link du fichier CSS, y'a pas de soucis avec ça.

Il utilise le modèle "Flexbox" (que tu trouveras facilement sur le net), dont le principe est de dire "dans quelle direction dois-je [le navigateur] empiler ces éléments?".

display: flex; flex-direction: column; les empilera l'un sous l'autre, alors que display: flex; flex-direction: row; les "empilera" l'un après l'autre.

C'est ce qui est utilisé ici dans le #logo contenant l'image et le texte de titre. Cet ensemble est alors lui-même empilé en colonne pour former le header.

<<HS: 15 minutes d'attente entre deux posts? Sérieux?! Bon, ben tant pis pour les autres topics…>>

Merci pour ton aide Xenos ! Cependant, j'avais compris le principe de flexbox, mais je pense qu'il y a quelque chose que je ne saisis pas.

Par exemple, j'ai pu reproduire ceci :

Mais je n'arrive pas à faire en sorte que le <h1> et le <h2> soient superposés, en bas à gauche de l'image.

@Azariel : la structure HTML t'es imposée ? Car c'est étrange ce h2 hors du div qui englobe le h1…

@Xenos : qu'es ce qui te pose problème dans ce fonctionnement ? L'édition de ton message reste possible si tu souhaites le compléter, et les 15 minutes ne s'appliquent pas si tu réponds sur un autre topic.

Non, rien est imposé. Comme je l'ai dit, j'ai créé cet "exemple" de toute pièces pour m'entraîner. Et c'est effectivement le problème ici, du <h1> et <h2>..

Edit : Je pense avoir compris ! Dans le tuto, le <h2> est comme tu dis, "séparé" de la <div> qui contient le <h1>, DONC ce <h2> se place en dessous.

Pour que je puisse avoir le <h1> ET le <h2> l'un en dessous de l'autre, ET à côté de l'image, je dois les regrouper, et donc créer une autre <div> juste pour celà ?

Et bien déjà passe le h2 dans la div du h1 et regarde le comportement.

Avec l'aide du tuto, j'ai pu mieux comprendre comment fonctionnait le flex, bien mieux qu'avec le tuto d'OC, merci à tous pour votre aide !