Margem

Front-end
#1

Boa tarde, jovens.

Estou iniciando os meus estudos em html5 e estou me deparando com algumas dificuldades.
Consegui corrigir a margem de algumas partes da página, mas não consigo corrigir a margem dos menus desse nav.

a tecnologia que estou usando é o framework bootstrap 5.

minha necessidade é “empurrar” os menus um pouco mais para direita .
gostaria que ele começasse exatamente na letra O da palavra " todas as notícias".

segue o print abaixo e segue o código através do link
http://dontpad.com/omenu

#2

Boa noite. O costume aqui no fórum é ninguém acessar links externos, por segurança.

Cola aqui o código e o print, que a gente te ajuda.

Obrigado

1 curtida
#3

Boa noite, Fefo, peço desculpas pelo erro. Confesso que talvez eu desconhecia esta regra por não ter lido regras do site, mas prometo não repetir. Agradeço desde já a observação.

Segue o print e o código abaixo:

print:

image
image.jpg1366×768 203 KB

código:

<head> 

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Fale conosco</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <link rel="stylesheet" href="css/style.css">

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">

</head> 



<body>

    <header class="header"> <!--início do header-->

        <nav class="navbar navbar-expand-lg navbar-light">

            <div class="container-fluid">

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">

                    <span class="navbar-toggler-icon"></span>

                </button>

           

            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

                       <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                        <li class="nav-item">

                        <a class="nav-link active" aria-current="page" href="index.html" style="color: white;">HOME</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="pages/todas-noticias.html" style="color: white;">TODAS AS NOTÍCIAS</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="pages/economia-covid.html" style="color: white;">ECONOMIA X COVID19</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="pages/entrevistas.html" style="color: white;">ENTREVISTAS</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="pages/fale-conosco.html" style="color: white;">FALE CONOSCO</a>

                    </li>

                </ul>                                        

                    <form class="d-flex">

                    <input class="form-control me-2" type="search" placeholder="Pesquisar" aria-label="Search">

                    <button class="btn btn-outline-success" type="submit">Pesquisar</button>

                    </form>

            </div>

            </div>

        </nav>

    </header>  <!--Fim header-->       

</body>    

            

<body>    

    <div class="container-expand"> <!--Início do banner-->

    <img src="bannerfaleconosco.png" class="img-thumbnail" alt="Bannerfaleconosco" width="4001" height="626"> 

    </div>

</body> <!--Fim do banner-->

        
                

<!-- Inicio do formulário -->      

<body>                  

    <div class="container-md">                    

        <div class="col-md-5 ml-auto">

            <br>

            <br>

            <label for="formGroupExampleInput" class="form-label">Nome e sobrenome</label>

            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Digite o seu nome e sobrenome">

            <br>                        

            <label for="formGroupExampleInput2" class="form-label">Email</label>

            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Digite o seu email">                    

            <br>                            

            <label for="formGroupExampleInput2" class="form-label">Celular/Whatsapp</label>

            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Digite o seu número de celular ou whatsapp">  

            <br>                                

            <label for="formGroupExampleInput2" class="form-label">Cidade</label>

            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Digite a cidade em que você reside">

            <br>                        

            <label for="formGroupExampleInput2" class="form-label">Estado</label>

            <select class="form-select" aria-label="Default select example">

                <option selected>Selecione o Estado</option>

                <option value="AL">Alagoas</option>

                <option value="AP">Amapá</option>

                <option value="AM">Amazonas</option>

                <option value="BA">Bahia</option>

                <option value="CE">Ceará</option>

                <option value="DF">Distrito Federal</option>

                <option value="ES">Espirito Santo</option>

                <option value="GO">Goiás</option>

                <option value="MA">Maranhão</option>

                <option value="MS">Mato Grosso do Sul</option>

                <option value="MT">Mato Grosso</option>

                <option value="MG">Minas Gerais</option>

                <option value="PA">Pará</option>

                <option value="PB">Paraíba</option>

                <option value="PR">Paraná</option>

                <option value="PE">Pernambuco</option>

                <option value="PI">Piauí</option>

                <option value="RJ">Rio de Janeiro</option>

                <option value="RN">Rio Grande do Norte</option>

                <option value="RS">Rio Grande do Sul</option>

                <option value="RO">Rondônia</option>

                <option value="RR">Roraima</option>

                <option value="SC">Santa Catarina</option>

                <option value="SP">São Paulo</option>

                <option value="SE">Sergipe</option>

                <option value="TO">Tocantins</option>

            </select>

            <br>                

            <label for="exampleFormControlTextarea1" class="form-label">Mensagem</label>

            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

            <br>

            <div class="d-grid gap-2 d-md-block">

                <button class="btn btn-primary" type="button">Enviar</button>

                <br>

                <br>

                <br>

                <br>

            </div>

        </div>

    </div> 

