Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Entre para seguir isso  
Lu Reis

Centralizar Site feito em PX.

Recommended Posts

E ae pessoal,

Estou precisando centralizar um site, dei uma procurada aqui no forum e vi um esquema pra fazer utilizando margin, porém, ao invés de PX utilizar %.

Eu queria saber se tem como fazer o esquema da % em um site que esta todo criado em PX.

Agradeço a atenção !

Compartilhar este post


Link para o post
Compartilhar em outros sites

olha.. todavez que eu tentei usar uma posiçao dinamica e uma margin.. nao funcionou... de repente uma boa solução é fixar com position: fixed e determinar um top e um left. ou usar um position:static ... se nao der.. tenta um position: absolute

Compartilhar este post


Link para o post
Compartilhar em outros sites
 

Não sei se eu entendi errado, mais no site inteiro eu já estou usando o position: absolute ...

Compartilhar este post


Link para o post
Compartilhar em outros sites

então... a posiçao absoluta faz com que você coloque um elemento em um determinado lugar usando o top ou bottom para setar o eixo Y e o left ou right para eixo X..

usando top: 10%; e left: 30%; no container... faz com que seu container todo ou seja o site todo seja movido para 10% do topo e 30% da margem esquerda.

mas para calcular isso... você tem que calcular os espaços.. por exemplo vou dar em porcentagens certo?

temos a tela inteira como 100%.. deixando no meio o conteiner.. poderia fazer assim:

primeiro define as margens.. vamos supor que você queira deixar 20% de cada lado... então que nos resta para o container é de 60% para atingir os 100%.

agora um exemplo de como da pra fazer usando os PX:


!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Centrar uma página com CSS</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding:0;
background:#ccc;

}
#tudo {
width: 760px;
margin:0 auto;
}
#conteudo {
padding: 5px;
background-color: #eee;
}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
<h1>Pagina Centrada com CSS sem scroll até 800x600</h1>
<p> Não use nenhum elemento HTML figuras, tabelas, etc...) com largura superior a 750px.</p>
</div>
</div>
</body>
</html>


note que se você usar o CTRL + Scroll( mouse) o layout vai manter as proporçoes.. diferente de se usar com % que vai se achatar.

agora tem sempres pros e contras.. usando PX fica aquela largura e deu. usando % fica a largura determinada para todas as resoluçoes.

Compartilhar este post


Link para o post
Compartilhar em outros sites
 

Entendi mais ou menos, por exemplo, se eu quisesse trocar o site todo para %.

Eu teria q mudar só os WIDTH ?!

Mudaria no CSS ou no HTML !?

Agradeço sua atenção !

Compartilhar este post


Link para o post
Compartilhar em outros sites

nesse caso você mudaria sempre as medidas no seu CSS. no HTML jamais.. pois sempre defendo nao usar tags inline... bom isso é mania minha.. :)

Compartilhar este post


Link para o post
Compartilhar em outros sites
 

Entendi, é vou começar a trabalhar usando mais o CSS, teria como você postar um exemplo simples de um HTML e um CSS fazendo margem de 10% de cada lado e um container de 80% ?!

Só para eu ter uma ideia melhor !

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aqui esta um exemplo:


<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>

<style type="text/css">

#container{
[COLOR="Red"]width: 80%; [/COLOR]
height:600px;
background-color: red;
color:#ffffff;
[COLOR="Red"]display: block;[/COLOR]
[COLOR="Red"]margin-left: 10%;[/COLOR]
text-align: center;
font-family: arial;
font-size: 16pt;
}

</style>
</head>
<body>

<div id="container">
este é um container que abriga<br/>
toda a estrutura do seu site

</div>

</body>
</html>

bom.. destaquei em vermelho onde você deve ter mais atençao.

o width especifica a largura de sua div

o display: block faz com que a div seja interpretada como bloco, serve para mostrar ela sem que nada estaja dentro da div. se nao colocasse como block, a div só ira aparecer no momento que colocar algum conteudo na div.

e o margin-left: 10% determina a posiçao. se você esta usando na div 80% de largura, e especificar que tera 10% de margem esquerda, obrigatoriamente você terá uma margem direita de 10% então nem é preciso colocar no css.

com isso sua div fica centralizada e continua mantendo os 80% de largura, e 10% de margem esquerda e direita se redimencionar o navegador. ou seja resumindo.. nao perde suas proporçoes ao contrario de usar com PX que é um valor fixo se redimencionar.. "corta"

Compartilhar este post


Link para o post
Compartilhar em outros sites
 

Olha fiz esse codigo, ve se tá certo por favor ...

No Firefox ele tá perfeito, mais no IE dá uma pequena diferença ...

CSS

#body {

background-color: #005300;
margin: 5% 5% 5% 5%;


}

#container {

position: absolute;
width: 90%;
height: 450px;
background-color: #ffffff;
border: 1px #000000 solid;


}

