Problème position de texte après image

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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.

Édité par Azariel

+0 -0
Staff

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

Édité par elyppire

Llama ◦ FAQ PHPTuto WAMP

+0 -0
Auteur du sujet

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 ? :D ) :

Header

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.

Édité par Azariel

+0 -0

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…>>

Édité par Xenos

+0 -0
Auteur du sujet

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 : Image utilisateur

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

Édité par Azariel

+0 -0
Staff

@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.

Llama ◦ FAQ PHPTuto WAMP

+0 -0
Auteur du sujet

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à ?

Édité par Azariel

+0 -0

Cette réponse a aidé l'auteur du sujet

@elyppire: C'est ce que j'ai compris après coup, mais la formulation m'avait laissé pensé que c'était pour le forum général, et non par topic. Bref, j'ai rien dit :)

On doit pouvoir faire pareil sans utiliser de "div" intermédiaire (rajouter des noeuds dans le DOM juste pour faire de la présentation, c'est une mauvaise habitude à perdre). Un flex-flow: column wrap en fixant à (flex-)?basis: 100%; width: 25%; chaque élément, sauf les deux qu'on veut empiler qu'on définit à (flex-)?basis: 50%, cela devrait se faire.

Bref, en prenant le tuto du MDN à ce sujet, cela devrait se faire en quelques règles CSS.

Édité par Xenos

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte