Jump to content


Photo

Padding Ou Margin Com Problemas...


  • Faça o login para participar
10 replies to this topic

#1 Bruno Augusto

Bruno Augusto

    ∙•● Restarting... ●•∙

  • Usuários
  • 1968 posts
  • Sexo:Não informado
  • Localidade:Itajubá

Posted 19/08/2006, 09:06

Seguinte, como já sabem eu tô partindo pro tableless.

Daí como eu uso 1024x768 meus layouts acabam dando certo pra mim, mas quando redimensiono pra 800x600 dá problema com os paddings e margins.

Então eu corrijo os paddings e margins para o 800x600 e quando volto pra minha resolução, os mesmos se bagunçam novamente.

E eu fico nesse beco sem saída.

Vejam a foto:

Posted Image
Esse é corrigido para 800x600

O correto seria o espaço entre o menu e o conteúdo ser da mesma largura da borda direita dos mesmo (bem fina).

O CSS envolvidos são:

#wrapper
{
	background-color : #ffffff;
	margin : 0 auto;
	text-align : left;
	padding : 3px;
	vertical-align : top;
	overflow : hidden;
	height: 100%;
}

#main
{
	float : right;
	margin : 5px 6px 5px 0px;
	_margin : 5px 3px 5px 0px;	
	padding : 7px 5px 5px 10px;
	vertical-align : top;
	width : 72%;
}
	
	/* Menu */
	
#menu
{
	float : left;
	padding-right: 5px;
	width : 24%;
}

#menu .title
{
	background-color : #3B4041;
	font-size:10px;
	vertical-align:middle;
	_vertical-align: top;
	font-weight:bold;
	color:#FFF;
	height: 12px;
	padding: 6px;
	overflow: hidden;
}

#menu .block
{
	font-size:9px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding:2px 0px 2px 0px;
}

#menu .content
{
	background-color:#FFFFFF;
	padding:2px 0px 2px 7px;
}
Referentes ao menu, o corpo e o "invólucro" principal.

Para corrigir meu problema para 1024x768 basta eu alterar o width: 72% de #main para 73%. Mas como teu problemas nos paddings ou nos margins ou nos dois) essa alteração corretiva bagunça a outra resolução.

Como poderia resolver?

[]'s

#2 _Samuca_

_Samuca_

    samuelmachado.com

  • Usuários
  • 1062 posts
  • Sexo:Masculino
  • Localidade:São Bento do Sul - SC

Posted 19/08/2006, 11:33

faz um css para cada resolução ;)
--
Samuel Machado
www.samuelmachado.com

#3 Bruno Augusto

Bruno Augusto

    ∙•● Restarting... ●•∙

  • Usuários
  • 1968 posts
  • Sexo:Não informado
  • Localidade:Itajubá

Posted 19/08/2006, 12:43

Ah cara mas aí seria um trabalho desnecessário pois, até onde eu consigo ver no CSS, são no máximo 3 classes com problema.

E o CSS tem muito mais do que isso que postei.

Tem otra solução?

-----
EDIT
-----

Consegui graças à possibilidade de poder usar valores fracionados como medida de porcentagem. Exemplo pra quem quiser: 95.2% :D

[]'s

Edição feita por: Jackpot, 20/08/2006, 15:26.


#4 Perroud

Perroud

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 22/08/2006, 20:26

Se você fizer um "container" em 800x600, pode trabalhar com percentual numa boa.
Se você fizer o layout sem "container" trabalhando com pixels, pode ser uma saída.
Mas o melhor mesmo é você trabalhar com "liquid layout" e com percentual para "width".

Atinge grandes resoluções como a minha, por exemplo, 1600x1200 e pode atingir um usuário que tem um monitor de 14" ainda... com 640x480.
[]'s
Perroud

perroud[at]gmail[dot]com

#5 Bruno Augusto

Bruno Augusto

    ∙•● Restarting... ●•∙

  • Usuários
  • 1968 posts
  • Sexo:Não informado
  • Localidade:Itajubá

Posted 22/08/2006, 22:15

Eo que é "liquid layout"?

[]'s

#6 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 23/08/2006, 07:17

Aperta a tecla do Windows+R - digita: "C:\Arquivos de programas\Internet Explorer\IEXPLORE.EXE". Aperta F4 e digita www.google.com.br, digita liquid layout e aperta enter. Tá lá mininão:

Resultados 1 - 10 de aproximadamente 8.320.000 para liquid layout (0,33 segundos) 

