Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kay_

[Resolvido] Margin

Por , em Desenvolvimento frontend

Recommended Posts

Kay_    0

Kay_
Postado

Opa i ae galera, vim aqui tirar uma dúvida que está me atrapalhando muito.

 

É o seguinte para exemplo vou postar o codigo abaixo para voces testarem no browser:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
	margin: 0;
}

#geral {
	background-color: yellow;
	width: 960px;
	height: 800px;
	margin: 0 auto;
}

#aprendendo {
	background-color: blue;
	margin: 25px;
	width: 200px;
	height: 200px;
}
</style>
</head>
<body>
<div id="geral">
	<div id="aprendendo"></div>
</div>
</body>
</html>

O que acontece é o seguinte. Para posicionar as divs e tudo mais utiliza margin né. Pois é eu utilizei margin: 25px, na div aprendendo. Para posicionar a 25px do topo e do lado. Porém o que aconteceu foi o seguinte, a div aprendendo se posicionou a 25px do lado da div pai(div geral), porém do topo não, a div geral que se posicionou 25px do elemento body.

 

Não intendi, tem como alguem explicar o que aconteceu, e como funciona essa atributo margin???

 

E outra dúvida, eu vejo o pessoal usar overflow de vez em quando, para que que serve o atributo overflow?

Compartilhar este post

Link para o post
Compartilhar em outros sites

CiroBH    0

CiroBH
Postado

Kay, o que você pode fazer pra posicionar a div aprendendo 25px do topo e 25px da esquerda é:

 

primeiro, no seu seletor global, resete o valor do padding:

 

*{
  margin:0;
  padding:0;
}

depois disso, na div aprendendo, utilize o CSS dessa maneira:

 

#aprendendo{
  margin:25px 0 0 25px;
  position:absolute;
}

isso significa top = 25px, right = 0px, bottom = 0px e left = 25px.

 

A propriedade overflow serve para controlar o conteúdo que vaza do elemento.

 

por exemplo, você cria uma div com um tamanho qualquer de largura e altura definidos

 

<div id="teste">
<p>Lorem ipsum dolor sit amet blá blá bláblá blá bláblá blá bláblá blá bláblá blá bláblá blá bláblá blá bláblá blá blá</p>
</div>

#teste{
  width:100px;
  height:100px;
  border:1px solid black;
}

perceba que o texto irá "vazar" da área da div. A propriedade overflow permite que você: oculte ou crie uma barra de rolagem para

manter esse conteúdo dentro da área do elemento, no caso a div.

 

de que maneira?

 

overflow:hidden; -> oculta o conteúdo "vazado"

overflow:scroll; -> cria uma barra de rolagem para o conteúdo "vazado"

overflow:auto; -> se tiver conteúdo "vazando", ele cria uma barra de rolagem. Se não tiver, ele cria a barra de rolagem e deixa ela inativa em alguns browsers,

e em outros ela não aparece.

 

Tá esperando o que para testar a propriedade overflow ai?

ehehehe

 

espero ter ajudado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kay_    0

Kay_
Postado

Opaa ciro, intendi agora para que serve overflow ;) vlwss

 

porém no posicionamento ainda tou com dúvidas, acontece o seguinte, com absolute realmente prestou, sem a div pai ser alterada, a div aprendendo ficou a 25px do topo e do lado. Porém usando esse position: absolute, fica complicado posicionar elementos, por que assim, caso eu for criar outra div, ele não vai se posicionar ao lado da div aprendendo ou abaixo, ele vai ficar por sobreposto. Aí o codigo para um melhor entendimento

 

exemplo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#geral {
	background-color: yellow;
	width: 960px;
	height: 800px;
	margin: 0 auto;
}

#aprendendo {
	position: absolute;
	background-color: blue;
	margin: 25px 0 0 25px;
	width: 200px;
	height: 200px;
}

#caraii {
		width: 200px;
	height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="geral">
	<div id="aprendendo"></div>
	<div id="caraii"></div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

CiroBH    0

CiroBH
Postado

Para posicionar os elementos em um layout, usamos a propriedade float.

 

Esse é o legal da CSS, tem várias alternativas de se fazer a mesma coisa.

 

Ao invés de usar o posicionamento absoluto, faça dessa maneira:

#aprendendo{
        background-color: blue;
        margin: 25px 0 0 25px;
        width: 200px;
        height: 200px;
	float:left; /* Flutuando o elemento a esquerda */
}

#caraii{
        background:red;
        float:left; /*Flutuando o elemento a direita*/
        width: 200px;
        height: 200px;
}

Isso pode te ajudar.

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kay_    0

Kay_
Postado

Mais ciro, é que eu preciso posicionar o elemento em uma determinada coordenada do layout, vamos supor, eu tenho um topo e preciso posicionar uma imagem á 20px do topo, e não sómente a direita e somente a esquerda. Como eu faria isso? somente com position:absolute?? Por que com margin, como você viu, o elemento pai também está sendo alterado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Na verdade não. ;)

 

Lembre-se que CSS Reset, o margin e padding foram zerados. O que você deseja é isso:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http-~~-//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
       margin: 0;
	padding: 0;
}

#geral {
       background-color: yellow;
       width: 960px;
       height: 800px;
       margin: 20px auto 0 auto;
}

#aprendendo {
       background-color: blue;
       margin: 25px;
       width: 200px;
       height: 200px;
	float: left;
}
</style>
</head>
<body>
<div id="geral">
       <div id="aprendendo"></div>
</div>
</body>
</html>

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kay_    0

Kay_
Postado

Tipo thiago, o que eu tou querendo é o seguinte, posicionar essa div aprendendo a 20px do topo da div geral, porém quando eu faço isso, ao inves da div aprendendo se posicionar a 20px do topo da div geral, é a div geral que se posiciona à 20px do topo do elemtno body.

No seu exemplo aí, a div geral não ficou colado no topo do elemento body.

 

Pq isso?? ;) vlwss

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kay_    0

Kay_
Postado

Hum, vlwss ai thiago, deu certo, mais por que teve que flutuar, teoricamente a margem nao era para ser aplicada em relação ao elemento pai?. Por que tem que usar float nesse caso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kay_    0

Kay_
Postado

Opa galera, eu achei outra forma de fazer isso, sem ser com float. Foi usando display: table. Porém, eu gosto de fazer algo sabendo por que fiz isso, para quando eu precisar novamente, saber por que uso tal propriedade.

 

A dúvida é a seguinte: Por que com display: table e float, funcionou? e com div: static não?

 

A conclusão óbvia que cheguei é que table e float possui uma caracteristica que uma div nao possui. Queria saber qual caracteristica é essa?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kay_    0

Kay_
Postado

Opa, eu aqui denovo, é que deram como resolvido, porém ainda ficou a duvida que está no meu post acima, tem como alguem me esclarecer ela?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito