Jump to content
xandedd

Não consigo retirar a margin do background-color da minha div!!!

Recommended Posts

Criei um login modal em minha page, e estou com problemas na minha (div #container), onde criei um background color com (width: 100% e height: 100%),  e não consigo eliminar as margins, ja tentei de tudo, (margin: 0  ,  padding: 0  ,  top:0  ,  left:0)    e até mesmo tentei colocar margin:0 nos elementos html e no body e nâo tive resultado,  exemplos =  *{margin: 0;} html,body {margin:0;} , e em ultima tentativa tentei usar o (!important;) mesmo assim sem resultado, preciso muito de ajuda, desde já agradeço

html,body {
background-size: cover;
background-repeat: no-repeat;
height: 100%;
font-family: 'Numans', sans-serif;

}

*, *::after, *::before {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#container {
height: 100%;
align-content: center;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 1300 !important;
}

#container:target{
  display: block;
}

.card-header h3 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1rem;
  margin-bottom: 5px;
}

.card{
height: 370px;
margin-top: auto;
margin-bottom: auto;

width: 400px;
background-color: #fff !important;
animation: slideUp 0.3s ease-in-out;
}

@keyframes slideUp {
  from{
    opacity: 0;
    bottom: -200px;
  }
  to {
    opacity: 1;
    bottom: 0;
  }
}

.social_icon .tw{
font-size: 60px;
margin-left: 10px;
color: rgba(120,205,240,0.8);
}

.social_icon .fb{
font-size: 60px;
margin-left: 10px;
color:  #6d84b4;
}

.social_icon .gm{
font-size: 60px;
margin-left: 10px;
color: #df4b37;
}


.social_icon span:hover{
color: #495057;
cursor: pointer;
}

.card-header h3{
color: #bf8b28;
}

.social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.input-group-prepend span{
width: 38px;
background-color: #bf8b28;
color: #fff;
border:0 !important;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: #495057;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.login_btn{
color: #fff;
background-color: #bf8b28;
width: 100px;
}

.login_btn:hover{
color: #fff;
background-color: #6c757d;
}

.links {
color: #495057;
}

.links a {
margin-left: 4px;
}

a {
 text-decoration: none;
 color: #309ca7;
}
a:hover {
 text-decoration: none;
 color:#20eaff;
}
<div id="container"class="container">
    	<div class="d-flex justify-content-center h-100">
    		<div class="card">
    			<div class="card-header">
    				<h3>Log In</h3>
    				<div class="d-flex justify-content-end social_icon">
    					<span class="fb"><i class="fab fa-facebook-square"></i></span>
    					<span class="gm"><i class="fab fa-google-plus-square"></i></span>
    					<span class="tw"><i class="fab fa-twitter-square"></i></span>
    				</div>
            <a href="#" class="close">&times</a>
    			</div>
    			<div class="card-body">
    				<form>
    					<div class="input-group form-group">
    						<div class="input-group-prepend">
    							<span class="input-group-text"><i class="fas fa-user"></i></span>
    						</div>
    						<input type="text" class="form-control" placeholder="Usuário">

    					</div>
    					<div class="input-group form-group">
    						<div class="input-group-prepend">
    							<span class="input-group-text"><i class="fas fa-key"></i></span>
    						</div>
    						<input type="password" class="form-control" placeholder="Senha">
    					</div>
    					<div class="row align-items-center remember">
    						<input type="checkbox">Lembrar-me
    					</div>
    					<div class="form-group">
    						<input type="submit" value="Login" class="btn float-right login_btn">
    					</div>
    				</form>
    			</div>
    			<div class="card-footer">
    				<div class="d-flex justify-content-center links">
    					Não é cadastrado?<a href="#">Cadastre Se</a>
    				</div>
    				<div class="d-flex justify-content-center">
    					<a href="#">Esqueceu sua senha?</a>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

 

css.jpg

index.jpg

Share this post


Link to post
Share on other sites