O primeiro site que apareceu aqui na lista (Max Design - Liquid layouts the easy way) tem um texto excelente, realmente vale a pena a leitura!! Vamo lá brunão, você tá evoluindo cada vez mais desde que eu te encontrei no fórum !! :P
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#7 Bruno Augusto

Bruno Augusto

    ∙•● Restarting... ●•∙

  • Usuários
  • 1968 posts
  • Sexo:Não informado
  • Localidade:Itajubá

Posted 23/08/2006, 12:03

Pois é cara, mas é materia em inglês eu com material estrangeiro eu evoluo muuuuuito devagar.

A primeira coisa que fiz ao ver "liquid layout" foi dar o CTRL+TAB NO FIREFOX (não IEca de jeito nenhum <_<) e dei um Google It.

E entrei nesse e nos outros 5 sites subsequentes da listagem, mas impaquei no quesito idioma.

Eu me viro em inglês, mas o primeiro contato que preciso ter com algo novo tem de ser na minha língua. Ou no máximo espanhol que eu assemelho bem.

[]'s

#8 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 23/08/2006, 13:08

Desculpa cara, achei que você manjava inglês, a maioria das suas funções tem nome em inglês:

function getDaElementAndDoThisWitThisCrap(){
// ...
}

O liquid layout é mais ou menos assim, os elementos da página tem seu tamanho especificado em %, ou seja, aumentou ou diminuiu a janela o layout modifica junto. Tem algumas diferenças entre esses layouts, ele pode ser somente líquido (tudo em %), liquido e fixado (alguns elementos com tamanho definido), fixado (tudo com tamanho definido, é o mais usado hoje em dia, se diminuir a janela aparece barra de rolagem). E tem também os layouts feitos em EMs, que são ajustados de acordo com o tamanho da fonte do navegador do usuário.

O principal é você fazer um esquema de como será sua página com medidas FIXAS e depois converter tudo pra %, dessa maneira fica mais fácil trabalhar, olha essa imagem do exemplo, ela diz tudo: http://www.maxdesign...d/example05.htm

Layout liquido é isso que você já deve ter imaginado, não tem segredo, alias, você já parece estar usando e nem sabia. :P

Links:
Exemplo Layout Líquido
Máteria Legal em portugues
Busca do Google onde achei as coisas!

Edição feita por: bimonti, 23/08/2006, 13:12.

WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#9 Bruno Augusto

Bruno Augusto

    ∙•● Restarting... ●•∙

  • Usuários
  • 1968 posts
  • Sexo:Não informado
  • Localidade:Itajubá

Posted 23/08/2006, 14:36

É, acho que já uso o layout líquido do terceiro tipo, tudo já especificado.

Mas quer minha intenção era fazer exatamente isso, funcionar no maior número de resoluções ao mesmo tempo sem usar JavaScript ou diferentes CSS's.

Consegui apenas as duas mais usadas (800x600 e 1024x768), já tô feliz por ter me superado e vamos que vamos Dominando Tableless (não tem nada a ver com o livro).

[]'s

#10 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 23/08/2006, 18:48

Então, se você conseguiu nessas duas é já um mérito e tanto, é difícil acertar tudo nas 2, imagine em outras então .. :lol:

O que você pode fazer pra resoluções maiores que 1024 é o seguinte, deixe um "container" em 100% mesmo em volta do site todo, pegando a tela inteira, depois você usa JavaScript pra pegar o tamanho da tela, se passar de 1024 você altera a propriedade CSS do "container" de % pra px e centraliza.

É um pouco difícil usuários comuns com resolução maior que 1024, é mais usados por profissionais que fazem uso frequente de computadores ou tem uma experiencia maior com o mesmo (e claro que um monitor LCD 17'' também é bom).

Usar uma medida dessas só se você achar que o seu site vai ficar muito ruim nessas resoluções. (y)
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#11 Bruno Augusto

Bruno Augusto

    ∙•● Restarting... ●•∙

  • Usuários
  • 1968 posts
  • Sexo:Não informado
  • Localidade:Itajubá

Posted 24/08/2006, 13:29

Eu configurei minha placa de vídeo para acima de 1024x768 para testar.

Como meu monitor é pequeno deu que eu precisa va "arrastar" a tela pra ver as partes que faltavam.

Mas mesmo assim deu pra ver tudo.

Qual foi minha surpresa? resoluções maiores que 1024x768 o sistema fica perfeito, nenhuma distorção ou erro.

Acho que progredi mais do que imaginei.

[]'s




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq