Ir ao conteúdo
  • Cadastre-se
Matheus Bombardi

RESOLVIDO Erro no tamanho do layout do site

Recommended Posts

Fala galera, beleza?

 

A pouco tempo, terminei o meu tcc (Graças a Deus) e graças a uma galera aqui do fórum, com um diferencial a mais ao @dif, queria agradece-los por me ajudarem, pois com a ajuda de vocês consegui atingir a nota 9.8 no meu trabalho final! Valeu!

 

Porém, vamos a um erro do site que eu notei e quero consertar...

 

Criei o site, baseado em uma tela 1920x1080, então o layout ficou configurado a este tipo de tela... Ai eu vou ver o mesmo site em um notebook, por exemplo, e o site fica desconfigurado, fica em desproporção algumas coisas... Como posso arrumar isto? Alguma opção de fazer o site se ajustar sem ter que fazer o responsivo... tem como?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acredito que o correto é você utilizar porcentagens para os campos, algo como:

<table width="100%">  <tr>    <td width="10%">      seus campos aqui    </td>  </tr></table> 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não é em tabelas o problema... vou mostrar...

 

Esta é a visão no meu pc com resolução 1080p..

bENy3Ab.png

 

Esta é a visão em um notebook ou pc com resolução inferior a 1080p...

Eq5NE5Y.png

 

 

*apenas recortei uma parte que da erro... consegue entender melhor agora @cristianogro ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não é em tabelas o problema... vou mostrar...

 

Esta é a visão no meu pc com resolução 1080p..

bENy3Ab.png

 

Esta é a visão em um notebook ou pc com resolução inferior a 1080p...

Eq5NE5Y.png

 

 

*apenas recortei uma parte que da erro... consegue entender melhor agora @cristianogro ?

Ok, sugeri tabelas porque você não tinha colocado código algum, pode não ser em tabelas, talvez alguma div, vai de como fez, provável que seja uma table ou div onde o width onde passou batido e o valor ficou fixo em px e não porcentagem. Sugiro abrir no IE e abrir as ferramentas de desenvolvedor pressionando F12, no painel que se abre vá na aba "HTML", clique na seta e selecione exatamente esse fundo cinza que está cortando, vai cair exatamente no código do componente que cria esse fundo, veja se é uma table ou uma div, verifique as propriedades do width como estão, você pode até alterar por ali para testar, pode ser problema de CSS também.

 

Ou posta o código aqui dessa parte que faz esse fundo cinza.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Matheus Bombardi

 

Isso acontece,  porque foi definido as medidas em px.

Para fazer a adaptação em diversas resoluções precisas usar a medida  líquida( em %) no seu "container" ,ou seja, o elemento DIV que engloba o site todo.

Por exemplo se quer que fique sempre em tela cheia independente da resolução você seta o width do container para 100%.

 

A dica que o @cristianogro falou está correta, porém nunca recomende a inserção do css inline.. pois o grau de procedência é o maior. Declare sempre que possível os atributos css em um arquivo separado.

 

 

Sugestão:

 

Ao invés de declarar width 100%, você pode utilizar o sistema grid 960.  Consiste em criar o elemento "mestre" com 960px e centraliza-la com o "margin: 0 auto"

O porque disso:  a resolução mais comum ainda hj em dia é de 1024 x 768 ( monitor de 14'').. usando esta medida você deixa visível o site das resoluções 1024 x 768 para cima.

 

Eu gosto muito deste modo. Mas como cada caso é um caso...  então escolhe a que melhor lhe agrada :)

 

Melhor que isso, só convertendo para o método responsivo mesmo. ( o que eu acho melhor)

Compartilhar este post


Link para o post
Compartilhar em outros sites

@cristianogro

 

Então, fiz o que você me disse e toda div termina no mesmo espaço onde está terminando o body...

JGmKUrW.png

 

E caso eu aumente um pouco a janela, os valores mudam porém continua o mesmo corte...

 

Uma coisa que eu fiz de errado quando eu fiz esse site, foi fazer uma css pro site inteiro... Porém, não entendi como funciona esse valor de 100%... por como vou determinar o tamanho de cada coisa com a porcentagem?

 

A baixo segue a CSS...

