Rencontre des problèmes avec les Div

Anonyme

10 août 2018 à 0:38:38

Bonjour/ bonsoir, alors pour ne pas perdre de temps voici mon problème:

J'essaye de simplement créer un div (qui est une balise de type block nan?) et de faire en sorte que cette balise prenne toutela largeur de l'écran.

Seule petit problème, il reste des "petits bords blancs" des deux côtés de mon div.

Ensuite j'essaye d'appliquer un height tout en sachant qu'il me faut utiliser du absolute pour pouvoir en profiter et là absolument rien ne se passe...

Voici mon code et n'hésitez pas à me hurler dessus lorsque vous me donnerez la réponse car j'en suis certain celà doit être une erreur de débutant

//CODE

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <link rel="stylesheet" href="Tribe.css" type="text/css"/>
            <title>Tribe</title>
        </head>
        <body>
            <div class="container"><p>Container</p></div>
        </body>

    </html>

.container{
    background-color: brown;
    position: absolute;
    width: 100%;
    height: 100%;
    
}

Merci d'avance de vos réponse ainsi que de votre temps

Bonne journée / soirée

exen

10 août 2018 à 1:22:05

Bonsoir,

dans ton navigateur tu fait un clique droit sur ta page et tu va inspecter les marges de ton body. Tu rajoute un truc de ce genre.

body{
  margin: 0 auto;
}

Et en prime deux liens :

https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

https://www.w3.org/Style/Examples/007/units.fr.html

Compos sui.

Frogweb

10 août 2018 à 16:45:56

Salut,

évite à tout prix absolute.
Pour les "petits bords blancs" exen te donne la solution. la balise <body> a, par défaut, un margin. Il faut donc le mettre à 0.

Pour le height:100% c'est très simple. Pour que ça fonctionne il faut que tous les parents de ton élément est aussi un height.
Dans ton cas :

html, body {
  height:100%;
}

PS : en html on ne parle plus vraiment de type block ou type inline. On parle de rendu (display) block ou inline.
Les balises sont classées différemment maintenant, par modèles de contenu.
https://www.alsacreations.com/tuto/lire/530-La-structure-des-balises-bloc-et-en-ligne.html
https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Anonyme

11 août 2018 à 14:32:10

Frogweb a écrit:

Salut,

évite à tout prix absolute.
Pour les "petits bords blancs" exen te donne la solution. la balise <body> a, par défaut, un margin. Il faut donc le mettre à 0.

Pour le height:100% c'est très simple. Pour que ça fonctionne il faut que tous les parents de ton élément est aussi un height.
Dans ton cas :
html, body {
  height:100%;
}
PS : en html on ne parle plus vraiment de type block ou type inline. On parle de rendu (display) block ou inline.
Les balises sont classées différemment maintenant, par modèles de contenu.
https://www.alsacreations.com/tuto/lire/530-La-structure-des-balises-bloc-et-en-ligne.html
https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html

ok merci beaucoup de ta réponse, ça fait longtemps que je n'avais pas pratiqué html et css (surtout que je faisais du css avant le version avec les flexbox etc ) mais du coup je pense que je vais essayer de reprendre point par point le concept avec éléments (parents,frères etc)

Pour ce qui est du reste est ce normal que je me casse la tête avec css ou alors c'est juste moi qui suis nul ? Par exemple, je ne ressent pas du tout la même difficulté avec PHP et MySQL ou encore Python...

Merci d'avance