How to position these elements in a List

Asked

Viewed 95 times

1

Hello

I’m making a simple product page but I’m having some difficulties in positioning the elements as well as in the print below:

First I was using attributes like: Left: ?? px; bottom: ?? px; ,but it did not work very well, because the site was getting spaces where they were not like the print below:

Example of how I was doing:

<div class="3row">
  <section>
    <h2 class="TituloP1" style="position: relative; bottom: 2850px; left: 250px; font-size: 25px;">Kit Cirúrgico 20g para Implante</h2>
    <img src="images/Rolete_de_Algodao.jpg" style="position: relative; border-style: solid; border-color: #BE1E2D; border-width: 1px; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; width: 350px; bottom: 2930px; left: 100px;"
    />
  </section>
  <section>

  </section>
  <section>
    <h2 class="precodPor" style="color: #BE1E2D;font-size: 25px; position: relative; bottom: 3020px; left: 305px;">R$25,84</h2>
  </section>
  <section>
    <a href="Adesivo_Magic_Bond_Esmalte.html" class="button style1" style="position: relative; bottom: 3070px; left: 240px;">Ver detalhes</a>
  </section>
</div>

Spaces that were too much:

inserir a descrição da imagem aqui

Searching the internet I found this code that would position the elements using Ul and Li

CSS and HTML: 

margin: 0;
    /* removendo margin padrão */
    padding: 0;
    /* Removendo padding padrão */
    text-align: center;
    }

    li {
    display: inline-block;
    width: 45%;
    }

    .left {
    background-color: White;
    }

    .right {
    background-color: White;
    }
<ul class="produtos">
        <li class="left half">
            <h2 style="text-align: center; font-size: 25px;">Silicone de condesação Perfil</h2>
            <img src="images/Silicone_de_Condensacao.jpg" style="border-style: solid; border-color: #BE1E2D; border-width: 1px; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; width: 350px;">
            <h2 style=" text-decoration: line-through; color: gray;">R$179,99</h2>
            <h2 class="precodPor" style="color: #BE1E2D;font-size: 25px;">R$166,00</h2>
            <a href="Silicone_de_condesacao_Perfil.html" class="button style1" >Ver detalhes</a>
        </li>
        <li class="right half">
            <h2 style="text-align: center; font-size: 25px;">Alginato Algi-Gel</h2>
            <img src="images/Alginato-Gel_2.jpg" style="border-style: solid; 
       border-color: #BE1E2D; 
       border-width: 1px; 
       margin-top: 100px; 
       margin-bottom: 100px; 
       margin-right: 150px; 
       margin-left: 80px; width: 350px;">
       <h2 class="precodPor" style="
         color: #BE1E2D;
         font-size: 25px;">R$12,50</h2>
       <a href="Alginato_Algi-Gel.html" class="button style1">Ver detalhes</a>
        </li>
    </ul>

The result was getting like this, but I want to center the texts and buttons with the image:

Reparem que as imagens e os titulos estão desalinhados

What I could edit on the titles and button to position them the way I need?

css html5

  • You could use the bootstrap! I always use it because it saves a lot of development time and makes your site responsive!

  • I’m still a basic programmer, what do you mean ?

  • Try to learn through video lessons on youtube search for bootstrap! This is the official website of bootstrap http://getbootstrap.com/components/

  • I will certainly learn, but I need to finish this page of the site today, would help me to position the elements??

  • I made the code just for two images

1 answer

2


List : 

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>

        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Blog</title>
        <style>
            body{

                margin: 0; /* removendo margin padrão */
                padding: 0; /* Removendo padding padrão */
                text-align: center;
            }
            img {
                border-radius: 8px;
            }


            .left {
                float: left;
            }

            .right {
                float: right;
            }
            .formata-imagem{
                border-style: solid; 
                border-color: #BE1E2D; 
                border-width: 1px; 
                margin-top: 100px; 
                margin-bottom: 100px; 
                margin-right: 150px; 
                margin-left: 80px; width: 350px;
            }
            .formata-p{
                text-decoration: line-through; color: gray;
            }
            .formata-h2{
                color: #ac2925;
            }
            .precodPor{
                color: #BE1E2D;font-size: 25px;
            }
            .nome-produto{
                text-align: center; font-size: 25px;
            }
            .button{
                background-color: #ac2925; /* Green */
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
            }
             ul {
     list-style-type:none
 }
        </style>
    </head>

    <body>
        <div class="conteiner">
            <ul>
                <li class="left">
                      <h2 class="nome-produto">Silicone de condesação Perfil</h2>

                <img src="images/Alginato-Gel_2.jpg" class="formata-imagem">
                <p class="formata-p">R$179,99</p>

                <h2 class="precodPor">R$166,00</h2>
                <a href="Silicone_de_condesacao_Perfil.html" class="button" >Ver detalhes</a>  
                </li>
                <li  class="right">

                     <h2 class="nome-produto">Alginato Algi-Gel</h2>
                <img src="images/Silicone_de_Condensacao.jpg" class="formata-imagem">
                <h2 class="precodPor">R$12,50</h2>
                <a href="Alginato_Algi-Gel.html" class="button">Ver detalhes</a> 
                </li>
            </ul>


            </div>
        </div>
    </body>
</html>

Using two Divs!!

 <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8"/>

            <meta name="viewport" content="width=device-width, initial-scale=1" />

            <title>Blog</title>
            <style>
                body{

                    margin: 0; /* removendo margin padrão */
                    padding: 0; /* Removendo padding padrão */
                    text-align: center;
                }
                img {
                    border-radius: 8px;
                }


                .left {
                    float: left;
                }

                .right {
                    float: right;
                }
                .formata-imagem{
                    border-style: solid; 
                    border-color: #BE1E2D; 
                    border-width: 1px; 
                    margin-top: 100px; 
                    margin-bottom: 100px; 
                    margin-right: 150px; 
                    margin-left: 80px; width: 350px;
                }
                .formata-p{
                    text-decoration: line-through; color: gray;
                }
                .formata-h2{
                    color: #ac2925;
                }
                .precodPor{
                    color: #BE1E2D;font-size: 25px;
                }
                .nome-produto{
                    text-align: center; font-size: 25px;
                }
                .button{
                    background-color: #ac2925; /* Green */
                    border: none;
                    color: white;
                    padding: 15px 32px;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                    font-size: 16px;
                }
            </style>
        </head>

        <body>
            <div class="conteiner">

                <div class="left">
                    <h2 class="nome-produto">Silicone de condesação Perfil</h2>

                    <img src="images/Alginato-Gel_2.jpg" class="formata-imagem">
                    <p class="formata-p">R$179,99</p>

                    <h2 class="precodPor">R$166,00</h2>
                    <a href="Silicone_de_condesacao_Perfil.html" class="button" >Ver detalhes</a>
                </div>
                <div  class="right">
                    <h2 class="nome-produto">Alginato Algi-Gel</h2>
                    <img src="images/Silicone_de_Condensacao.jpg" class="formata-imagem">
                    <h2 class="precodPor">R$12,50</h2>
                    <a href="Alginato_Algi-Gel.html" class="button">Ver detalhes</a>
                </div>
            </div>
        </body>
    </html>

Try to learn bootstrap :) !!!!

  • 1

    Thank you very much, I’ll finish here.

  • Very well, it was nothing!! Try to keep your css code separate from the html source, so it’s more organized, so you only call the classes you need in the html page.

  • 1

    'Cause I’ll try, that was a desperate attitude kk

Browser other questions tagged css html5

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