Partage

Impossible de faire rentrer une <il> entière

Dooum

15 octobre 2020 à 16:11:20

Bonjour,

Je n'arrive pas à faire rentrer une liste dans les 2 cotés. Ayant du mal à m'expliquer je vous montre en dessous.

On vois qu'au bout de la flèche il y'a une petit espace. Ca fait plusieurs heures que j'y travaille et rien y fait !

Voici mon code :

Utilisant pour la première fois le forum d'openclassroom , je ne sais pas faire autrement que par des images.

Kovsky

15 octobre 2020 à 16:26:22

Salut,

navré mais je n'arrive pas du tout à lire ton code, il ya une balise code si tu as besoin de coller du code .

Développeur react freelance à Toulouse

Je suis développeur react freelance spécialisé dans la création de site internet basé à Toulouse

Dooum

15 octobre 2020 à 16:28:19

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet " href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T " crossorigin="anonymous ">
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>"TAI Games"</title>
    <link href="https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap" rel="stylesheet">
</head>

<body>
    <nav class="navbar">
        <img id="logo_head" src="image/logo.png" href="index.html" />
        <div class="navlink">
            <a id="link1" href="">Top 10</a>
            <a id="link2" href="">Lien 2</a>
            <a id="link3" href="">Contact</a>
            <a id="link4" href="">En savoir plus</a>
        </div>

    </nav>
    <div class="container-fluid">
        <div class="row" id=row_head>
            <div class=col-12 id=colhead>
                <ul id=ul_header>
                    <li class=li_colhead>A</li>
                    <li class=li_colhead>B</li>
                    <li class=li_colhead>C</li>
                    <li class=li_colhead>D</li>
                    <li class=li_colhead>E</li>
                    <li class=li_colhead>F</li>
                    <li class=li_colhead>G</li>
                    <li class=li_colhead>H</li>
                    <li class=li_colhead>I</li>
                </ul>
            </div>
            <div class=col-2 id=col1>

            </div>
            <div class=col-4 id=col2>

            </div>
            <div class=col-4 id=col3>

            </div>
            <div class=col-2 id=col4>

            </div>
        </div>
    </div>
    <div>
        <img id="main_image" src="https://media.lesechos.com/api/v1/images/view/5c12ae958fe56f708f174508/1280x720-webp/060340272200-web-tete.webp ">
    </div>


</body>

</html>

html {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
}

.container-fluid {
    position: absolute;
    margin: 0 0 0 0;
    padding-left: 0%;
    padding-right: 0%;
    background-color: black;
    z-index: 10;
    height: 50px;
}

#colhead {
    position: relative;
    width: 100%;
    height: 73px;
    background: black;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

#row_head {
    width: 100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

#ul_header {
    width: 100%;
    padding: 0px 0px 0px 0px;
    margin: 0px 10px 0px 0px;
}

.li_colhead {
    background-color: #f7f7f7;
    display: inline;
    color: #000000;
    border-left: .0625rem solid rgb(68, 68, 68);
    padding: 25px 88px;
    margin: 0px 0px;
    max-width: 12%;
    list-style: none;
    position: relative;
    top: 1px;
    right: 0px;
    float: left
}

#main_logo {
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
}

#logo_head {
    width: 27%;
    margin-left: 20px;
    margin-top: 10px;
}

.navlink {
    list-style: none;
    line-height: 70px;
    margin: auto;
    vertical-align: middle;
    font-size: 20px;
}

#main_image {
    width: 100%;
    height: 800px;
    position: fixed;
    z-index: 1;
}

#link1 {
    margin-right: 40px;
}

#link2 {
    margin-right: 40px;
}

#link3 {
    margin-right: 40px;
}

#link4 {
    margin-right: 40px;
}

Merci

voila le code

Kovsky

15 octobre 2020 à 16:33:19

id=row_head>
            <div class=col-12 id=colhead>
                <ul id=ul_header>
                    <li class=li_colhead>A</li>
                    <li class=li_colhead>B</li>
                    <li class=li_colhead>C</li>
                    <li class=li_colhead>D</li>
                    <li class=li_colhead>E</li>
                    <li class=li_colhead>F</li>
                    <li class=li_colhead>G</li>
                    <li class=li_colhead>H</li>
                    <li class=li_colhead>I</li>
                </ul>
            </div>
            <div class=col-2 id=col1>
 
            </div>
            <div class=col-4 id=col2>
 
            </div>
            <div class=col-4 id=col3>
 
            </div>
            <div class=col-2 id=col4>
 
            </div>
        </div>

il te manque des guillemets déjà pour tes classes et tes id

si tu es sur vscode je te recommande prettier et eslint comme extension ça te facilitera la vie

ET BIENVENUE sur le forum

-
Edité par Kovsky 15 octobre 2020 à 16:37:16

Développeur react freelance à Toulouse

Je suis développeur react freelance spécialisé dans la création de site internet basé à Toulouse

Dooum

15 octobre 2020 à 16:40:24

Pour ce travail je le fait en groupe avec des collègues sinon j'utilise Bracket.

Pour les "" c'est fait , même si je ne m'attendais pas à un grand changement ^^.

Et Merci

EDIT: Sinon je pense que quelque chose dans mon "container_fluid" est mal utilisé ou tous simplement mauvaise syntax. Mais je ne trouve pas quoi.

-
Edité par Dooum 15 octobre 2020 à 16:41:21

Kovsky

15 octobre 2020 à 17:39:11

Difficile comme ça, mais ça me semble bizarre de voir ton container_fluid en position absolute, une raison particulière ?

