[Résolu] 2sections collés au lieu d'être espacées par KillianTy - page 1

10 janvier 2019 à 10:10:04

Hey ! Alors voilà, après le problème du liseret j'en ai rencontré un autre, mais cette fois-ci, autant le liseret je savais quoi chercher, autant là non.

J'explique:

Enfaite j'ai mis une <div> dans mon code qui regroupe 3 <section>, de ce fait je peux rajouter la propriété display: flex; afin que mes 3 <sections> soient en ligne, mais quand je rajoute cette fonctionnalité dans mon code, mes deux dernières <sections> sont "collées".

En gros voici mon code html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mon CV</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <header>
        <h1>Killian Rak</h1>
        <p id="passion">Apprenti codeur et détérminé à devenir un pro</p>
    </header>
    <body>

        <div id="contener">
            <div id="liseret"></div>

        <section>
            <h2>Mon expérience</h2>
            <ul>
                <li>2005: Le jour de ma naissance</li>
                <li>20014: Ma découverte des rétros habbo</li>
                <li>2018: Ma determination à apprendre le codage</li>
            </ul>
        </section>

        <section>
            <h2>Mes compétences</h2>
            <ul>
                <li>HTML et CSS3</li>
                <li>8ans de judo</li>
                <li>3ans de rugby</li>
            </ul>
        </section>

        <section>
            <h2>Ma Formation</h2>
            <p>
                J'ai commencé sur <a href="https://www.codecademy.fr",>Code Cademy</a><br />puis j'ai continué sur <a href="https://www.openclassroom.com">Open Classroom</a>.
           </p>
        </section>

        </div>

</body>
</html>

et voici mon code CSS:

#contener {
	display: flex;
}

#liseret {
	border-radius: 10px 10px 10px 10px;
	float: left;
	background-color: black;
  }

#passion, h1 {
	text-align: center;
	font-family: Arial;
}

et voilà ce que ça me donne:

-
Edité par KillianTy 10 janvier 2019 à 10:12:30

Serkox

10 janvier 2019 à 10:42:41

Bonjour,

En réalité si le texte de la première section n'était pas aussi long, ils seraient tout les collés.

Rapidement, tu peux essayer ceci :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mon CV</title>
        <link rel="stylesheet" href="style.css"/>
    </head>

    <header>
        <h1>Killian Rak</h1>
        <p id="passion">Apprenti codeur et détérminé à devenir un pro</p>
    </header>

    <body>
 
        <div id="contener">
            <div id="liseret"></div>
 
            <div class="d1">
                <h2>Mon expérience</h2>
                <ul>
                    <li>2005: Le jour de ma naissance</li>
                    <li>20014: Ma découverte des rétros habbo</li>
                    <li>2018: Ma determination à apprendre le codage</li>
                </ul>
            </div>
     
            <div class="d2">
                <h2>Mes compétences</h2>
                <ul>
                    <li>HTML et CSS3</li>
                    <li>8ans de judo</li>
                    <li>3ans de rugby</li>
                </ul>
            </div>
     
            <div class="d3">
                <h2>Ma Formation</h2>
                <p>J'ai commencé sur <a href="https://www.codecademy.fr",>Code Cademy</a><br />puis j'ai continué sur <a href="https://www.openclassroom.com">Open Classroom</a>.</p>
            </div>
 
        </div>
 
    </body>
</html>

<style>

#contener {
    display: flex;
    width: 100%;
}
 
#liseret {
    border-radius: 10px 10px 10px 10px;
    float: left;
    background-color: black;
  }
 
#passion, h1 {
    text-align: center;
    font-family: Arial;
}
    
.d1{
    width:50%;
}

.d2{
    width:25%;
}

.d3{
    width:50%;
}

</style>

J'aurais également plutôt mis des div au lieu de section.

En espérant t'avoir aidé !

Bonne journée

#Avgeek

GuillaumeBo1

10 janvier 2019 à 15:25:12

KillianTy a écrit:

Hey ! Alors voilà, après le problème du liseret j'en ai rencontré un autre, mais cette fois-ci, autant le liseret je savais quoi chercher, autant là non.

J'explique:

Enfaite j'ai mis une <div> dans mon code qui regroupe 3 <section>, de ce fait je peux rajouter la propriété display: flex; afin que mes 3 <sections> soient en ligne, mais quand je rajoute cette fonctionnalité dans mon code, mes deux dernières <sections> sont "collées".

Edité par KillianTy il y a environ 5 heures

une div pour mettre 3 sections.... c'est moche très moche.

tu utilise display flex c'est très bien maintenant ajoute dans ton CSS simplement ceci :

section {
    flex: 1;
}

en gros tu leur dit de prendre tous la même tailles

Serkox ta méthode est nul déjà width: 100%; NON jamais c'est inutile est moche.

les div c'est bien mais à petite dose uniquement si d'autre balise n'existe pas. et mettre des tailles en pourcentage n'est pas à préconiser car sur grand écran ou sur petit tu auras un visuel cassé

-
Edité par GuillaumeBo1 10 janvier 2019 à 15:43:07

Un homme azerty en vaut deux.

Serkox

10 janvier 2019 à 18:52:37

GuillaumeBo1 a écrit:

KillianTy a écrit:

Hey ! Alors voilà, après le problème du liseret j'en ai rencontré un autre, mais cette fois-ci, autant le liseret je savais quoi chercher, autant là non.

J'explique:

Enfaite j'ai mis une <div> dans mon code qui regroupe 3 <section>, de ce fait je peux rajouter la propriété display: flex; afin que mes 3 <sections> soient en ligne, mais quand je rajoute cette fonctionnalité dans mon code, mes deux dernières <sections> sont "collées".

Edité par KillianTy il y a environ 5 heures

une div pour mettre 3 sections.... c'est moche très moche.

tu utilise display flex c'est très bien maintenant ajoute dans ton CSS simplement ceci :
section {
    flex: 1;
}
en gros tu leur dit de prendre tous la même tailles

Serkox ta méthode est nul déjà width: 100%; NON jamais c'est inutile est moche.

les div c'est bien mais à petite dose uniquement si d'autre balise n'existe pas. et mettre des tailles en pourcentage n'est pas à préconiser car sur grand écran ou sur petit tu auras un visuel cassé

-
Edité par GuillaumeBo1 il y a environ 3 heures

C'est pour ça que j'ai dit que j'ai fait ça rapidement

#Avgeek

KillianTy

11 janvier 2019 à 8:02:25

Merci à vous deux pour votre aide, mon problème est réglé !

Cependant j'ai laissé les 3sections dans une div, est ce que je devrais l'enlever ? Et pour quoi c'est moche ?

GuillaumeBo1

14 janvier 2019 à 17:25:09

Parce que les div sont utilisé à tort alors que tu as toute une liste de balise pour presque chaque besoin comme :

header
main
section
article
aside
nav
li
ol
ul
footer

Et j'en passe... tu te vois avec un code de 1000 lignes avec que du div ? bonjour pour t'y retrouver.

si c'est résolu, retourne en haut de ton premier poste et à droite se situe un bouton résolue :magicien:

-
Edité par GuillaumeBo1 14 janvier 2019 à 17:27:31

Un homme azerty en vaut deux.

2sections collés au lieu d'être espacées

Supprimer

Modérer

Signaler le message aux modérateurs