Ir para conteúdo
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

Compartilhar este post


Link para o post
Compartilhar em outros 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/

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por allancisneiro
      pessoal boa tarde, estou construindo um arquivo HTML, porém estou com um problema de alinhamento do texto apartir do segundo<H1>.  já tentei  usar o comando align:"left". mas não funcionu.
      quem puder ajudar agradeço. a ideia é alinhar tudo à esquerda
       
      este arquivo contém este código-fonte:
       
      <!DOCTYPE html>
      <html>
      <head>
      <title>Título da página</title>
      <meta charset="utf-8"/>
      </head>
      <body>
      <h1>Lista não ordenada</h1>
      <ul>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      <h1 align="left">Lista ordenada</h1>
      <OL>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      </OL>
          
      </body>
      </html>

    • Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
    • Por nosredna
      Olá amigos,
       
      tenho o seguinte código:
      <html> <script type="text/javascript"> function Soma(){ var soma = 0; var ipts = document.querySelectorAll('input[oninput="Soma()"]'); for(var x=0; x<ipts.length; x++){ var valorItem = parseFloat(ipts[x].value); !isNaN(valorItem) ? soma += parseFloat(valorItem) : null; } document.querySelector('#final').value = soma.toFixed(2); } </script> <form action=""> Total produto1: <input type="text" oninput="Soma()" value="0"><br> Total produto2: <input type="text" oninput="Soma()" value="0"><br> <br> Total todos os produtos12: <input type="text" id="final"> </form> </html> Bom...para essas duas inputs funciona corretamente.
      Porém, se eu quiser colocar mais inputs como: Total produto3 + Total produto4 = Total todos os produtos34, Total produtoX + Total produtoY = Total todos os produtosXY, ...
      e usar o mesmo código JS, é possível? alguém poderia me dar uma dica de como eu faço para fazer isso? já tentei de várias maneiras, mas não estou tendo sucesso...
       
      Fico agradecido. 
    • Por Yanzoca
      Olá, bom dia/tarde/noite, gostaria de uma ajuda sobre como mudar a interface do photoshop, no meu photoshop a janela de cores aparece como na segunda foto, mas gostaria de deixa-la como na primeira foto, poderiam me ajudar? Desde ja agradeço


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.