Centralizar

fabioandrad · Julho 12, 2014

Quando diminuo o zoom da página, o conteúdo do site começa ir pra esquerda, como faço pra diminuir o zoom e os elementos da página continuarem no centro?

rikaschmitt · Julho 14, 2014

voce pode centralizar todo o site, usando no CSS:

body { margin:0 auto; }

victorqueiroz · Julho 14, 2014

no lugar da div container você colocar o nome da sua div.

#container { margin:0 auto; }

fabioandrad · Julho 15, 2014

Não deu certo.

As logos que eu tenho na página ainda vão para a esquerda, eu alinhei as logos com css usando o top:px; e left:px;

assim deixei aonde eu quero exatamente, mas quando diminuo o zoom da página eles se deslocam para a esquerda

Nosreve · Julho 15, 2014

Coloque seu css para nós vermos, mas acho que sei o que é, como você está usando top e left, você definiu o seu logo como position: absolute não é mesmo? O position: absolute posiciona o elemento referente ao seu elemento pai que seja um elemento não estático (pesquise sobre position e você entendera).

Caso não ache um elemento não estático ele se posiciona ao elemento body, e deve ser isso que esta acontecendo ele sempre vai ter o top e o left referente a body.

O que você tem que fazer o é setar o seu elemento pai como position: relative (creio que seja uma div que esta englobando as suas logos).

fabioandrad · Julho 15, 2014

#logo1{

position:absolute;

left:510px;

top:0px;

z-index:3;

}

#logo2{

position:absolute;

top:603px;

left:285px;

z-index:3;

}

#logo3{

position:absolute;

top:611px;

left:630px;

z-index:3;

}

#logo4{

position:absolute;

top:613px;

left:985px;

z-index:3;

}

#div1{

position:absolute;

top:0px;

width:100%;

height:78px;

border-bottom:solid 1px #000000;

background-image:url("img/layer.png");

z-index:2;

}

#div2{

position:relative;

top:603px;

width:100%;

height:63px;

background-image:url("img/layer.png");

border-bottom:solid 1px #000000;

z-index:2;

}

#div3{

position:absolute;

top:140px;

left:1010px;

width:260px;

height:60px;

background-color:#EBE6E1;

cursor:pointer;

border-radius:15px;

-moz-border-radius:15px;

-webkit-border-radius:15px;

font-family:"agency fb", "trebuchet ms", candara, arial;

font-size:43px;

text-align:center;

}

victorqueiroz · Julho 15, 2014

use a tag center

<center> aqui dentro você coloca sua imagem sem a formatação do css </center>

fabioandrad · Julho 15, 2014

Deu certo na logo principal

Mas tenho uma div na parte de baixo da página, nela tem três logos, quando diminuo o zoom da página, essa div vai para cima e as logos vão para a esquerda.

Ficou certinho na logo principal, obg, mas ainda não consegui com o resto

Marlon Pacheco · Julho 15, 2014

A tag <center> está depreciada. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center).

Use position:relative; ao invés de absolute.

fabioandrad · Julho 15, 2014

Troquei todos os position:absolute; po position:relative;

Mesmo assim não funcionou, tudo continua indo para a esquerda

Marlon Pacheco · Julho 15, 2014

Posta o HTML aqui ou cria um pen no Codepen...

_leandromateus · Julho 15, 2014

Você precisa que sua div tenha uma largura definida em px para usar o margin: 0 auto, como já foi citado acima e assim centralizar.

Não pode estar com 100%, e ainda sem os position: absolute como também já foi citado acima.

fabioandrad · Julho 16, 2014

Boa, ta quase dando certo, valeu.

Centralizou como eu queria, mas quero que as divs fiquem no mesmo lugar, elas continuam diminuindo e a div de baixo vai para cima, quero que continue nas bordas mesmo diminuindo o zoom, entende?

Marlon Pacheco · Julho 16, 2014

