adapter taille flex box en fonction de l'écran

Sujet résolu

12 octobre 2020 à 21:58:33

Bonjour je sollicite votre aide sur ce forum car j'ai un problème de code html/css.

En effet je m'exerçais en faisant une page avec un menu de navigation en haut permettant de naviguer entre chaque page.

le problème est que j'ai tailler le menu de sorte a ce qu'il ait une taille adapter à une page pleine mais lorsqu'on rétrécit la page le menu

donne un peu n'importe quoi, j'aimerai si possible que l'on m'aide a trouver une solution merci d'avance.

les screen sont en dessous.

code css

#menu {
    background-color: black;
    font-size: large;
    width: 100%;
    height: 99px;
    }
    #menu > ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    padding: 0px;
    }
    #menu .noir{
    background-color: black;
    text-decoration: none;
    color: white;
    padding: 40 58.43px;
    }
    #menu .blanc{
        background-color: white;
        text-decoration: none;
        color: black;
        padding: 40 56px;
        }
    #menu li a:hover {
    background-color:gold;
    }
    body{
    width: 100%;
    height: 100%;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    }

code html du lien 1, ils sont tous pareille sauf qUe la classe blanc et a une place différente pour montrer sur quel page on est.

<html>
    <head>
        <link rel="stylesheet" href="TD3-5.css">
    </head>
    <body>
        <nav id="menu">
            <br>
            <ul>
                <li>
                    <a class="blanc" href="TD3-5.1.html">Paragraphe 1</a>
                </li>
                <li>
                    <a class="noir" href="TD3-5.2.html">Paragraphe 2</a>
                </li>
                <li>
                    <a class="noir" href="TD3-5.3.html">Paragraphe 3</a>
                </li>
                <li>
                    <a class="noir" href="TD3-5.4.html">Paragraphe 4</a>
                </li>
                <li>
                    <a class="noir" href="TD3-5.5.html">Paragraphe 5</a>
                </li>
                <li>
                    <a class="noir" href="TD3-5.6.html">Paragraphe 6</a>
                </li>
            </ul>
        </nav>
        <br>
        <p>
            Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia 
            Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, 
            equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis 
            vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva 
            subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine 
            sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam 
            placet.
        </p>
    </body>
</html>

page pleine

page rétrécit

-
Edité par IbovitchBbj1 12 octobre 2020 à 22:06:12

NadfriJS

13 octobre 2020 à 13:26:06

Salut, je pense qu'il faut repenser tout ton css,

Voici un exemple en reprenant ton code, ce n'est pas parfait, mais c'est un bon debut:

https://jsbin.com/tiwevaheqi/edit?html,css,output

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

IbovitchBbj1

13 octobre 2020 à 16:09:56

Ok merci beaucoup sa m'aide grandement j'ai rajouter les choses manquantes et le rendu est clean maintenant mais tu pourrais m'expliquer la difference principale qui fait que item dans la flexbox s'adapte automatiquement ?

-
Edité par IbovitchBbj1 13 octobre 2020 à 17:04:48

NadfriJS

13 octobre 2020 à 19:21:45

Salut, c'est grace à la propriété flex:1 (ou auto) qui est présent dans les enfants d'un conteneur ayant le display: flex

Si elle est à 1, ca signifie que tout les enfants (dans notre cas les li) doivent avoir la même taille en fonction de l'espace disponible dans le conteneur.

Plus d'info ici:

https://developer.mozilla.org/fr/docs/Web/CSS/flex

-
Edité par NadfriJS 13 octobre 2020 à 23:39:05

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

IbovitchBbj1

14 octobre 2020 à 0:13:03

okk et encore merci pour votre aide.

-
Edité par IbovitchBbj1 14 octobre 2020 à 0:13:21