Problem with text alignment

Asked

Viewed 105 times

0

I’m doing a website, but he’s got this problem with spacing and photo alignment. Note that the "training" part is ok, but in the "food" part there is a problem in the text (even if justified). inserir a descrição da imagem aqui However the biggest problem is already in the third topic, to understand how the alignment of the text is completely wrong inserir a descrição da imagem aqui

The problem is that both are the same way and with the same values, since they are to be equal (only changes the name of the classes).

Paragraph code with the right image

.t1{
    font-family: "teko";
    font-size: 25pt;
    color: #7843e8;
    padding-left: 20%;
    padding-top: 8%;
}
.txt1{
    font-family: "roboto";
    text-align: justify;
    padding-top: 1%;
    padding-left: 20%;
    padding-right: 45%;
    line-height: 150%;


}
.imgtreino{
    width: 250px;
    height: 250px;
    position: relative;
    float: right;
    padding-right: 25%;
    bottom: 228px;

}
.btn1{
    font-family: "cabin";
    color: #7843e8;
    position: relative;
    top: 30px;
    padding: 10px 40px;
    margin-left: 20%;
    border:2px solid #7843e8 ;
    border-radius: 5px;
}

.btn1:hover{
    background-color: #7843e8;
    color: white;
    transition: .5s;

}

Paragraph code with left image

.t2{
    font-family: "teko";
    font-size: 25pt;
    color: #7843e8;
    margin-top: 10%;
    padding-left: 36%;
}
.txt2{
    font-family: "roboto";
    text-align: justify;
    padding-top: 1%;
    padding-left: 36%;
    padding-right: 30%;
    line-height: 150%;
}
.imgcomida{
    width: 250px;
    height: 250px;
    position: relative;
    float: left;
    padding-left: 16%;
    bottom: 228px;

}
.btn2{
    font-family: "cabin";
    color: #7843e8;
    position: relative;
    top: 30px;
    padding: 10px 40px;
    margin-left: 4%;
    border:2px solid #7843e8 ;
    border-radius: 5px;
}

.btn2:hover{
    background-color: #7843e8;
    color: white;
    transition: .5s;

}

I already tried to change the positions and it didn’t work

html code

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/mainT.css">
    <link rel="stylesheet" href="css/primeiro1.css">
    <link rel="stylesheet" href="css/segundo.css">
    <link rel="stylesheet" href="css/terceiro.css">
</head>
<body>
    <header>
        <div class="nav1">
            <img class ="img1" src="imagens/gym freepik - white.png">
            <ul>
                <li id="items1"><a href=""> Treino </a></li>
                <li id="items2"><a href=""> Comidas </a></li>
                <li id="items3"><a href=""> Sono </a></li>
                <li id="items4"><a href=""> Suplementos </a></li>
                <li id="items5"><a href=""> Ergogenicos </a></li>
            </ul>
        </div>
    </header>
    <div class="MainT">
        <p> Curso de Fisiculturismo </p>
    </div>
    <div class="primeiro">
        <p class="t1" id="lk1"> Treino </p>
        <p class="txt1">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel imperdiet nulla. Morbi in venenatis eros, at efficitur sapien. Maecenas rhoncus pellentesque dolor a vulputate. Ut varius velit faucibus nibh elementum, nec iaculis elit pharetra. Integer consectetur elit vitae condimentum venenatis. Sed nec augue accumsan, dignissim nulla tincidunt, maximus arcu. Nulla orci ligula, suscipit semper lacus at, consectetur scelerisque ligula.
        </p>
        <img src="imagens/treino hex.png" class="imgtreino">

        <a href="#" class="btn1"> VER MAIS</a>
    </div>
    <div class="segundo">
        <p class="t2" id="lk2"> Comidas </p>
        <p class="txt2">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna dui, sodales vel ligula ut, finibus tincidunt mauris. Nulla facilisi. Sed placerat et turpis ac suscipit. Aenean ac urna elementum velit ultrices pellentesque. Donec id vulputate ex, ut auctor enim. Donec dapibus nibh vitae magna facilisis, quis sollicitudin sem molestie. Nulla facilisi. Phasellus ac tincidunt nunc, nec imperdiet justo. Nunc lacus nunc, accumsan sit amet eleifend a, vestibulum vitae lorem. Nam venenatis molestie dui, a molestie mauris lacinia in. Integer sit amet faucibus risus, eget interdum leo.
        </p>
        <img src="imagens/alimen hex.png" class="imgcomida">

        <a href="#" class="btn2"> VER MAIS</a>
    </div>
    <div class="terceiro">
        <p class="t3" id="lk3"> Sono </p>
        <p class="txt3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum fringilla neque ut porttitor. Sed a porttitor lorem. Aenean vitae purus ut nisl laoreet feugiat nec vitae dolor. Phasellus vitae odio nisi. Fusce sit amet ex sit amet enim malesuada placerat sit amet ac purus. Quisque in velit sem. Quisque vel justo eget urna dapibus volutpat egestas id metus. Nam condimentum libero arcu, in volutpat lacus pretium sit amet. Nullam sit amet quam pretium, sagittis justo vel, eleifend diam. Pellentesque nec nulla eu quam ultricies lacinia. Praesent nec nisl sit amet purus congue finibus. Etiam orci orci, rutrum ac lacus nec, ultricies euismod neque. Donec finibus purus vel sollicitudin porttitor. Etiam massa tellus, sollicitudin ac odio at, congue tristique lorem.
        </p>
        <img src="imagens/sono hex.png" class="imgsono">

        <a href="#" class="btn3"> VER MAIS</a>
    </div>
</body>
</html>
html css html5 css3

  • Amigo e Cade o HTML?? Only with CSS makes it difficult to answer you, offer as little code as possible for us to simulate your problem

  • this in the post, had forgotten

  • 1

    Place .primeiro, .segundo, .terceiro{&#xA; clear: both;&#xA;} and see if it solves.

  • Friend sorry to say, but using float, and padding and margins type 20%, 40%, 1%, hardly your layout will work, and will probably get less responsive than you imagine. I would start from 0 using flex. But if you want to follow up with this idea (which for me will never work), look about Clearfix, it will partially solve your problem

  • It worked the clear Both Thank you very much

  • I’ll see about flex and see how I can change, I’m still at the beginning of the site

  • Lucas then is a great time to stop and not continue with something that will not work in the future. It’s just a tip...

Show 2 more comments

1 answer

2


Floats (left /right) is bad because the element, even being in another div, "pulls" also the elements of the adjacent div that has nothing to do with the story.

It is more recommended to use flexbox, that gives you more power to organize the elements and break still provides you to make more easily a responsive layout.

But to just solve your problem, apply the property clear: both in the Ivds. The clear will prevent elements from being positioned on both sides of the element:

.primeiro, .segundo, .terceiro{
   clear: both;
}

Not to mention that you could only use 1 class in CSS that have the same properties, avoiding repeated code that inflames the file. For example:

Instead of creating separate styles like this:

.btn1{
   color: red;
}

.btn2{
   color: red;
}

You could only use one class, since the two elements have the same property:

.btn{
   color: red;
}

In the case of float, which are different, you create separate classes for the property:

.f-right{
   float: right;
}

.f-left{
   float: left;
}

For example, the element left would have:

class="btn f-left"

And the one on the right would have:

class="btn f-right"

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.