</body> <!--Fim do formulário -->

<body> 

    <footer class="footer footer-expand-lg"> <!--Início do Footer-->

        <div class="text-white">

            <div class="col" style="background:#162e47">

                <div class="container-md">                    

                    <div class="col-md-5 ml-auto"></div>

                        <br>

                        <h2>Site de Educação Financeira</h2>

                        <p>O site que te ajuda a criar consciência sobre as suas finanças.</p>

                        <br>

                        <br>

                                

                <div class="row align-items-start">

                    <div class="col">

                        INSTITUCIONAL

                        <br>

                        <p>Quem somos</p>

                        <p>Termos de uso</p>

                    </div>

                    <div class="col">

                        CONTEÚDO

                        <br>

                        <p>Todas as Notícias</p>

                        <p>Economia x Covid19</p>

                        <p>Entrevistas</p>

                        <p>Dicas dos ícones da Economia</p>

                        <p>Bancos com menores juros</p>

                        <p>Planilhas diversas</p>

                        <p>Cursos gratuitos de finanças</p>

                    </div>

                    <div class="col">

                        CENTRAL DE AJUDA 

                        <br>

                        Fale conosco

                    </div>

                </div>

            </div>    

        </div>

    </footer> <!--Fim do Footer-->

</body>
#4

Coloca um id ou classe na div do seu formulário. E no css coloca a propriedade margin-left e vá testando os valores.

2 curtidas
#5

Eu ainda não sei desenvolver em css.
Não sei como fazer isso. Mas, agradeço a sua atenção .

vou tentar . Obrigada !

#6

Oi Lany, tudo bom? Bora lá. Vamos pegar seu menu

<ul class="navbar-nav me-auto mb-2 mb-lg-0">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="index.html" style="color: white;">HOME</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" href="pages/todas-noticias.html" style="color: white;">TODAS AS NOTÍCIAS</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" href="pages/economia-covid.html" style="color: white;">ECONOMIA X COVID19</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" href="pages/entrevistas.html" style="color: white;">ENTREVISTAS</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" href="pages/fale-conosco.html" style="color: white;">FALE CONOSCO</a>
  </li>

</ul>

Não entendi bem a finalidade de dar um margin direto na letra O, mas vamos prosseguir, o CSS é tranquilo de se mexer, só assusta, mas é tranquilo.

Vamos supor que vc quer dar uma margem pra direita, então use:

seletor {
    propriedade: valor;
}

*seletor é o nome da classe, id, ou component

Pra “declarar” uma classe vc usa um ponto final: .nome-da-classe
Pra “declarar” um id vc usa um hashtag: #id_de_alguma_coisa
Pra “declarar” um “componente” vc usa o que ele é mesmo, tipo: div ou input…

Detalhe: é preciso usar ponto e vírgula após declarar o valor das propriedades. (Propriedade é a estilização q vc quer passar, tipo: margin-right)

seletor {
    margin-right: 10px;
}

Agora vc quer trazer algum item pro lado esquerdo,

seletor {
    margin-left: 10px;
}

Simples, certo?

Agora vamos fazer de acordo com o que vc quer.

<a class="nav-link" href="pages/todas-noticias.html" style="color: white;">
  <span class="minha-classe">TO</span>DAS AS NOTÍCIAS
</a>

Adicionei um SPAN dentro do seu texto: dentro de TO (vc nao disse qual letra O era pra usar, então considerei essa msm)

agora pra vc usar isso lá no CSS, faz assim

.minha-classe {
   margin-right: 10px;
}

image
image.png903×106 3.87 KB

Veja como ele acrescentou um espaço lá depois da letra O. Para controlar este margin, basta ajustar o valor da propriedade (ah, vc pode usar valores negativos também, ex: -5px)

No início é mais aconselhável vc usar px como unidade de medida mesmo, quando se aprofundar pode escolher outras…

Um abraço, se ficar com dúvida manda aqui que a gente dá uma força :wink:

2 curtidas
#7

Lany, no w3schools tem um exemplo de borda com div

https://www.w3schools.com/tags/tag_div.ASP

Isso pode te ajudar.

2 curtidas
#8

Excelente. Parabéns pela aula.

2 curtidas
#9

Opa obrigadão, quem sabe um dia :smile:

1 curtida
#10

Pelo que eu entendi, ela quer que o menu inteiro comece onde atualmente está a letra O. Então não seria um margin na letra, foi só um ponto de referência.
Acho que é só um margin-left normal no nav.

2 curtidas
#11

Nossa, verdade. Nem tinha pensado assim, valeu!!

2 curtidas
#12

obrigada pelo artigo , Fefo. Estou vendo.

1 curtida
#13

