How to position these elements in a List

Question

How to position these elements in a List

Navigation

#1 by (2 votes)

1

Hello

I'm making a simple product page, but I'm having some difficulties when positioning the elements as in the print below:

Firstly 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 over:

SearchingtheinternetIfoundthiscodethatwouldpositiontheelementsusingUlandLi

CSSandHTML:

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 text and buttons with the image:

What could I edit in the titles and the button so I can position them the way I need them?

html5 css

asked by anonymous 24.04.2017 / 21:16

1 answer

Why does: hover not work this way? Relationship 1: N using EF using Data Anotation

score 2 · Accepted Answer

With 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 the bootstrap :) !!!!