Como adaptar o site qualquer resolução?

[Joao Pedro Cruz 1]

Como adaptar o site a resoluções diferentes, quando eu coloco meu site no Notebook ele fica normal mas quando passo para o PC de mesa ele fica do mesmo tamanho porém ele fica mas para a direita do que para a esquerda. Como deixo ele do mesmo tamanho em monitores diferentes?

 

+=Eu usei o NVU para centralizar o conteúdo mas programei a maior parte no bloco de notas.

[Bru_ce 53]

Depende cara, se quiser que funcione em mobile tem que estudar: layout responsivo

Poste o link. Caso quiser que funcione em monitores tente deixar a largura sempre 960px, assim +/-

 

 

$suaDiv {
width:960px;
margin:0 auto;
min-height:400px;
}

[Joao Pedro Cruz 1]

Olá, ele tem uma largura de exatamente 993px,eu tentar abaixar para 960 sem que prejudique.

[Thiago Nunes 0]

Olá João, você precisa criar um layout responsivo, aqui tem um texto muito bom sobre o assunto:
http://www.ferramentasblog.com/2012/05/tudo-sobre-layout-responsivo-responsive-design-introducao.html

[Bru_ce 53]

Então amigo, você tem que abaixar essa largura, 993px "estora" no navegador.

[Joao Pedro Cruz 1]

  Em 27/05/2013 at 19:20, Thiago Nunes disse:

Olá João, você precisa criar um layout responsivo, aqui tem um texto muito bom sobre o assunto:

http://www.ferramentasblog.com/2012/05/tudo-sobre-layout-responsivo-responsive-design-introducao.html

 

 

Olá, acho que o layout não pegará bem para o tipo de site que estou criando, na verdade ele será um motor de busca ( tipo o Google ) claro que mais simples, pelo menos por em quando. Então a página inicial dele tem apenas um botão de busca,um menu do top a caixa de busca e o logo do site. O único problema é só apenas a largura que no Notebook fica normal( o site foi desenvolvido no Notebook) e no PC de mesa ele fica com mais ou menos 150 à 200px de largura a mais!

[William Bruno 1501]

mostre o seu site ou o código dele.

[Diéssica 140]

  Em 27/05/2013 at 15:54, Joao Pedro Cruz disse:

+=Eu usei o NVU para centralizar o conteúdo mas programei a maior parte no bloco de notas.

Sinceramente? Se quer fazer esse site, desista do NVU. Reúna bons artigos e apostilas, estude-os e faça download de um bom editor ou IDE (opções free — como o genial Sublime — não faltam ;)).

[Joao Pedro Cruz 1]

  Em 28/05/2013 at 22:47, Diéssica disse:

Sinceramente? Se quer fazer esse site, desista do NVU. Reúna bons artigos e apostilas, estude-os e faça download de um bom editor ou IDE (opções free — como o genial Sublime — não faltam ;)).

Sim. estou querendo desistir do NVU, ele trava demais e as vezes perco muitos dados, sabe o que vou fazer? já que sei apenas HTML e CSS vou aproveitare começar a estudar PHP+MySQL só assim poderei fazer meus próprios bancos de dados e não terei dificuldades para criar o motor de busca!

[Maykel-ctba 233]

Uma dica? Use um framework de layouts responsivos, pode te poupar algum tempo.

 

Recomendo Bootstrap ou Foundation. O primeiro projeto pode ser um pouco mais maçante pra você pegar o tempo do negócio e o conceito também. Mas depois, engrena e você faz sites em 1/3 do tempo.

[Web_avallon 5]

Cara, o melhor a fazer é utilizar a porcentagem como unidade de medida. Direfente dos pixels e outras medidas que se diferenciam dependendo da resolução, a porcentagem é universal em qualquer resolução. Ao invés de colocar 960px, coloque 78% e em qualquer resolução ele vai pegar 78% da tela. Use porcentagem sempre que possível, exemplo:

 

#suaDiv {width: 78%; 
        margin: 0 auto;
       }

ou então você pode fazer através de javascript que pode dar um pouquinho mais de trabalho, pois aí você terá de fazer um site pra cada resolução. O eu quero dizer é: você terá de fazer um site específico para uma resolução 1024x768, outra para 1280x1024 (e todas as outras resoluções importantes), depois colocar um código que vai detectar a resolução do usuário e redirecionar para a página correta: Veja:

<script language="javascript">

lar = screen.width
alt = screen.height

if ((lar == 1024) && (alt == 768)) {
	window.open('1024x768/index.htm',"_self")
}

else

if ((lar == 800) && (alt == 600)) {
	window.open('index.800/600',"_self")
}

else

if ((lar == 1280) && (alt == 1024)) {
	window.open('index.1280/1024',"_self")
}


</script>

 

Observe que nesse código há um elemento que identifica a resolução "((lar == 1024) && (alt == 768))", e logo embaixo chamo o window.open que vai chamar a index "1024x768/index.htm", que vai estar de acordo com essa resuloção.

[Joao Pedro Cruz 1]

 

Isso é muito complicado. Tem algum código que possa detectar a resolução e mudar para ela automaticamente tipo assim; eu tenho um código e a escolha da resolução será de : 300x400 , 1024x 768 , 3000x2250. um que mude de acordo com a resolução detectada mas mude para um dos números escolhidos.

[Web_avallon 5]

  Em 30/05/2013 at 00:13, Joao Pedro Cruz disse:

Isso é muito complicado. Tem algum código que possa detectar a resolução e mudar para ela automaticamente tipo assim; eu tenho um código e a escolha da resolução será de : 300x400 , 1024x 768 , 3000x2250. um que mude de acordo com a resolução detectada mas mude para um dos números escolhidos.

 

Creio que ainda não dê pra fazer isso. Já pesquisei bastante sobre isso também e essa foi a melhor solução que encontrei.

[William Bruno 1501]

media queries fazem isso.

[Maykel-ctba 233]

Media Queries!

 

@media (min-width:1px) and (max-width: 759px)
{
  /* CSS 01 */
}

@media (min-width:760px) and (max-width:1024px)
{
  /* CSS 02 */
}

:yes:

[Williame 0]

  Em 04/06/2013 at 17:13, Maykel-ctba disse:

Media Queries!

 

@media (min-width:1px) and (max-width: 759px)
{
  /* CSS 01 */
}

@media (min-width:760px) and (max-width:1024px)
{
  /* CSS 02 */
}

:yes:

 

Isso ai funciona como ?

[Williame 0]

  Em 09/06/2013 at 15:49, Williame disse:

Isso ai funciona como ?

 

 

@Edit

 

Perfeito, pesquisei mais na net sobre isso.. muito bom