Pelo que vi você está utilizando o bootstrap e pelo seu código interpretei a classe ".container" como sento a classe do container do modal e não da pagina, se for isso é simples:

 

-quando se usa a classe '.container' o bootstrap limita o tamanho do layout em 960px como você pode ver que é a sua tela se você quer preencher toda a tela deve usar a classe '.container-fluid'

 

// html original
<div id="container" class="container">
  
// html modificado
<div id="container" class="container-fluid">

 

ex: https://jsbin.com/xohudewita/1/edit?html,css,output

 

link de referência: https://getbootstrap.com/docs/4.1/layout/overview/

Share this post


Link to post
Share on other sites
2 horas atrás, wanderval disse:

Pelo que vi você está utilizando o bootstrap e pelo seu código interpretei a classe ".container" como sento a classe do container do modal e não da pagina, se for isso é simples:

 

-quando se usa a classe '.container' o bootstrap limita o tamanho do layout em 960px como você pode ver que é a sua tela se você quer preencher toda a tela deve usar a classe '.container-fluid'

 


// html original
<div id="container" class="container">
  
// html modificado
<div id="container" class="container-fluid">

 

ex: https://jsbin.com/xohudewita/1/edit?html,css,output

 

link de referência: https://getbootstrap.com/docs/4.1/layout/overview/

