Margem

24 de abril de 2021 24 respostas Resolvido

Lanytech 24 de abril de 2021

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

24 Respostas

Solucao aceita

Fefo80 24 de abr. de 2021 1 like

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

Lanytech 25 de abr. de 2021

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:

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/[email protected]/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>

RoinujNosde 25 de abr. de 2021 2 likes

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

Lanytech 27 de abr. de 2021

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

vou tentar . Obrigada !

rodriguesabner 27 de abr. de 2021 2 likes

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;
}

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

Fefo80 27 de abr. de 2021 2 likes

Lany, no w3schools tem um exemplo de borda com div

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

Isso pode te ajudar.

Fefo80 27 de abr. de 2021 2 likes

Excelente. Parabéns pela aula.

rodriguesabner 27 de abr. de 2021 1 like

Opa obrigadão, quem sabe um dia

RoinujNosde 27 de abr. de 2021 2 likes

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.

rodriguesabner 27 de abr. de 2021 2 likes

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

Lanytech 28 de abr. de 2021 1 like

obrigada pelo artigo , Fefo. Estou vendo.

Lanytech 28 de abr. de 2021

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

Lanytech 28 de abr. de 2021 1 like

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

Lanytech 28 de abr. de 2021

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

Lanytech 28 de abr. de 2021 1 like

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!

RoinujNosde 28 de abr. de 2021 1 like

Acho que no seu caso fica:

nav {
    margin-left: 20px;
}

(O valor vc vai testando)

Lanytech 29 de abr. de 2021

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

o resultado que eu quero produzir é este aqui:

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/[email protected]/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>

                    [email removido]

                </p>

                <br>

                <p>

                    +55 [telefone removido]

                </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.

Fefo80 30 de abr. de 2021 1 like

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

Lanytech 30 de abr. de 2021 1 like

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.

rodriguesabner 30 de abr. de 2021 1 like

Foi resolvido?

Lanytech 4 de mai. de 2021 1 like

Olá, Abner.

desculpe a demora. Passei o final de semana quebrando a minha cabeça com c#.

consegui resolver sim.

O<br> não funcionou corretamente, porque ele puxou a cor do background da barra de menu

A solução foi alterar o arquivo css e inserir o margin-top lá mesmo no arquivo CSS.

Muito obrigada!

Lanytech 4 de mai. de 2021 1 like

meu amigos, obrigada pela ajuda.

Eu tenho outras dúvidas para tirar e gostaria de saber como devo proceder a partir de agora: eu devo abrir um novo tópico ou perguntar po aqui mesmo?

Uma excelente terça feira a todos

rodriguesabner 4 de mai. de 2021 1 like

Abre um novo tópico, fica melhor pra visualizar depois .

Lanytech 4 de mai. de 2021

Valeu !

Criado 24 de abril de 2021

Ultima resposta 4 de mai. de 2021

Respostas 24

Participantes 4

24 Respostas

Topicos relacionados