Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite pessoal, tenho uma div que mostra o nome do usuário, está tudo a funcionar a 100% o login, mas infelizmente não consigo colocar uma margem e nem um padding.
<div id="logins">
<?php
echo "Bem-Vindo! ". ucfirst($_SESSION['sessao_user']);
?>
</div>
Já coloquei
#logins{
margin-top: 10px;
margin-rigth:50px;
width: 1024px;
height: 360px;
text-align: right;
}
#logins{
margin-top: 10px;
padding-rigth:50px;
width: 1024px;
height: 360px;
text-align: right;
}
Mas fica alinhado à margem do lado direito, mesmo colocando a margem ou padding a direita a 50, 100, 150 ou 200, não funciona.
O que estou a fazer de errado?
rikaschmitt ao digitar aqui no forum por um lapso digital mal, mas no arquivo css esta correcto e não funciona.
Johnhey, entendi a confusão que está causando, e na verdade, isso é bem normal de acontecer.
Lembre-se: Um padding acrescenta um valor para largura/altura quando inserido. Então podemos concluir que, se você tem um elemento alinhado a direita (através do text-align) ele vai pegar a largura desse container (1024px) e vai somar com o padding que adicionou (Ex.: 100px), ou seja, no total seu container terá 1124px de largura.
Já que a sua div tem uma largura fixa, você pode subtrair o valor de padding-right ao width da sua div. Vou deixar um exemplo com três conceitos do que você possivelmente está fazendo e o que pode fazer pra solucionar.
Confira o exemplo aqui: JSFiddle.
Caso não consiga conferir o exemplo, deixarei o código aqui abaixo do que foi feito para que possa fazer alguns testes.
HTML:
<div class="wrapper">
<p>Sem padding e alinhado a direita.</p>
<div id="logins_um">
<!-- Exemplo -->
Bem Vindo! - Unknown
</div>
</div>
<div class="wrapper">
<p>Com padding e alinhado a direita.</p>
<div id="logins_dois">
<!-- Exemplo -->
Bem Vindo! - Unknown
</div>
</div>
<div class="wrapper">
<p>Com padding e subtração da largura.</p>
<div id="logins_tres">
<!-- Exemplo -->
Bem Vindo! - Unknown
</div>
</div>
CSS:
#logins_um {
background: #000;
color: #FFF;
width: 250px; /* Alterado para melhor visualização no JSFiddle */
height: auto;
text-align: right;
}
#logins_dois {
background: #000;
color: #FFF;
width: 250px; /* Alterado para melhor visualização no JSFiddle */
height: auto;
text-align: right;
padding-right: 20px;
}
#logins_tres {
background: #000;
color: #FFF;
width: 230px; /* De 250px, reduzi para 230px, já que o padding ocupa 20px. */
height: auto;
text-align: right;
padding-right: 20px;
}
/ DESCONSIDERAR ESSA PARTE /
body {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
padding: 20px;
color: #FFF;
}
.wrapper:nth-child(1) {
background: #03A9F4;
}
.wrapper:nth-child(2) {
background: #FFC107;
}
.wrapper:nth-child(3) {
background: #E91E63;
}Obrigado deu certo.
Tá escrito "rigth", o correto é "right"