Page Resize

Jeff Dias · Setembro 5, 2008

Boa Noite.

Estou usando o Dreamweaver Cs3 para criar um site (simplérrimo) rs.

Estou criando por notebook e a resolução da tela é de 1280 por 800, e na criação é tudo uma beleza mas se testo em outros computadores ou aumento a resolução da tela, o firefox e até o IE7 criam scrolls e cortam um pedaço da tela.

minha questão é como posso fazer para toda a página se adapte ao tamanho de video do usuario??

Espero ter explicado claramente..

P.S - não estou usando tabelas, nada do modo design do Dreamweaver.

Abraços.

Obrigado.

Eduardo Villa · Setembro 5, 2008

Sempre que vou desenvolver um site me pergunto isso...

1024 x 768 ou 800 x 600

Bom Jeff Dias, pra mim a melhor configuração para se desenvolver um site é de 800 x 600... ñ superior, pois a maiorias das pessoas ainda usam esse tipo de configuração no seu monitor...

Valores em %, vai se adaptar as configurações do monitor... Já em PIXEL será um valor FIXO!!!

Ex: Se uma tabela com valor de 100% ela vai se adapatar ao monitor, pois ela irá ocupá-lo totalmente(de uma ponta a outra), agora se você fizer essa tabela usando 800x600, quando alguém com uma configuração 1024 x 768 acessar sua página, essa tabela irá aumentar(por causa da configuração do monitor), desarrumando todo o seu site...

É isso, na minha opnião você deve usar PIXELS, e naum %...

E lembre-se nunca 800 x 600 e sim 780 x 600, para que ñ de barra de rolagem horizontal...

Espero ter ajudado

Abraço

Dudesigner

Jeff Dias · Setembro 5, 2008

Obrigado Dudesigner.

Mas no seguinte exemplo:

Minha página tem esse formato:

Ai fiz o seguinte.

Esse parte preta é uma <DIV> com largura de 800px.

No caso a minha intenção na criação era que se o usuário estivesse com resolução de 800x600 o browser cobriria as partes cinzas.

Só para ver se eu entendi.

O que eu fiz esta correto, uma <DIV> onde vai o conteudo com a largura em px de 780 ou 766, assim com a resolução 800x600 o usuario vê o site normalmente sem scroll horizontal e quem usa resoluções mais altas acabaria vendo os lados "cinzas" da página?

Grato.

Morpheus#2005 · Setembro 5, 2008

Amigo, da uma olhada nesse post, acho que vai dar uma clareada na sua cabeça..

Fórum Imasters - Conteúdo é aqui !!!

Good Luck!!!

"Qdo for postar novamente caso tenha mais alguma duvida coloque o seu código para que nós possamos avaliar Ok"

Eduardo Villa · Setembro 5, 2008

Esta correto o seu pensamento Jeff Dias.

Se você usar 800 irá dar barra de rolagem horizontal, então lhe aconselho a colocar um pouco menos... Eu sempre faço com 780 no máximo.

E no caso quem usa 1024 irá ver o fundo cinza na página.

Isso é f***, ja pensei em fazer dois sites uma pra quem usa 800x600 e outro pra quem usa 1024x760, mas além de subir o preço do projeto, serão dois trabalhos kkkk

Espero ter ajudado

Dudesigner

Jeff Dias · Setembro 5, 2008

Olá.

Obrigado pelas respostas.

Realmente eu iniciei esse projeto sem estar cientes desses "problemas", agora esta dificultando muito minha vida rsrs.

De qualquer forma, a noite irei postar o código para que vocês possam me dar uma solução.

Eu entendi mas acho que ainda preciso de uns toques sobre a página.

Obrigado.

Jeff Dias · Setembro 5, 2008

Boa Noite.

Fiz um código simples aqui para mostrar, aparentemente usuários com resolução de 1024 e 800x600 tem uma boa visão da página.

Avaliem, veja se essa é uma boa forma, ou por experiencia vocês acham melhor não.

CODE

<html>
<head>
 
<title> Teste </title>

<style type="text/css">
 
<!--

body {
 
	background-color: black;

	margin: 0 auto;
 
	}
 
#geral {
 
	background-color: #ccc;

	margin: 5px, 10px, 0, 10px;
 
	}
 
p {
 
	font-family: tahoma, verdana, arial;

	font-size: 1em;

	color: black;

	padding: 15px;
 
	}
 
