Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

Erro no tamanho do layout do site

Matheus Bombardi

Por Matheus Bombardi
em Web e banco de dados

 Compartilhar
Ir à solução Resolvido por DiF,

Posts recomendados

Matheus Bombardi
 

Matheus Bombardi

Postado
Postado

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?

Link para o comentário
Compartilhar em outros sites
Matheus Bombardi
 

Matheus Bombardi

Postado
  • Autor
Postado

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 ?

Link para o comentário
Compartilhar em outros sites
cristianogro
 

cristianogro

Postado
Postado

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.

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@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)

Link para o comentário
Compartilhar em outros sites
Matheus Bombardi
 

Matheus Bombardi

Postado
  • Autor
Postado

@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...

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@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.

Link para o comentário
Compartilhar em outros sites
Matheus Bombardi
 

Matheus Bombardi

Postado
  • Autor
Postado

@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..

Link para o comentário
Compartilhar em outros sites
  • Moderador
  • Solução
DiF
 

DiF

Postado
  • Moderador
  • Solução
Postado

 

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/

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novas respostas.
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades 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

Mais

×
×
  • Criar novo...