Site deformado em resolução menor a 1024 x 768

[tcjinformatica 0]

Bom dia companheiros aqui do fórum, venho por meio deste mais uma vez

solicitar auxilio ao conhecimento de vocês...

 

É o seguinte, meu site fica com algumas coisinhas fora do seu devido lugar

quando a resolução da tela do computador é entre 800 x 600 e 1024 x 768.

 

Na verdade... até onde notei, só o campo de busca que fica ao lado do menu

que fica fora do lugar, ou seja, ele fica encima de uma parte do menu do site.

 

Como resolver tal situação no CSS?

 

Obrigado

[reidark 5]

Você teria como mostrar uma print ou colar o código aqui pra gente?

Você já testou seu site em smarthphones, tablets e afins? Veja se neles o site também fica deformado, caso ele fique, é falta do famoso "design responsivo".

 

Procure mais sobre esse termo.

 

Abraços.

[tcjinformatica 0]

Caro Reidark, obrigado por esta ajudando...

 

É o seguinte, já testei meu site em uns 3 smartphones e mais uns 3 tablets, nos tablets notei que ele estava normal... no smartphones, alguns ficaram muito bons e outro não.

 

Vai ai o link do site para averiguar

 

www.tcjinformatica.com.br

 

Estou começando agora nessa área e consequentemente vou rodar para aprender bem e pegar os macetes.

[William Bruno 1501]

Comece do básico. Valide seu html e css

http://validator.w3.org/check?uri=www.tcjinformatica.com.br&charset=%28detect+automatically%29&doctype=Inline&group=0

[tcjinformatica 0]

Caro William Bruno... O que eu não entendo na validação é que faço o que ela manda, e salvo novamente meu css no servidor, ai

no validador fica tudo perfeito, mais o site da fica quase que totalmente deformado.

Veja na validação abaixo de uma das partes do css que mostra esta com um erro, pede pra fechar com /> ao invés de >.

Vou fazendo isso ( fechando com /> ao invés de > )onde pede e os erros de validação vão diminuindo, mais quando consigo

toda a validação e jogo o css limpo novamente para o servidor, o site fica deformado quase que completamente. Bom, não fiz

isso hoje não certo ( a validação ), mais a uns 4 meses atrás tentei e deu esse problema.

1. Linha 33, Coluna 67 : tag final de "link" omitido, mas OMITTAG NÃO foi especificado

   <Ligação href = "Estilos / imgface.css" rel = tipo de "estilo" = "text / css" >

   Você pode ter esquecido de fechar um elemento, ou talvez você quis dizer com "auto-fechar" um elemento, ou seja, terminando com "/>" em vez de ">".

2. Linha 33, coluna 1 : tag de início estava aqui

   < ligação href = "Estilos / imgface.css" rel = tipo de "estilo" = "text / css">

[William Bruno 1501]

Os validadores verificam erros básicos de sintaxe.

 

É como escrever em português errado. Escrever por exemplo "vossê" e não "você".

Não há motivo para não validar, são erros da grafia. Corrija-os.

 

Muitas vezes vc fez algo tão errado mas tão errado, que só quando vai validar, é que consegue corrigir, ou depois de validar, que o erro realmente aparece.

 

 

Se você validou e o seu site ficou deformado, então vc precisa realmente estudar css e box model. Validar não estraga o seu site, apenas trouxe a tona os seus erros.

[tcjinformatica 0]

Obrigado pela tamanha orientação, mim diga por favor qual o erro nessa linha 33 do código acima?

 

Ou o erro seria dentro do css?

[William Bruno 1501]

Vc está usando um doctype de xHTML, então todas as tags devem ser fechadas.

 

Troque:

<link href="estilos/imgface.css" rel="stylesheet" type="text/css">

por:

<link href="estilos/imgface.css" rel="stylesheet" type="text/css" />

[Diogo Alves da Silva 2]

Olá,

Como o reidark disse, isso se trata de um caso de design responsivo.

Tenho aqui um excelente artigo falando sobre essa nova forma de se desenvolver front-end, espero que seja útl.

http://tableless.com.br/introducao-ao-responsive-web-design/

 

Abraços, Diogo.

[andersonseifert 10]

Cara andei olhando seu Codigo, brother nao se usa right da forma que usou ali hoje temos distintas resoluções no mercado e voce nao vai conseguir acompanhar usando dessa forma no seu CSS valide como o Moderador sugeriu ou de um float:right; ve se resolve.

[vonzuben 12]

Procura estudar Bootstrap !