h1 {
 
	color: black;

	padding: 15px;
 
	}
 
-->

</style>
 
<body>
 
<div id="geral">
 
<h1> Teste DIV </h1>
 
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan. 

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 

cubilia Curae; Integer consectetuer sapien in lacus. Cras non sapien sed diam aliquam tempor. 

Maecenas at augue laoreet ante tristique cursus. Nulla et nisl. Integer eleifend risus in erat. 

Morbi porttitor ligula ut metus. Duis rhoncus mauris eget sem. Maecenas posuere. Cras sodales 

lorem a lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

 In dolor nisl, congue scelerisque, convallis in, tempor eu, enim. Nullam id nulla quis orci placerat lacinia. 

Fusce purus. Fusce ut lectus. Fusce eu diam eu nibh adipiscing viverra. 

</p>
 
</div>
 
</body>
 
</html>|

Vi isso no documento que o Morpheus mandou.

Obrigado.

Eduardo Villa · Setembro 6, 2008

Bom Jeff Dias o meu monitor esta com configuração 1024x768 e ñ deu barra de rolagem horizontal... lembre-se, você for usar a tela toda é bom você colocar [padding: 0px;] no BODY para ñ aparecer o fundo preto no caso do TOPO e da margem ESQUERDA...

Dudesigner

Jeff Dias · Setembro 6, 2008

Olá Dudesigner,

Obrigado pela respsta, creio eu no momento esse problema de tamanho de tela está "resolvido", mas agora estou enfrentando uma outra questão.

Uso o Firefox 3.0 e IE 7.

com uma DIV geral na página e todo o conteúdo dentro, eu configuro: margens, padding, position e etc para uma imagem por exemplo, ai no firefox fica do jeito que configurei no código, porém no IE a imagem vai parar no meio da tela, desrespeitando toda a regra no código.

O que poderia ser feito para que no minimo esses 2 browsers estejam na mesma qualidade??

Dúvida rápida: Por que o IE deixa as imagens com uma resolução menor do que com o Firefox?

Obrigado

Eduardo Villa · Setembro 8, 2008

Olá Jeff Dias...

Se você puder, coloque o seu código para ver se tem alguma coisa de errado... Fica mais facil de analisar.

Valew

Jeff Dias · Setembro 9, 2008

Esse é meu código juntamente com o css.

CODE

