[Resolvido] folha de estilo alternativa

[ulfreitas 6]

Bom dia

 

Pessoal é o seguinte:

To fazendo um projeto pra um escritório, grande parte do pessoal usa resolução 800X600 com IE (provavelmente IE6), mas tambem pessoas com resolução 1024X768 vão acessar o site. Primeiramente eu pensei em fazer um layout fluido, mas não está compensando.

 

Pesquisando na net achei esse artigo: http://maujor.com/tutorial/alternatecss.php, então pensei se não poderia funcionar da seguinte forma: quando o internauta acessar a pagina um script ler a resolução de tela q ele ta usando se for inferior a 1024X768 habilitar a folha de estilo de 800X600 e se for superior ou igual a 1024X768 habilitar a folha de estilo 1024X768

 

Tem como fazer isso? Alguem possui um script parecido ou poderia me ajudar a fazer ele? pq manjo muito pouco em javascript, a parte de ler a resolução creio q seria facil pois já vi varios modelos desse script na internet, mas a parte de carregar determinada folha de estilo é o q nao sei fazer.

 

Obrigado pela atenção do pessoal desse forum.

[Meh 0]

bem, eu estou fazendo um desses, e uso a medida em porcentagem.. é melhor pq o layout se expande ou diminui conforme a resolução do computador de outras pessoas

por exemplo, a minha é de 1280x800.. não é só 800x600 e 1024x768.. também tem a de 1680x1024.. tem muitas ._.

Me pergunto porque as pessoas não criam um padrão para resolução :P

de qualquer forma, javascript é mt trabalhoso.. outro metodo bem trabalhoso é criar um cookie com várias resoluções e o usuário escolher quando entra no site. mas o melhor e mais fácil é o que usa a medida %.

Ainda não pensei nas fontes, em breve chego lá. por enquanto fico nos inputs, e no css..

 

não sei se é isso que você quer saber, qualquer coisa, ignore. http://forum.imasters.com.br/public/style_emoticons/default/excl.gif

[Desnickadu 0]

eu tb acho mais facil você fazer um layout liquido do que fazer dois layouts '-'

 

se é pra intranet e só vão utilizar essas duas resoluções, acredito que não seja um layout tão complicado onde vá precisar de muitos hacks pro IE.

[Evandro Oliveira 331]

<script type="text/javascript">

window.onload = function(){

estilo = document.createElement('link');

estilo.rel = "stylesheet";

estilo.type = "text/css";

estilo.media = "screen";

res = window.screenWidth;

if(res = 800) estilo.href = "800px.css";

else estilo.href = "maior.css";

document.getElementsByTagName('head')[0].appendChild(estilo);

}

</script>

[ulfreitas 6]

o layout fluido nao caberia para esse projeto, tem muita imagem pra ser controlada, e um layout fixo de 1024 é o suficiente, porem algumas pessoas irão visualizar o site com resolução de 800X600, por acho duas folhas de estilo seria mais facil de fazer do q controlar todos os elementos dentro de um layout fluido.

 

Evandro, primeiro obrigado pela ajuda, fiz da seguinte forma

Comecei colocando o vermelho como default e se a resolução (variavel res) for =800 chamaria o azul.css.

os css eu coloquei apenas um body {background: determinada cor;}

 

<link href="vermelho.css" rel="stylesheet" type="text/css" media="screen" />
<link href="azul.css" rel="alternate stylesheet" type="text/css" media="screen" title="estilo_azul" />

<script type="text/javascript">
window.onload = function(){
    estilo = document.createElement('link');
    estilo.rel = "stylesheet";
    estilo.type = "text/css";
    estilo.media = "screen";
    res = window.screenWidth;
    if(res = 800) estilo.href = "azul.css";
    else estilo.href = "vermelho.css";
    document.getElementsByTagName('head')[0].appendChild(estilo);
}
</script>

Mas a tela sempre fica vermelha, e se eu altero o if para res == 800

if(res == 800) estilo.href = "azul.css";

a tela sempre fica azul.

 

To fazendo algo errado?

[Evandro Oliveira 331]

eu e minha mania de enviar códigos sem testar =x

 

<script type="text/javascript">
window.onload = function(){
    estilo = document.createElement('link');
    estilo.rel = "stylesheet";
    estilo.type = "text/css";
    estilo.media = "screen";
    res = window.screen.width;
    if(res == 800) estilo.href = "azul.css";
    else estilo.href = "vermelho.css";
    document.getElementsByTagName('head')[0].appendChild(estilo);
}
</script>

só um toque: Ao alterar a resolução, será necessário FECHAR a aba/navegador para que o JS leia a nova resolução. Apenas atualizar a página vai fazer com que a resolução antiga se mantenha

[Thiago Retondar 18]

Vai fazer com JavaScript? Quer que eu mova o tópico para essa área?

 

Só lembre que se o cliente estiver com o JavaScript desabilitado, essa escolha de resolução não irá funcionar.

 

Dá pra fazer com PHP, se estiver usando.

 

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

[ulfreitas 6]

Evandro valeu vou tentar de novo, depois eu falo se deu certo;

 

Thiago pode ser com php tambem, o q funcionar tá ótimo, se você puder mover o topico pra área correta eu agradeço

obrigado ;)

[Thiago Retondar 18]

Vou mover o tópico para PHP, então, pois para trabalhar na parte client side você já recebeu respostas. ;)

 

Tópico movido:

 

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif PHP

 

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

[ulfreitas 6]

Valeu Thiagão ;)

 

Evandro, kra você é o kra, tá funcionando bem pra kramba,

quanto a essa parte:

só um toque: Ao alterar a resolução, será necessário FECHAR a aba/navegador para que o JS leia a nova resolução. Apenas atualizar a página vai fazer com que a resolução antiga se mantenha

então, eu não precisei fechar o navegador, só alterei a resolução e atualizei a página e ele pegou a nova cor (pelo menos aqui no meu pc, testei com IE, Chrome, Mozila, Safari), ow e tá simples teu código, muito fácil de entender, eu via cada coisa cabulosa na internet, não entendia nada :huh: , valew mesmo maninho tá de parabéns.

 

Obrigado a todos que se importaram em me ajudar, valew mesmo, esse forum é o melhor.

[Evandro Oliveira 331]

então, eu não precisei fechar o navegador, só alterei a resolução e atualizei a página e ele pegou a nova cor (pelo menos aqui no meu pc, testei com IE, Chrome, Mozila, Safari), ow e tá simples teu código, muito fácil de entender, eu via cada coisa cabulosa na internet, não entendia nada :huh: , valew mesmo maninho tá de parabéns.

 

Deve ter sido bug do IETester então. Que bom que funcionou. Javascript é uma linguagem de implementação relativamente simples. Requer mais lógica do que conhecimento proprietário quando se trata de efeitos 'básicos'