#logo {

position: absolute;
left: 2%;
top: 2%;

}

#login {

position: absolute;
left: 60%;
top: 30%;
width: 30%;
height: 100px;
background-color: #ffffff;
border: 1px #000000 solid;


}

HTML

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">

<html>
<head>
<title>Portal</title>

<link rel="stylesheet" href="estilo.css" type="text/css">
<link rel="stylesheet" type="text/css" href="estilo.css" />


</head>

<body id="body">

<div id="container">
<img src="imagens/logo.png" id="logo">
<div id="login">
a
</div>

</div>


</body>

</html>

O IE é o 6, não testei nos novos ...

Aquele DOCTYPE eu peguei em um forum, será q ele so funciona com acesso a internet, porque na maquina q eu estou programando, não tem acesso a internet...

Compartilhar este post


Link para o post
Compartilhar em outros sites

você na precisa colocar uma id em body podes fazer direto:


body{ ... }

também nao conselho a colocar aquelas margens no body. tira elas dali

e adiciona sómente no container.

tente assim:



/* CSS RESET */
*{ margin: 0; padding: 0; }

body {

background-color: #005300;
}

#container {
width: 95%;
display: block;
margin-left: 5%;
height: 450px;
background-color: #ffffff;
border: 1px #000000 solid;


}


Compartilhar este post


Link para o post
Compartilhar em outros sites
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<html>
<head>
<title>Centrar uma página com CSS</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding:0;
background:#ccc;

}
#tudo {
width: 760px;
margin:0 auto;
}
#conteudo {
padding: 5px;
background-color: #eee;
}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
<h1>Pagina Centrada com CSS sem scroll até 800x600</h1>
<p> Não use nenhum elemento HTML figuras, tabelas, etc...) com largura superior a 750px.</p>
</div>
</div>
</body>
</html>

Consegui usar esse codigo que você me mandou, o problema agora, é que no IE o efeito ao usar o scroll do mouse é diferente ... no Firefox o site aumenta proporcionalmente e cria a barra de rolagem inferior e no IE ele só aumenta as letras, mantendo a mesma margem dos dois lados ....

O resultado que eu preciso é exatamente esse do Firefox !!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

se usou assim.. teoricamente deveria funcioanr... enfim uma dica boa de testes.. baixa o programa pelo baixaqui chamado "IETESTER" ele engloba o IE6, 7, 8 e 9 para testar compatibilidade e ver os possiveis bugs de layout para depois corrigir com um IE HACK que consiste em criar um novo css só para o IE do lugar que esta dando problema.. e adiciionando a pagina uma condicional do tipo:

<!--[if IE6]-->

..... comandos

<!--[end if] -->

Compartilhar este post


Link para o post
Compartilhar em outros sites
 

Na verdade nao funcionou no IE6, testei no IE9 e funcionou perfeitamente ...

Eu vou começar a montar o site todo novamente, você me aconselha desenvolve-lo usando esse codigo como base ?!

Tem alguma dica ?!

Na configuração do meu PC, é melhor deixar em qual resolução para desenvolver ? ou isso não importa ?!

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dá pra fazer assim:

.centro {
position: relative;
text-align: center;
[B]width: 800px;
left: 50%;
margin-left: -400px;[/B]
margin-top: 15px;
font-family:Verdana, arial;
font-size: 8px;
}

Como pode ver, coloque o margin-left metade do width :)

Compartilhar este post


Link para o post
Compartilhar em outros sites
 

Mog.Lucas

vou testar esse esquema mlkão !!!

dif

QQ tu acha doq eu escrevi ali emcima ... tem alguma dica !?

Compartilhar este post


Link para o post
Compartilhar em outros sites
 

DIF

voce acha interessante eu usar % em todos os Top, Left, Right, Width e Height do Site ?!

Ou apenas na div que engloba o site todo !?

Compartilhar este post


Link para o post
Compartilhar em outros sites

certamente eu acho melhor usar a percentagem no Top, Left, Right na div que engloba .. ou seja no container... eu particular mente seto em percentagem a posiçao do top e left. com posiçao absoluta... ja o width e height.. eu seto em pixels mesmo...

por exemplo estou desenvolvendo o site do meu tcc... no container eu coloquei assim:

#container{

position: absolute;

top: 10%;

left: 50%;

margin-left: -421px;

width: 960px;

height: 900px;

}

pelo menos testado em uma resoluçao 1280 x 800 e 1920 x 1080 ambos ficaram centralizado o site, e usando o scroll do mouse segurando o ctrl ... e rolando... o site diminuia o tamanho mantendo as proporçoes ou aumentando... é melhor quando acontece isso do que quando diminui ou aumenta e fica tudo aglomerado .. enfim.. estou adotando esta tecnica..sempre.. tomara que funcione também com você.

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

Entre para seguir isso  





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×