Bonsoir à tous,

Petit problème sur flex wrap, je m'explique (je suis sur le cours HTML5/CSS3 ).

Comme sur la capture d'écran ci dessous, voila ma page quand je suis en taille max de la fenêtre : 

Et quand je reduis la fenêtre manuellement, les éléments vont bien les uns en dessous des autres comme prévus.....mais.....il y un décalage esthétique qui ne me convient pas :

Voila donc j'ai essayé de rajouter de la marge à gauche, ça règle le problème en fenêtre réduite mais ça fout le bazar quand je suis en plein écran.

Merci d'avance !

-
Edité par Matthieu RGX 8 août 2017 à 19:45:24

Salut,

Se que je ferais c'est que je mettrais les trois sections (Experience, Competences, Formation) dans une balise.

Quelques chose comme cela:

<div id="blockPage">
    <section id="experience">
    </section>
    <section id="competence">
    </section>
    <section id="formation">
    </section>
</div>

En centrant ou en appliquant une marge à blockPage tu ne devrais plus avoir de décalage.

Petit exemple ici.

-
Edité par Mr R0b0t 8 août 2017 à 20:21:15

Bonjour,

sans ton code on ne peut absolument rien faire. Tu apporterais juste une photo de ta voiture dans un garage ?

Lamecarlate a écrit:

Bonjour,

sans ton code on ne peut absolument rien faire. Tu apporterais juste une photo de ta voiture dans un garage ?

désolé

    <div class="bloc_section">    
        <section>
            <div class="experience">
                <h2>Mon expérience</h2>

                <ul>
    	           <li><strong>De mai 2014 à maintenant : </strong>Acheteur au sein de la société CAPITAINE HOUAT, </br>
    	           filière des produits de la mer du groupement Intermarché.</li> </br>
    	           <li><strong>De Juil 2012 à mai 2014 : </strong>Commercial au sein de la société SCAMER, </br>
    	           centrale d'achats du groupement Intermarché spécialisée dans les produits de la mer.</li> </br>
    	           <li><strong>De mars 2010 à Oct 2011 : </strong>Chef de projet marketing junior chez AT Internet,</br>
    	           entreprise spécialisé dans le web analytics. En charge de la solution "Analyzer".</li>
                </ul>
            </div>
        </section>


        <section>
            <div class="competences">
                <h2>Mes compétences</h2>
                <ul>
    	            <li>HTML 5 et CSS3</li>
    	            <li>Badminton (<a href="https://www.youtube.com/watch?v=-rxnxdsHE1E" title="c'est moi en jaune dans la vidéo !" target="_blank">mon meilleur point en vidéo</a>)</li>
    	            <li>Running</li>
    	            <li>Mario Kart Wii (niveau international)</li>
                </ul>
            </div>
        </section>

        <section>
            <div class="formation">
                <h2>Ma formation</h2>
    	
    	        <p>J'apprends tout seul comme un grand sur OpenClassrooms, et ça c'est la classe !</p>
            </div>
        </section>
    </div>     

et le CSS :

.bloc_section
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 1%;
}

.experience
{
	min-width: 20%;
	width: 60%;
}

.experience h2
{
	font-family: exoregular;
}

.competences
{
	min-width: 70%;
	width: 70%;
}

.competences h2
{
	font-family: exoregular;
}

.formation
{
	min-width: 20%;
	width: 70%;
}

.formation h2
{
	font-family: exoregular;
}Merci d'avance !

Merci d'avance !

[EDIT] Alors je viens de tester en mettant une marge au .bloc_section, le problème est réglé en fenêtre réduite mais en 100% ça me décale tout : 

-
Edité par Matthieu RGX 8 août 2017 à 23:26:14

Dans ton code, on n'a pas la barre bleue à gauche. Comment est-elle faite ?

Je te conseille également de déplacer les classes "formation", "experience" etc sur les sections enfants de ".bloc_section". Pour visualiser pourquoi je te conseille ça : mets des bordures sur .bloc_section > *, et aussi sur .formation, .experience, .competences : les largeurs que tu forces sur ces derniers sont par rapport aux sections, et non pas à ".bloc_section" (ce qui joue certainement dans le problème que tu décris).

Pour la barre bleue c'est une image de fond ! Mais je vais la changer ! le problème viendrait de la ?

-
Edité par Matthieu RGX 8 août 2017 à 23:29:08

Je suis toujours bloqué ! je n'arrive pas a choisir les bonnes largeurs et marges que cela soit au bloc_section et aux differentes sections en elle même ! je me mélange les pinceaux ... !

Salut,

Je viens de tester ton coder et j'avais un problème avec les tabulations, je sais pas d'oú cela vient mais des clés étaient insérées entre tes balises (tu peux le voir depuis le debugeur du navigateur). Confirme moi si tu as ce problème également. J'ai supprimé toutes les tabulations et re-indenté ton code et j'ai un fonctionnememnt normal. Ta première section (Experience) est bien sans marge à gauche, et les autres blocs ont bien un comportement wrap.

Dis moi si tu as bien ces clés et dans ce cas si en les supprimant (supprimer toutes tes tabulations puis re-indenter) tu as un comportement "normal".

J'ai tout ré-indenté mon HTML correctement. Mais le soucis persiste ! En fait les valeur de largeur que j'applique d'une part au .bloc_section et d'autres part aux sections en question s'applique de la même manière lorsque la fenêtre est réduite que lorsque qu'elle est à 100%, c'est normal vous me dirait

Il n'y a pas une solution pour verrouiller ces dimensions quelque soit la taille de la fenêtre ?

J'espère être clair dans mon explication

Merci d'avance !

Si tu veux "vérouiller" les valeurs il faut utiliser les px et non les %; se que je te conseille d'ailleurs pour les sections. Laisse faire se qu'elle veut à ta balise .bloc_section :) 

Je te conseille de t'amuser avec un exemple simple pour comprendre le fonctionnement puis applique le à ton site.

Exemple simple

ok oui tu me diras c'est logique, j'aurais du y penser avant de mettre des px au lieu de % !

Merci d'avance pour la réponse ! 

Cela devrait marcher maintenant !