How can I make the last two boxes move to the right without changing at all the content within them?

Question

How can I make the last two boxes move to the right without changing at all the content within them?

Asked 3 years, 8 months ago

Viewed 36 times

0

[![

CÓDIGO CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url("imagens/imgfundo.jpg");
    background-attachment: fixed;
    width: 100%;
}

header {
    width: 100%;
    background-color: rgb(202, 212, 238);
}

.foto1 {
    position: absolute;
    top: 5px;
    left: -200px;
    width: 23%;
}

#header {
    margin: auto;
    position: relative;
    height: 225px;
    width: 940px;
}

#titulo {
    display: inline-block;
    font-family: New Century Schoolbook, TeX Gyre Schola, serif;
    color: #1552a7;
    text-align: center;
    font-size: 80px;
    position: absolute;
    top: 67px;
    left: 260px;
}

#slogan {
    display: inline-block;
    font-family: New Century Schoolbook, TeX Gyre Schola, serif;
    color: #010914;
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 160px;
    left: 340px;
}

nav {
    position: absolute;
    top: 55px;
    right: -250px;
}

nav li {
    list-style-type: none;
}

nav a {
    font-family: New Century Schoolbook, TeX Gyre Schola, serif;
    font-size: 25px;
    color: #1552a7;
    text-decoration: none;
}

nav a:hover {
    color: #0199FF;
}

footer {
    width: 100%;
    background-color:rgb(202, 212, 238);
}

#footer {
    margin: auto;
    position: relative;
    height: 225px;
    width: 820px;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0.75% 1.5%;
    padding: 30px 10px;
    box-sizing: border-box;
    border:3px solid #000000;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    background-color:rgb(202, 212, 238);
}

.produtos h2 {
    font-size: 18px;
    font-weight: bold;
}

.produto-descricao {
    font-size: 15px;
}

.produtos li:hover {
    border-color:  #1552a7;
}

.pfooter {
    padding-top: 200px;
    text-align: center;
    text-decoration: underline;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
}

.foto {
    position: absolute;
    top: 40px;
    left: 342px;
    width: 17%;
}

CÓDIGO HTML:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Plast Golden - Outros Produtos</title>
    <link rel="shortcut icon" href="imagens/logo.png" type="image/x-png" />
    <link rel="stylesheet" type="text/css" href="outrosprodutos.css" />
</head>

<body>
    <header>
        <div id="header">
            <img class="foto1" src="imagens/Logo.png">
            <h1>
                <p id="titulo">Plast Golden</p>
                <p id="slogan">26 anos de tradição & qualidade</p>
            </h1>
            <nav>
                <ul>
                    <h6>
                        <li> <a href="home.html">Home</a> </li>
                        <li> <a href="produtos.html">Produtos</a></li>
                        <li><a href="outros produtos.html">Outros Produtos</a></li>
                        <li> <a href="contato.html">Contato/Informações</a> </li>
                    </h6>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div class="produtos">
            <ul class="produtos">
                <li>
                    <h2>SOLDA - Eletrodos, Arames, Varetas Diversas, Tochas, Maçaricos, Reguladores e Acessórios em geral:</h2>
                    <img src="imagens/j6.PNG">
                </li>
                <li>
                    <h2>CORTE - Alargadores, Brocas, Ferramenta soldada , Fresas, Machos, Cossinetes, Pastilhas deVidia, Fresa md, Roscas Postiças e Acessórios:</h2>
                    <img src="imagens/j3.png">
                </li>
                <li>
                    <h2>APERTO - Alicates, Chaves, Martelos, Punções, Saca pino, Tesouras e outras:</h2>
                    <img src="imagens/j1.PNG">
                    <p class="produto-descricao">Também na linha Anti-Faiscante.</p>
                </li>
                <li>
                    <h2>FERRAMENTAS  ELÉTRICAS - Furadeiras, Politrizes, Esmerilhadeiras, Serras, Circulares e outras:</h2>
                    <img src="imagens/j5.png">
                </li>
                <li>
                    <h2>ABRASIVOS - Discos, Cintas de lixa, Rebolos, Lixas, Rodas Pg, Mini Kontour e outras:</h2>
                    <img src="imagens/j2.PNG">
                </li>
                <li>
                    <h2>MEDIÇÃO - Calibres, Paquímetros, Micrometros, Relógios, Traçadores de altura e outras:</h2>
                    <img src="imagens/j4.PNG">
                </li>
                <li>
                    <h2>MARCAS:</h2>
                    <img src="imagens/j7.PNG">
                </li>
                <li>
                    <h2>MARCAS:</h2>
                    <img src="imagens/j8.PNG">
                </li>
            </ul>
        </div>
    </main>

]2]2

The author’s comment in my reply clarifies his doubt better. Instead of moving the boxes to the right, he wants to center them so that there is not so much empty space on the right or on the left.

– Felypp Oliveira

2021/01/05 at 17:54

1 answer

Browser other questions tagged html css

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

by Felypp Oliveira • **126** points · Answer 1 · 2021-01-05T16:51:13+00:00

On the line of the last two boxes, you want the second to move to the empty position and the first to move to the position of the second, leaving empty the first position of the line, right?

In this case, I recommend you use the property text-align. You will set for the ul the value right and for the li the value left. Thus, each item in the list will be moved to the right (if there is space) but will keep its contents aligned to the left.

Look at this example:

ul{
  font-size: 0px;
  border: 1px solid green;
  padding-top: 3px;
  padding-left: 3px;
  
  /* defina a largura da lista para caber no máximo 3 itens */
  width: 165px; 
  /* defina o posicionamento do conteúdo à direita */
  text-align: right; 
}

li{
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
  height: 50px;
  border: 1px solid gold;
  margin-bottom: 3px;
  margin-right: 3px;
  
  /* defina a largura do item para que caibam no máximo 3 na largura da lista */
  width: 50px; 
  /* defina o posicionamento do conteúdo à esquerda */
  text-align: left;
}

<div class="produtos">
  <ul>
    <li>Box1</li>
    <li>Box2</li>
    <li>Box3</li>
    <li>Box4</li>
    <li>Box5</li>
  </ul>
</div>

COMPLEMENTING

The author’s comment in my reply clarifies his doubt better. Instead of moving the boxes to the right, he wants to center them so that there is not so much empty space on the right or on the left.

In this case, instead of defining the text-align of ul as right, define it as center.

See this example, identical to the previous one, except for the change in the cited property:

ul{
  font-size: 0px;
  border: 1px solid green;
  padding-top: 3px;
  padding-left: 3px;
  
  /* defina a largura da lista para caber no máximo 3 itens */
  width: 165px; 
  /* defina o posicionamento do conteúdo no centro */
  text-align: center; 
}

li{
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
  height: 50px;
  border: 1px solid gold;
  margin-bottom: 3px;
  margin-right: 3px;
  
  /* defina a largura do item para que caibam no máximo 3 na largura da lista */
  width: 50px; 
  /* defina o posicionamento do conteúdo à esquerda */
  text-align: left;
}

<div class="produtos">
  <ul>
    <li>Box1</li>
    <li>Box2</li>
    <li>Box3</li>
    <li>Box4</li>
    <li>Box5</li>
  </ul>
</div>