-3
votes

Écrire deux paragraphes, ceux-ci sont espacés! je ne sais pas pourquoi

Écrire deux paragraphes, ceux-ci sont espacés. Mes paragraphes sont très loin et je ne comprends pas pourquoi.

J'ai essayé de dissuader les fichiers CSS, entre les deux paragraphes, il y avait une ligne vide: manquante dans le code. P>

Ma page: P>

    *{
    margin: 0;
    height: 100%;
        }

        .title{
            color: #2d3436;
            text-align: center;
            text-shadow: 3px 2px #b2bec3;
            font-size: 50px;
            font-weight: bold;
        }

        .content{
            color: #2d3436;
            text-align: center;
            text-shadow: 2px 1px #b2bec3;
            font-size: 25px;
            font-weight: lighter;
        }

        hr {
            width: 95%;
            height: 2px;
            margin-left: auto;
            margin-right: auto;
            background-color:#666;
            border: 0 none;
            margin-top: 20px;
            margin-bottom:20px;
        }

        .space{
            height: 100px;
        }

        .dark{
            margin: auto;
            padding: 20px;
            background: #000;
            color: #fff;
            width: 85%;
            height: 80px;
        }

        .sharp{
            margin: auto;
            padding: 20px;
            background: #fff;
            border-radius: 25px;
            border: 1px solid #dfe4ea;
            width: 85%;
            box-shadow: 5px 10px 8px #888888;
        }

        body{
            width: 100%;
            background-image: linear-gradient(45deg,#ced6e0,#ced6e0);
            background-repeat: no-repeat;
            background-size: 4000px 4000px;
        }

        .img-container{
            background-image: url(../data/images/hero.png);
            height: 70%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            z-index:1;
        }

        .inner-container{
            text-align: center;
            width: 100%;
            color: #fff;
            position: absolute;
            height: auto;
            margin-top: 200px;
        }

        h1{
            font-size: 7em;
            font-family: "Shadows into Light", Sans Serif;
        }

        h2{
            margin-top: -17px;
            font-family: "Source Sans Pro", Sans Serif;
            font-size: 1.7em;
            text-align: center;
            font-weight:400;
        }

        a{
            margin-top: 20px;
            font-size: 1.3em;
            font-family: "Source Sans Pro", Sans Serif;
        }

        .btn{
            display: inline-block;
            width: 200px;
            font-weight: bold;
            padding: 10px;
            color: #fff;
            border: 4px solid #fff;
            text-align: center;
            outline: none;
            text-decoration: none;
            transition: background-color 0.2s ease-out, color 0.2s ease-out;
        }

        .btn:hover,.btn:active{
            background-color: #fff;
            color: #000;
            transition: background-color 0.3s ease-in, color 0.3s ease-in;
        }

        @media only screen and (max-width: 920px){
            .inner-container{
                margin-top: 100 px;
            }
        }

        @media only screen and (max-width: 540px){
            .inner-container{
                margin-top: 150px;
            }
            h1{
                font-size: 5em;
            }
            h2{
                font-size: 1.4em;
            }


0 commentaires

3 Réponses :


1
votes

En écrivant * {Hauteur: 100%} Dans votre CSS, vous le direz de faire chaque élément (AKA *) Prendre 100% de la hauteur disponible. Ce faisant, votre premier paragraphe prend toute la hauteur qu'il peut, en poussant le second tout en bas.

Si le seul élément que vous souhaitez assurer a une hauteur de 100% est l'arrière-plan blanc, considérez le coiffant individuellement.


2 commentaires

L'élément qui a besoin d'une hauteur de 100% est l'image héros au sommet ... idk où je peux déplacer la ligne .... La page est Crodatttilodev.altervista.org/new si vous voulez voir.


Au lieu d'assigner à 100% de hauteur à tout, puis à redimensionner votre élément héros pour la réduire à 70%, vous pouvez envisager de spécifier une hauteur sur le héros (ici, votre conteneur IMG). Avec l'absence de parent immédiat pour le héros (autre que votre corps), le dimensionnez en% ne fonctionnera pas. Pensez à utiliser des pixels ou VH (ViewPort-Height).



1
votes

La partie

*{
   height: 100%;
}


0 commentaires

0
votes

problème résolu en donnant xxx

aux paragraphes.


0 commentaires