Obrigado amigo, era esse mesmo o problema deu tudo certo! Abraçooo

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Anderson Ronilson Xavier
      Olá a todos gostaria da ajuda dos colegas estou em um projeto de site landing page  usando o plugin construtor de sites chamado themify ultra e não estou conseguindo uma galeria de imagens igual ao cliente está me pedindo que responsiva e com um menu que tenha as opções por exemplo "todas maçã banana laranja " se eu clicar em maçã a galeria ocultaria as bananas e Laranja e se eu clicar em todas e voltaria a apresentar todas as frutas ... Desculpa o jeito de explicar ... Mas galeria não estou conseguindo achar nada que me ajude a opção do themify ultra foi do próprio cliente que já tinha e acabei topando por fazer usando ele mesmo mas no site do themify não achei nenhum pluguin interessante a galeria deles é a padrão do WordPress será que teria como eu usar alguma outra os colegas tem alguma sugestão? 
       Vou deixar um site que o cliente deixou de modelo de como ele gostaria de que dele ficasse
       
      www.levelmont.com.br
       
      Grato pelo ajuda dos colegas.
       
       
    • By chuxi
      <div class="fab"> <button class="main"> </button> <ul> <li> <label for="opcao1">Opção 1</label> <button id="opcao1"> ⎈ </button> </li> <li> <label for="opcao2">Opção 2</label> <button id="opcao2"> ⎗ </button> </li> <li> <label for="opcao3">Opção 3</label> <button id="opcao3"> ☏ </button> </li> </ul> </div> body{ font-family: sans-serif; } .fab{ position: fixed; bottom:10px; right:10px; } .fab button{ cursor: pointer; width: 48px; height: 48px; border-radius: 30px; background-color: #cb60b3; border: none; box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 24px; color: white; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button:focus{ outline: none; } .fab button.main{ position: absolute; width: 60px; height: 60px; border-radius: 30px; background-color: #5b19b7; right: 0; bottom: 0; z-index: 20; } .fab button.main:before{ content: '⏚'; } .fab ul{ position:absolute; bottom: 0; right: 0; padding:0; padding-right:5px; margin:0; list-style:none; z-index:10; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab ul li{ display: flex; justify-content: flex-start; position: relative; margin-bottom: -10%; opacity: 0; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; transition: .3s ease-out; } .fab ul li label{ margin-right:10px; white-space: nowrap; display: block; margin-top: 10px; padding: 5px 8px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius:3px; height: 18px; font-size: 16px; pointer-events: none; opacity:0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button.main:active, .fab button.main:focus{ outline: none; background-color: #7716ff; box-shadow: 0 3px 8px rgba(0,0,0,.5); } .fab button.main:active:before, .fab button.main:focus:before{ content: '↑'; } .fab button.main:active + ul, .fab button.main:focus + ul{ bottom: 70px; } .fab button.main:active + ul li, .fab button.main:focus + ul li{ margin-bottom: 10px; opacity: 1; } .fab button.main:active + ul li:hover label, .fab button.main:focus + ul li:hover label{ opacity: 1; } Como faço pra movimentar meu botão flutuante pra qualquer lado da tela igual o messenger?
    • By gbilibio
      Olá, estou montando um layout para uma atividade da faculdade, o layout está pronto, mas está com um problema na estrutura, quando diminui o tamanho do
      navegador o página fica mais uma margem a direita e as div's não ficam fixas, segue o código html e css:
       
      Página HTML
       
      <!DOCTYPE html>
      <html lang="pt-br">
          <head>
              <meta charset="UTF-8"/>
              <title>Aula 07</title>
              <link rel="stylesheet"
              type="text/css" href="style.css"/>
              <meta name="viewport"
              content="width=device-width, 
              initial-scale=1.0"/>
          </head>
          <body>
              <header>
                  <div class="contatos">
                      <div class="cont">
                          <p> <img src="Icones/telefone.png" width="20" height="20"> (41) 3019-7838</p>
                      </div>
                      <div class="cont">
                          <p> <img src="Icones/email.png" width="20" height="20"> contato@email.com</p>
                      </div>
                      <div class="cont">
                          <p> <img src="Icones/locationmarker.png" width="20" height="20"> R. Rua, 00 - Curitiba </p>
                      </div>
                  </div>
              </header>
              <div class="topo">
                  <div class="contatos2">
                      <div class="cont2">
                          <img  align="right" src="logo.png">
                      </div>
                      <div class="cont2">
                          <p> HOME </p>
                      </div>
                      <div class="cont2">
                          <p> EMPRESA </p>
                      </div>
                      <div class="cont2">
                          <p> SERVIÇOS </p>
                      </div>
                      <div class="cont2">
                          <p> HOSPEDAGEM </p>
                      </div>
                      <div class="cont2">
                          <p> PORTIFÓLIO </p>
                      </div>
                      <div class="cont2">
                          <p> CONTATO </p>
                      </div>
                  </div>
              </div>
              <div class="banner">
              
              </div>
              <div class="banner2">
              
                  <div class="banneresq">
                  <h1> <font color="#2B47AE">BEM-VINDO AO</font> <br> <font color="#A11606">NOSSO SITE</font> </h1>
                  <div class="linhatexto">
                  
                  </div>
                  <p> 
                  Especialista em desenvolvimento de sites o Projeto Web oferece oque há de melhor<br>
                  no mercado para construção de site, tecnologia avançada e modernismo nos Layouts<br>
                  são as principais caracteristicas de nossos Layouts, com a Metodologia de Atender<br>
                  Bem para Atender Sempre.<br>
                  </p>
                  <div class="botaoentrar" >
                  <h1>Entrar</h1>
                  </div>
                  </div>
                  
                  <div class="bannerdir">
                  
                  <img src="Imagens/bannerdireita2.jpg" width="320" height="280">
                  
                  </div>
              </div>
              <div class="banner3">
                  
                  <div class="caixamaior">
                      <div class="caixa1">
                          <img src="Imagens/box1.jpeg" width="250" height="200">
                              <div align="center">
                                  <p> CRIAÇÃO DE SITES </p>
                              </div>
                              <div class="caixa1texto">
                                  <h1> 
                                  Temos desde sites simples de 1 página,<br>
                                  modelos padrões e personalizados<br>
                                  com páginas internas. Confira nossos<br>
                                  modelos ou solicite um.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                      </div>
                      <div class="caixa2">
                          <img src="Imagens/box2.jpg" width="250" height="200">
                              <div align="center">
                                  <p> HOSPEDAGEM DE SITES </p>
                              </div>
                              <div class="caixa2texto">
                                  <h1>
                                  Hospede um site em um servidor<br>
                                  confiável e de qualidade, que sempre<br>
                                  lhe dê suporte necessário. Deixe seu<br>
                                  site 100% online.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                      </div>
                      <div class="caixa3">
                          <img src="Imagens/box3.jpg" width="250" height="200">
                              <div align="center">
                                  <p> MANUTENÇÃO DE SITES </p>
                              </div>
                              <div class="caixa3texto">
                                  <h1>
                                  Mantenha seu site sempre atualizado,<br>
                                  passando credibilidade aos seus<br>
                                  clientes e ganhando ponto com o<br>
                                  Google e outros buscadores.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                          
                      </div>
                      
                  </div>
              
              </div>
          </body>
      </html>
       
      PÁGINA CSS
       
      @import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
      @import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700');
      @import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');
      @import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700');
      @import url('https://fonts.googleapis.com/css?family=Scada:400,400i,700');
      @import url('https://fonts.googleapis.com/css?family=Karla:400,700');
      header{
          width: 100%;
          height: auto;
          overflow: hidden;
          background-color: #023180;
          margin: auto;
      }
      body{
          margin: 0px;
      }
      .contatos{
          width: 100%;
          max-width: 900px;
          height: auto;
          overflow: hidden;
          margin: auto;
      }
      .cont{
          width: 33.3%;
          height: 40px;
          float: left;
      }
      .cont p{
          color:#ffffff;
          font-family: 'Muli';
          font-weight: 400;
      }
      .topo{
          width:80%;
          height:120px;
          float:right;
          
      }
      .cont2{
          font-family:'Cabin';
          color:#023180;
          width:13.3%;
          height:40px;
          float:left;
          
      }
      .cont2 p{
          font-size:15px;
          margin-left:100px;
          margin-top:30px;
          
      }
      .logo{
          margin-left:350px;
          margin-top:10px;
      }
      .banner{
          width:100%;
          height:500px;
          background:url(Imagens/banner.jpg);
          float:left;
          margin-top:30px;
      }
      .banner3{
          width:100%;
          height:500px;
          background-color:#083875;
          float:left;
          margin-top:50px;
          vertical-align: middle;
      }

      .caixamaior{
          width:100%;
          height:auto;
          
      }
      .caixamaior p{
          color:#FFFFFF;
          font-family:'Scada';
          
      }
      .caixa1texto h1{
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .caixa2texto h1{    
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .caixa3texto h1{
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .botaosaibamais{
          
          width:150px;
          height:50px;
          background-color:#21588E;
          text-align:center;
          vertical-align: middle;
          line-height: 3;
          margin-left:45px;
          margin-top:20px;
      }
      .botaosaibamais h1{
          font-family:'Scada';
          font-size:15px;
          color:#ffffff;
          vertical-align: middle;    
      }
      .caixa1{
          margin-left:15%;
          margin-top:5%;
          float:left;    
      }
      .caixa2{
          
          margin-left:10%;
          margin-top:5%;
          float:left;    
      }
      .caixa3{    
          margin-left:10%;
          float:left;
          margin-top:5%;
      }
      .banneresq{
          float:left;
          margin-left:120px;
          margin-top:65px;
      }
      .banneresq h1{
          font-family: 'Oxygen';
      }
      .banneresq p{
          color:#3F3B3B;
          font-family: 'Oxygen';
          font-size:16px;
      }
      .linhatexto{
          width:75px;
          height:4px;
          background-color:#A11606;
          margin-top:-5px;
      }
      .botaoentrar{
          width:150px;
          height:50px;
          background-color:#800000;
          text-align:center;
          vertical-align: middle;
          line-height: 3;
      }
      .botaoentrar h1{
          font-family:'Oxygen';
          font-size:15px;
          color:#ffffff;
          vertical-align: middle;
      }
      .bannerdir{
          float:left;
          margin-top:60px;
          margin-left:70px;    
      }
      @media only screen and (max-width: 600px){
          .cont{
              width: 100%;
          }
          .cont p{
              text-align: center;
          }
          
          .banner{
              width:100%;
          
          }
      }
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.