Olá, Roinuj Nosde
Exatamente isso , jovem que vc falou. Segue o print

image
image.png1366×768 167 KB

#14

Obrigada pela sua paciencia em ensinar, vc foi bastante didático.
o resultado é quase esse aí que você me passou.

image
image.png1366×768 167 KB

1 curtida
#15

obrigada pela dica.
vejo que preciso começar a estudar o css. valeu

#16

jovem, eu estou lendo o seu artigo e as suas explicações, pois, apesar de não gerar exatamente o resultado que eu quero, o raciocínio que vc explicou é válido para o que estou precisando. Então,seu post não foi descartado, pelo contrário, foi util bastante . muito obrigada!

1 curtida
#17

Acho que no seu caso fica:

nav {
    margin-left: 20px;
}

(O valor vc vai testando)

1 curtida
#18

Jovens , boa noite.
Como é que eu faço para abaixar esse menu e todo este conteúdo da página?

image
image.jpg1366×768 203 KB

o resultado que eu quero produzir é este aqui:

image
image.png1366×768 57.9 KB

Quero descer a margem, porque eu gostaria de começar a página com um intervalo em branco, porque quero inserir um logotipo. E em seguida, dar continuidade ao navbar, ao banner, ao fomulario etc.

Eu sabia fazer isso, mas eu esqueci completamente.

segue o código html:

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>fale-conosco</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"

        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <link rel="stylesheet" href="../css/style.css">

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">

</head>

<body>

  

<header class="header" ><!--Inicio header-->

    <nav class="navbar navbar-expand-lg navbar-light">

        <div class="container-fluid">

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"

                data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false"

                aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

            

            <div class="menu">

                <ul>

                    <li>

                        <a  href="../index.html">HOME</a>

                    </li>

                    <li>

                        <a href="./todas-noticias.html"> TODAS AS NOTÍCIAS</a>

                    </li>

                    <li>

                        <a href="./economia-covid.html">ECONOMIA X COVID19</a>

                    </li>

                    <li>

                        <a href="./entrevistas.html">ENTREVISTAS</a>

                    </li>

                    <li>

                        <a href="./fale-conosco.html">FALE CONOSCO</a>

                    </li>

                </ul>

            </div>

                <form class="d-flex">

                    <input class="form-control me-2" type="search" placeholder="Pesquisar" aria-label="Search">

                    <button class="btn btn-outline-success" type="submit">Pesquisar</button>

                </form>

            </div>

        </div>

    </nav>

</header> <!--Fim header-->

<main>

    <div class="container-expand">

<!--Início do banner-->

    <img src="../img/bannerfaleconosco.png" class="img-thumbnail" alt="Bannerfaleconosco" width="4001" height="626">

    </div>

    <!--Fim do banner-->

    <!-- Inicio do formulário -->

    <div class="container-md ">

    <div class="col-md-5 ml-auto">

        <br>

        <br>

        <label for="formGroupExampleInput" class="form-label">Nome e sobrenome</label>

        <input type="text" class="form-control" id="formGroupExampleInput"

            placeholder="Digite o seu nome e sobrenome">

        <br>

        <label for="formGroupExampleInput2" class="form-label">Email</label>

        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Digite o seu email">

        <br>

        <label for="formGroupExampleInput2" class="form-label">Celular/Whatsapp</label>

        <input type="text" class="form-control" id="formGroupExampleInput2"

            placeholder="Digite o seu número de celular ou whatsapp">

        <br>

        <label for="exampleFormControlTextarea1" class="form-label">Mensagem</label>

        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

        <br>

        <div class="d-grid gap-2 d-md-block">

            <button class="btn btn-primary" type="button">Enviar</button>

            <br>

            <br>

            <br>

            <br>

        </div>

    </div>

    </div>

    <!--Fim do formulário -->

            <!--Inicio Vlibras-->

            <div vw class="enabled">

                <div vw-access-button class="active"></div>

                    <div vw-plugin-wrapper>

                  <div class="vw-plugin-top-wrapper"></div>

                </div>

            </div>

              <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>

              <script>

                new window.VLibras.Widget('https://vlibras.gov.br/app');

              </script>

            <!--Fim Vlibras-->

    

</main>

<!--Inicio footer-->