Posta aí o HTML e o CSS, senão esse tópico vai crescer infinitamente.

Aproveitando, qual o motivo para o usuário diminuir o zoom da página?

fabioandrad · Julho 16, 2014

<html>

<head>

</head>

<body>

</div>

</div>

<label for="email"><p class="login">Email:</p></label><input type="text" class="txt bradius" name="email" value=""></input>

<label for="senha"><p class="login">Senha:</p></label><input type="password" class="txt bradius" name="senha" value=""></input>

</form>

</div>

Cadastre-se

</div></a>

</body>

</html>

*{

margin:0px;

padding:0px;

}

body{

background:url("img/imagem.jpg") no-repeat center center;

background-size:cover;

}

#logo1{

position:relative;

z-index:2;

}

#logo2{

position:absolute;

z-index:2;

}

#logo3{

position:absolute;

top:8px;

left:630px;

z-index:2;

}

#logo4{

position:absolute;

top:10px;

left:985px;

z-index:2;

}

#div1{

position:absolute;

top:0px;

width:100%;

height:78px;

border-bottom:solid 1px #000000;

background-image:url("img/layer.png");

z-index:1;

}

#div2{

position:absolute;

top:603px;

width:100%;

height:63px;

background-image:url("img/layer.png");

border-bottom:solid 1px #000000;

z-index:1;

}

#div3{

position:absolute;

top:140px;

left:1010px;

width:260px;

height:60px;

background-color:#EBE6E1;

cursor:pointer;

border-radius:15px;

-moz-border-radius:15px;

-webkit-border-radius:15px;

font-family:"agency fb", "trebuchet ms", candara, arial;

font-size:43px;

text-align:center;

}

.login{

color:white;

font-size:33px;

font-family:"agency fb", "trebuchet ms", candara, arial;

}

#login{

position:absolute;

top:233px;

left:160px;

}

#login.label{

display:block;

}

.txt{

border:none;

width:295px;

height:41px;

font-size:23px;

font-family:"agency fb", "trebuchet ms", candara, arial;

}

.sb{

display:block;

border:none;

width:240px;

height:45px;

margin-top:23px;

cursor:pointer;

font-family:"agency fb", "trebuchet ms", candara, arial;

font-size:35px;

}

.sb:hover{

background-color:#FFF602;

}

.txt:focus{

border:thin solid #FFF602;

box-shadow:0 4px 20px #FFF602;

-moz-box-shadow:0 4px 20px #FFF602;

-webkit-box-shadow:0 4px 20px #FFF602;

}

#div4:hover{

background-color:#FFF602;

}

.bradius{

border-radius:8px;

-moz-border-radius:8px;

-webkit-border-radius:8px;

}

a{

color:#000000;

}

William Bruno · Julho 16, 2014

Não utilize position: absolute; vc está fazendo da forma errada.

Comece de novo, sem usar position.

Marlon Pacheco · Julho 16, 2014

Então cara. Esse monte de position:absolute; está ferrando com o layout.

É óbvio que não vai acompanhar o layout.

fabioandrad · Julho 16, 2014

Uso sem position ou só troco por position relative?

Marlon Pacheco · Julho 16, 2014

Experimenta os 2.

EU faria sem.

fabioandrad · Julho 17, 2014

Não dando certo essa bagaça kkk

Se eu coloco position relative não muda em nada, se eu não coloco nenhum position não da pra mexer em nada

Arquivado

Centralizar

Recommended Posts

fabioandrad 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

victorqueiroz 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabioandrad 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nosreve 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabioandrad 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

victorqueiroz 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabioandrad 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Pacheco 132

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabioandrad 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Pacheco 132

Compartilhar este post

Link para o post

Compartilhar em outros sites

_leandromateus 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabioandrad 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Pacheco 132

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabioandrad 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Pacheco 132

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabioandrad 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Pacheco 132

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabioandrad 0