/* CSS Document *//* http://meyerweb.com/eric/tools/css/reset/    v2.0 | 20110126   License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}#topo{	background:url(../img/bg_topo.jpg);	height:143px; 	width:100%;	}#topo_conteudo{	width:960px;	height:142px;	margin:0 auto;		}#logo{		float:left;}#painel{	float:right;	background:url(../img/painel_info.png);	width:263px;	height:129px;}#fone{	width:140px;	height:14px;	font-size:13px;	margin-top:30px;	margin-left:50px;	}#email{	width:250px;	height:14px;	font-size:13px;	margin-top:14px;	margin-left:50px;	}#social{	width:250px;	height:14px;	font-size:13px;	margin-top:11px;	margin-left:50px;		}.fonte_topo{	color:#92979d;		font-family:Mangal;}#menuConteudo{	background:url(../img/menu_bg.png) 0 0 repeat-x;	height:80px;	width:100%;}ul#nav li{	display:inline;	float:left;	background:url(../img/menuSeparador.png) center right no-repeat;	margin:20px 30px 0 0;	font-family:Mangal;	}ul#nav li a{	color:white;	font-size:14px;	text-transform:uppercase;	text-decoration:none;	margin:20px 30px 0 0;	}ul#nav li a span {	font_size:12px;	text-transform:lowercase;	display:block;		color:#606168;	padding-right:30px;}ul#nav{	margin:0 auto;	width:1030px;	margin-left:480px;	}ul#nav li a:hover span{	color:white;	}#slider{	background:url(../img/bg_slider.png) 0 0 repeat-x;	height:302px;		}#btn_proximo{	float:right;	margin-top:120px;	}#btn_anterior{	float:left;	margin-top:120px;	}#slider_ativo{	width:961px;	margin:0 auto;		}#slider_conteudo{	width:716px;	margin:0 auto;	padding-top:100px;	}#img_slider{	float:left;		margin-right: 22px;}#img_sliderdois{	float:left;		margin-right: 10px;	padding-top:1px;}#img_slidertres{	float:left;		margin-right: 22px;}#slider_conteudo h1{	font-size:24px;	color:#4a8d8a;	margin-bottom:22px;}#slider_conteudo p{	font-size:12px;	color:#5e5e5e;	line-height:17px;	margin-bottom:22px;	text-align:justify;		}#conteudo_list{	height:260px;		}#conteudo2{	width: 960px;	margin:0 auto;	height:326px;		}#NOC, #RdServer{	margin-top:43px;	width:287px;	height:265px;	float:left;	margin-right:30px;	line-height:17px;		}#leiamais1{	margin-top:20px;}#leiamais2{	margin-top:6px;}#leiamais3{	margin-top:19px;}#Seguranca{	margin-top:43px;	width:287px;	height:265px;	float:left;	line-height:17px;}#img_papel{	float:left;}#img_server{	float:left;}#img_seguranca{	float:left;}.tituloConteudo{	float:left;	font-size:12px;	text-transform:uppercase;	margin-top:17px;	margin-left:7px;	margin-bottom:60px;	}.paragrafoConteudo{	font-size:14px;	color:#787777;	padding-bottom:26px;	padding-top:130px;	text-align:justify;	}#barra{	background:url(../img/barra_bg.png) repeat-x;	height:25px;	width:960px;	margin-left:450px;	}#outras_info{	width:957px;	margin:0 auto;		}#noticias{	width:294px;	height:165px;	margin-top:3px;	float:left;		}.titulo{	font-size:14px;	font-weight:bold;		}#noticias img{	magin-top:10px;	}.dataNoticia{	font-family:Mangal;	font-size:12px;	color:#919191;	}.subtitulo{	font-size:14px;	font-family:Mangal;	color:#427593;	font-weight:bold;		}.textoNoticia{	color:#3b3838;	font-family:Mangal;	font-size:13px;		text-align:justify;	}#tituloNoticia{	margin-bottom:20px;	}#sobreNos{	width:400px;		float:right;	text-align:justify;}.aspas{	font-size:100px;	color:#3b3838;	float:left;	}.textoDestacado{	font-size:14px;	color:#3b3838;		}.missao{	font-size:14px;	color:#3b3838;	font-weight:bold;	margin-left:160px;		}#rodape{	background:url(../img/bg_rodape.png);	height:127px;	float:left;	width:100%;	}.subtitulo2{	font-size:12px;	font-family:Mangal;	color:#CCC;	text-align:center;	margin-top:110px;	text-decoration:none;}.subtitulo2 a:hover{	font-size:12px;	font-family:Mangal;	color:#FFF;	text-align:center;	margin-top:110px;	text-decoration:none;}#conteudoSobre{	opacity:0.97;	background-color:#1c1e23;	height:900px;	border:solid 1px #1c1e23;	width:900px;	margin:0 auto;	}#conteudoSobre h1{	font-size:23px;	color:#FFF;	font-family:Mangal;	text-align:center;	margin-top:30px;	margin-bottom:40px;}#conteudoSobre p{	font-size:14px;	color:#FFF;	font-family:Mangal;	text-align:justify;	line-height:17px;	width:800px;	margin-left:50px;}#conteudoSobre h2{	font-size:16px;	color:#FFF;	font-family:Mangal;	margin-left:20px;	text-align:center;}#conteudoSobre h3{	font-size:14px;	color:#FFF;	font-family:Mangal;	margin-top:100px;	text-align:center;	margin-bottom:100px;}#conteudoSobreUm{	opacity:0.97;	background-color:#1c1e23;	height:1100px;	border:solid 1px #1c1e23;	width:900px;	margin:0 auto;	}#conteudoSobreUm h1{	font-size:23px;	color:#FFF;	font-family:Mangal;	text-align:center;	margin-top:30px;	margin-bottom:40px;}#conteudoSobreUm p{	font-size:14px;	color:#FFF;	font-family:Mangal;	text-align:justify;	line-height:17px;	width:800px;	margin-left:50px;}#conteudoSobreUm h2{	font-size:16px;	color:#FFF;	font-family:Mangal;	margin-left:20px;	text-align:center;}#conteudoConosco {	opacity:0.97;	background-color:#1c1e23;	height:900px;	border:solid 1px #1c1e23;	width:900px;	margin:0 auto;	}#contato{	width: 900px;	height: 900px;	text-align:center;	margin-top:60px;	}#contato h1{	font-family:Mangal;	font-size:16px;	color:#CCC;	}#cadastro{	width: 1900px;	height: 605px;}#login{	width: 1900px;	height:628px;	}#login object{	padding-bottom: 10px;	}	.style_paineldelogin {	font-family: Mangal;	font-size: 20px;	font-weight: normal;	color: #333;}.style_loginesenha {	font-family: Mangal;	font-size: 14px;	color: #999;	font-weight: normal;}/*********************************//*********************************/#reserva{	width:1600px;	height:600px;	margin:0 auto;	padding-left:30px;	padding-top:5px;	margin-top:50px;}#reservaum{		width:500px;	height:600px;	float: left;}#reservaum input[type=text]{	width:400px;	}textarea[type=text]{	width:400px;	heigth:400px;	}#reservaum h1{	margin-left:40px;	font-size:16px;	font-family:Mangal;	}#gerenciamento{width: 500px;height: 500px;float: left;}#gerenciamento h1{	margin-left: 80px;	font-size: 16px;	font-family:Mangal;}#gerenciamento a{	font-family: Mangal;	font-size: 14px;	color: #0066CC;	margin-left: 80px;}#bemvindo{	text-align: center;	padding-top: 10px;}#bemvindo a{	font-family: Mangal;	font-size: 14px;	color: #B8B8B8;}#pesquisar{	width:500px;	height: 500px;	float: left;} 

 