sinon une manière plus propre d'écrire

padding: 0 0 0 0;

margin: 0 0 0 0;

est d'écrire

padding: 0 ;

margin: 0;

Développeur react freelance à Toulouse

Je suis développeur react freelance spécialisé dans la création de site internet basé à Toulouse

Dooum

15 octobre 2020 à 21:09:36

J'avoue avoir essayer plusieurs truc, parfois qui n'avais pas de sens

-
Edité par Dooum 15 octobre 2020 à 21:09:48

xakula

16 octobre 2020 à 2:09:20

Problème intéressant.

Heureux comme un gamin. J'ai réussi. Mais je ne dis pas le temps que j'ai passé.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <style>
      body{background-color:black;}
.pagecentrale{height:900px;width:1300px;border:0px black solid;margin:auto;background-color:white;}
.header{height:200px;width:100%;border-bottom:0px black solid;display:flex;align-items:flex-end;}
.nav{height:60px;width:1330px;border-top:0px green solid;display:flex;flex-direction:row;justify-content:space-between;margin:-1px;}
.element{border:1px black solid;text-align:center;flex-grow:1;}
    </style>
  </head>

<body>
  <div class="pagecentrale">
  <div class="header">
  <div class="nav">
  <div class="element"><p>a</p></div>
  <div class="element"><p>b</p></div>
  <div class="element"><p>c</p></div>
  <div class="element"><p>d</p></div>
  <div class="element"><p>e</p></div>
  <div class="element"><p>f</p></div>
  <div class="element"><p>g</p></div>
  <div class="element"><p>h</p></div>
  <div class="element"><p>i</p></div>
  </div>
  </div>
  </div>
</body>
</html>

Dooum

16 octobre 2020 à 8:50:01

Je prend en compte , j'essaye de modifier selon mon site et je te dit si cela fonctionne.

EDIT:

Okay après 1 h j'ai réussi à ajuster et corriger un peu tout.

Je vous place le code au cas ou.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet " href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T " crossorigin="anonymous ">
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>"TAI Games"</title>
    <link href="https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap" rel="stylesheet">
</head>

<body>
    <nav class="navbar">
        <img id="logo_head" src="image/logo.png" href="index.html" />
        <div class="navlink">
            <a id="link1" href="">Top 10</a>
            <a id="link2" href="">Lien 2</a>
            <a id="link3" href="">Contact</a>
            <a id="link4" href="">En savoir plus</a>
        </div>

    </nav>
    <div class="container-fluid">
        <div class="row" id="row_head">
            <div class="col-12" id="colhead">
                <ul id="ul_header">
                    <li class="li_colhead">A</li>
                    <li class="li_colhead">B</li>
                    <li class="li_colhead">C</li>
                    <li class="li_colhead">D</li>
                    <li class="li_colhead">E</li>
                    <li class="li_colhead">F</li>
                    <li class="li_colhead">G</li>
                    <li class="li_colhead">H</li>
                    <li class="li_colhead">I</li>
                    <li class="li_colhead">K</li>
                </ul>
            </div>
            <div class="col-2" id="col1">

            </div>
            <div class="col-4" id="col2">

            </div>
            <div class="col-4" id="col3">

            </div>
            <div class="col-2" id="col4">

            </div>
        </div>
    </div>
    <div>
        <img id="main_image" src="https://media.lesechos.com/api/v1/images/view/5c12ae958fe56f708f174508/1280x720-webp/060340272200-web-tete.webp">
    </div>


</body>

</html>

html {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
}

.container-fluid {
    position: relative;
    margin: 0 0 0 0;
    padding-left: 0%;
    padding-right: 0%;
    background-color: black;
    z-index: 10;
    height: 65px;
}

#colhead {
    height:91px;
    width:100%;
    border:0px black solid;
    margin:0;
    padding: 0 0 0 0;
    }

#row_head {
    height:65px;
    width:100%;
    border-bottom:0px black solid;
    display:flex;
    align-items:flex-end;
    margin: 0 0 0 0;
}

#ul_header {
    height:64px;
    width:100%;
    border-top:0px green solid;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    margin:0 0 0 0;
    padding-inline-start: 0;
}

.li_colhead {
    background-color: #f7f7f7;
    display: inline;
    color: #000000;
    border-left: .0625rem solid rgb(68, 68, 68);
    padding: 25px 0px 0px 0px;
    margin: 0px 0px;
    width: 100%;
    list-style: none;
    position: relative;
    top: 1px;
    right: 0px;
    flex-grow: 1;
    text-align: center;
}

#main_logo {
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
}

#logo_head {
    width: 27%;
    margin-left: 20px;
    margin-top: 10px;
}

.navlink {
    list-style: none;
    line-height: 70px;
    margin: auto;
    vertical-align: middle;
    font-size: 20px;
}

#main_image {
    width: 100%;
    height: 800px;
    position: fixed;
    z-index: 1;
}

#link1 {
    margin-right: 40px;
}

#link2 {
    margin-right: 40px;
}

#link3 {
    margin-right: 40px;
}

#link4 {
    margin-right: 40px;
}

-
Edité par Dooum 16 octobre 2020 à 9:08:37

xakula

16 octobre 2020 à 9:31:16

Du coup, t'as plus de J mais un K et tu as un espace aux deux extrémités.

Dooum

19 octobre 2020 à 10:53:47

Il n'y avais pas de J à la base , je me suis juste trompé

, il y'avais un problème du au fait que 7 étant impair le site ne voulais pas faire ca proprement.