Unconfigured Ad Widget

Collapse

Anúncio

Collapse
No announcement yet.

Css posicionamento de divs

Collapse
X
 
  • Filter
  • Tempo
  • Show
Clear All
new posts

  • Font Size
    #1

    Tutorial Css posicionamento de divs

    Olá pessoal , eu sou novo aqui e percebi que as pessoas não postam dicas ou conteúdo sobre html, css e/ou java script , vocês simplesmente buscam cursos para disponibilizar o link aqui ,acho que a essência se perdeu então resolvi fazer um tutorial sobre posicionamento de divs .

    Position absolute:

    O posicionamento absoluto permite que você posicione a div em qualquer lugar da pagina.

    Position relative:

    O posicionamento relativo permite que você posicione a div dentro de outra div (ou container).

    Position fixed:

    O position fixed fixa a div em uma determinada posição e não se movimenta com a pagina quando se usa a barra de rolagem.

    Dificuldades que alguns encontram :

    Um amigo meu uma vez me perguntou como alinhar uma div exatamente ao centro da pagina pois ele procurou no google e não achou (eu duvido muito que ele tenha pesquisado no google mas é o que ele diz rsrs...) ;

    Primeiro precisamos de uma pagina html:
    Código HTML:
    <!DOCTYPE html>
    <html lang="pt-br">
    	<head>
    
             <meta charset="UTF-8"/>
             <title>Posicionamento</title>
             <link rel="stylesheet" type="text/css" href="css/style.css" media="alla"/>
    	</head>
    	<body>
    
             <div id="global">
    
    
             </div>
    
    	</body>
    </html>
    copie este código e salve em html

    crie uma pasta chamada css e dentro da pasta crie um arquivo chamado style.css

    dentro do arquivo css você vai fazer o seguinte

    Código HTML:
    #global{
    
    position:absolute;
    left:50%;
    top:50%;
    width:200px;
    height:150px;
    margin:-75px auto auto -100px;
    border: 1px solid black;
    
    }
    a sequência do margin ali é a seguinte:
    margin: top right bottom left;
    o segredo e dividir a largura por 2 e usar valores negativos bem simples não é ?
X
Working...
X