Lembrando que está dando erro em toda parte a direita do site quando a mesma está com tamanho reduzido...

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Matheus Bombardi,

 

Veja um exemplo simples do uso da medida liquida:  http://jsfiddle.net/mr0zqnzv/

 

Claro que o exemplo não tá 100%.. pode conter erros porque fiz no rapidão.. mas a ideia é você entender como funciona a percentagem.

Altere o tamanho da janela arrastando as divisórias.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@dif

 

Cara, agora entendi como funciona! Então no caso se eu usar a medida líquida, caso eu abra em um notebook, o site que foi planejado numa tela 1080p não sofrerá alterações no seu layout?

 

E outra coisa, eu li sobre esse grid960 e achei interessante, porém eu vi um tutorial na net e não entendi muito bem como escolher as grids e como funciona... você sabe/indica algum video que explique um pouco mais sobre? eu vi este site:

http://www.mochileirodigital.com.br/tecnologia/internet-tecnologia/aprenda-a-utilizar-o-grid-960-em-seus-projetos-de-web/

*Deixei em spoiler pois não sei se posso por links de terceiros aqui... caso não possa, apenas exclua..

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Cara, agora entendi como funciona! Então no caso se eu usar a medida líquida, caso eu abra em um notebook, o site que foi planejado numa tela 1080p não sofrerá alterações no seu layout?

 

 

Mais ou menos isso. Só que tens que cuidar para utilizar a medida em % em imagens também caso queira que elas acompanhem o "resize" da janela.

Veja o exemplo online : http://jsfiddle.net/dcpnnhox/

Arraste a divisória vertical para a direita até surtir "efeito"

 

Sugetões:

 

Use a posição relativa nos elementos-filhos do seu container.

Use o inherit na imagem

 

exemplo:  http://jsfiddle.net/dcpnnhox/1/

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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×