<footer class="bg-light text-start text-dark pt-5 pb-4 mt-4">

    <div class="container text-md-start">

        <div class="row  text-md-start">

            <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">

                <h5 class="text-uppercase mb-4 font-weight-bold text-info">

                    Sobre nós

                </h5>

                <hr class="mb-4">

                <p>

                    O site que te ajuda a criar consciência financeira e obter informações sobre economia de forma descomplicada.

                </p>

            </div>

            <!--Link das Paginas-->

            <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">

                <h5 class="text-uppercase mb-4 font-weight-bold text-info">

                    Páginas

                </h5>

                <hr class="mb-4">

                <p>

                    <a href="index.html" class="text-dark" style="text-decoration: none">Home</a>

                </p>

                <p>

                    <a href="pages/todas-noticias.html" class="text-dark" style="text-decoration: none">Todas as

                        Notícias</a>

                </p>

                <p>

                    <a href="pages/entrevistas.html" class="text-dark" style="text-decoration: none">Entrevistas</a>

                </p>

                <p>

                    <a href="pages/economia-covid.html" class="text-dark" style="text-decoration: none">Economia X

                        Covid</a>

                </p>

                <p>

                    <a href="pages/fale-conosco.html" class="text-dark" style="text-decoration: none">Fale

                        Conosco</a>

                </p>

            </div>

            <!--//Link das Paginas-->

            <!--Contact-->

            <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">

                <h5 class="text-uppercase mb-4 font-weight-bold text-info">Contato</h5>

                <hr class="mb-4">

                <p>

                    Salvador, Bahia - Brasil

                </p>

                <br>

                <p>

                    financeiramente2021@gmail.com

                </p>

                <br>

                <p>

                    +55 71 90000-0000

                </p>

            </div>

            <!--//Contact-->

            <hr class="mb-4">

            <div class="row d-flex justify-content-center text-center">

                <p>

                    Copyright 2021 © Todos os direitos reservados por

                    <a href="#" style="text-decoration: none;">

                        <strong class="text-info">Financeiramente</strong></a>

                </p>

            </div>

        </div>

        <div class="row d-flex justify-content-center">

            <div class="text-center">

                <ul class="list-unstyled list-inline">

                    <li class="list-inline-item">

                        <a href="#" class="text-dark"><i class="fab fa-instagram"></i></a>

                    </li>

                    <li class="list-inline-item">

                        <a href="#" class="text-dark"><i class="fab fa-whatsapp"></i></a>

                    </li>

                    <li class="list-inline-item">

                        <a href="#" class="text-dark"><i class="fab fa-youtube"></i></a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

</footer>

<!--Fim Footer-->

segue o código css:

/*

    Estilizando o header

*/

body,header,body{

    font-family: 'Open Sans', sans-serif;

}

.header{

    background: #162E47;

        

}

.menu ul li {

    display: inline-block;

    color: #ffffff;

    margin-left: 35px;     

    height: 20px;

    margin-top: 15px;

}

.menu ul li:hover {

    border-bottom: 3px solid #00bac6;

}

.menu ul li a:hover {

    color: #00bac6;

    

}

.menu ul li a {

    color: #ffffff;

    text-decoration: none;

    font-size: 17px;

    text-transform: uppercase;

}

.menu {

width: 70%;

float: left;

}

.nav-item .nav-link{

    font-weight: bold;

    color: white;

}

.alto-contraste{

    margin-right: 10px;

}

/* 

    Estilizando o main

*/

/*

    Banner Principal

*/

#banner{

    margin-top: 10px;

    align-content: center;

}

#banner-principal{

   width: 600px;

   height: 400px;

   background: #206494;

   float: left;

}

.titulo-banner-principal{

    font-weight: bold;

    color: white;

    font-size: 23px;

    margin-top: 5px;

    margin-left: 10px;

}

/*

    Sub banner

*/

.sub-imagens{

    width: 100px;

    height: 100px;

    display: inline-block;

}

.sub-titulo{

    display: inline-block;

}

/*

   Estilizando Rodape 

*/

.rodape{

    margin-top: 100px;

    

    width: 100%;

    background: #162E47;

}

.titulo-grid-radape{

    color: white;

    margin-top: 5px;

}

.sub-titulo{

    color: white;

    

}

/*

    Estilizando formulario

*/

.formulario{

    margin-top: 50px;

}

.fundo-preto-branco{

    background: black;

    color: blue;

}

/*

    Estilizando calculadora

*/

.calculadora{

    margin-top: 200px;

}

/*

    Estilizando Todas Noticias

*/

.box {

    transition: box-shadow .3s;

    width: 700px;

    height: 150px;

    margin: 50px;

    border-radius:20px;

    background: rgb(202, 201, 201);

    float: center;

    

  }

  .box:hover {

    box-shadow: 0 0 20px rgba(80, 79, 79, 0.2); 

  }

 .box a {

    color: #11694c;

    text-decoration: none;

    font-size: 18px;

    text-transform: uppercase;

}

Desde já agradeço a atenção.

#19

Testou o básico, de usar </br> ?

1 curtida
#20

Eu testei , mas talvez eu tenha testado da maneira errada.
usei apenas o <br>
Eu não me atentei para o detalhe do </br>.
valeu a dica.

1 curtida