<!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=utf-8" />
<title>American`s Brotherhood</title>
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
</head>
 
<body>
 
<div id="geral">
 
<img class="imgtop" src="leaf.jpg" />
<img class="logo" src="nome.png" />
 
</div>
 
<div id="nav">
 
<ul>
    <li><a href="#a">Home</a></li>
    <li><a href="#b">Quem somos</a></li>
    <li><a href="#c">Metodologia</a></li>
    <li><a href="##">Investimento</a></li>
    <li><a href="##">Contato</a></li>    
</ul>
 
</div>
 
<div id="info">
 
<div class="title">
 
<h2>Dicas</h2>
 
</div>
 
<h3>Inglês em 1.000 palavras</h3>
 
<p>
Um escritor americano divulgou em seu livro que para ter um nível de compreensão no idioma inglês são apenas necessárias 1.000 palavras. Não te parece pouco?<br>
No livro o escritor (John Books) faz uma lista das 1.000 palavras mais utilizadas no dia-a-dia dos nativos americanos, assim isso pode servir como uum ótimo guia de estudo que irá tirar todo aquela frustração de ter que aprender centenas dee milhares de palavras para se comunicar.
</p>    
 
</div>
 
</body>
</html>
 
 
*********************************** CSS ***********************************************
 
@charset "utf-8";
/* CSS Document */
 
* {
 
	margin-top: 0;
 
	}
 
 
body {
 
	background-image:url(bg.png);
	background-repeat:repeat-x;
 
	}
 
#geral {
 
	background-color:#000000;
	width: 760px;
	height:700px;
	position:relative;
	margin: 0 auto;
	display:table;
 
	}
 
.imgtop {
 
	margin-top:0;
	width:760px;
	height: 480px;
 
	}
 
.logo {
 
	position:absolute;
	top: 30px;
	left:252px;
 
	}
 
#info {
 
	background-color:#000000;
	width:220px;
	height: 320px;
	position:absolute;
	top: 115px;
	left: 760px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	color:#FFFFFF;
	padding:10px;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
 
	}
 
h2 {
 
	color:#FF9900;
	border-bottom-style: double;
 
	}
 
h3 {
 
	color:#FF9900;
 
	}	
 
.txt {
 
	font-family:Tahoma;
	color:#FF9900;
 
	}
 
.txt_info {
 
	font-family: Tahoma, Verdana, Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	text-align: inherit;
 
	}
 
 
#nav {
 
	margin: auto;
	padding: 0;
	position: absolute;
	top: 38px;
	left: 530px;
 
	}
 
#nav li {
 
	list-style:none;
	display:inline;
 
	}
 
#nav li a {
 
	font-family:Tahoma, verdana, arial, helvetica;
	font-size: 14px;
	font-weight:700;
	color: #FFFFFF;
	padding: 5px;
	text-decoration:none;
 
 
	}
 
#nav li a:hover {
 
	text-decoration:underline;
	color: #FFFFFF;
 
	}
 
#nav li a:active {
 
	color:#FFFFFF;
	background-color:#000000;
	padding: 5px;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
 
	}
 
#nav li a:visited {
 
	color:#FFFFFF;
 
	}
 

Esse ai é meu código, vou postar juntamente as Screenshots de exemplo nos IE e FF.

Firefox.

IE7

É isso ai !

Muito obrigado aos que estão se dando ao trabalho !!

Abraço.

Eduardo Villa · Setembro 9, 2008

Jeff, desculpe mas não estou conseguindo visualizar o seu problema, montei a página com o seu código e não é possível analisar, pois está tudo fora do padrão no meu navegador...

Se puder mande os arquivos zipados, para eduardobarrosvilla@hotmail.com com as fotos e as páginas, que analiso pra você...

Abraço

Dudesigner

alebae · Setembro 10, 2008

Se as imagens estiverem dentro da div geral, eu acho que esse margin: 0 auto é onde possivelmente esteja o probleminha, tente dar uma olhada neste tutorial (CLIQUE AQUI)

Scaico · Setembro 11, 2008

Jeff, eu creio que o pessoal do fórum de Webstandards: CSS / XML / XHTML / HTML pode te ajudar, já que o problema todo aí está no CSS e você só está usando o Dreamweaver como editor, e não no modo gráfico.

Um dos problemas que eu identifiquei no site foi o seguinte:

a div #info não está dentro da div #geral. Desse modo, se você redimensionar o seu navegador, diminuindo a largura dele, as margens da div vão se ajustar automaticamente, mantendo ela no centro. PORÉM, a div #info vai continuar onde ela estava, já que ela tem a posição ABSOLUTA, e não RELATIVA.

o seu logo está "andando" pelo seguinte motivo:

.logo {

position:absolute;
top: 30px;
left:252px;

}

aqui, você diz que o logotipo deve andar 252px a partir da esquerda. Só que o Firefox está ignorando isso.

Uma "gambiarra" para resolver isso, seria

.logo {

position:absolute;
top: 30px;
left:252px !important;
left 0px;
}

mas é uma gambiarra, não é aconselhavel.

Talvez o melhor seja rever o código e as posicoes dos elementos.

\o

Jeff Dias · Setembro 12, 2008

Alebae e Scaico,

Obrigado pelas respostas, vou conferir o código novamente, e arrumar as posições de uma forma mais clara !!

Dudesigner,

Os arquivos estão no seu e-mail como pediu!!

Abraços !

Eduardo Villa · Setembro 12, 2008

Bom Jeff Dias já foi respondido o seu e-mail e vou postar a mesma explicação para que a galera que esteja passando por isso, corrijam seus códigos também...

O seu problema são os HACKs... (cada browser analisa uma coisa, com isso danifica o layout)

Exemplo:

#wrapper {

border: 10px solid black;

width: 770px; (IE5 ...considera este valor)

voice-family: inherit;

width: 750px; (mas este é o valor nos outros)

}

html>body #wrapper {

width: 750px; (já o IE7 considera "750px" como largura padrão)

}

Caso alguém queira saber mais, Clique Aqui

Valew

Dudesigner

Arquivado

Page Resize

Recommended Posts

Jeff Dias 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeff Dias 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Morpheus#2005 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeff Dias 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeff Dias 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeff Dias 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeff Dias 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

alebae 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Scaico 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeff Dias 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante