Jump to content
brunoais

Positioning de divs

Recommended Posts

brunoais

Eu estou a desenvolver um site que funciona com o posicionamento em 4 paineis do tipo:

TOP, LEFT, RIGHT, BOTTOM.

O meu objectivo é fazer a página de modo a que o menu (LEFT) esteja sempre à esquerda do conteúdo principal (RIGHT) e que:

O menu tenha tamanho adaptável ao tamanho da janela do browser

O conteúdo tenha tamanho adaptável ao tamanho da janela do browser.

Ambos têm, tb, limites máximos e mínimos de tamanho.

Para concretizar isto eu usei, em CSS:

Para o menu:

float:left;
width:20%;
max-width:300px;
min-width:100px;

Para o conteudo:

float:left;
width:80%;
max-width:1000px;
min-width:300px;

Problema: A partir de um certo tamanho da janela do browser (quando eu estou a diminuir o tamanho na horizontal) o conteudo vai para debaixo do menu. Isso não é suposto acontecer.

Já estive a ver tutorials e outras ajudas em relação a este assunto mas todos eles só mostram código para o painel do lado esquerdo de tamanho fixo.

Ajuda, por favor....


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
mjamado
Problema: A partir de um certo tamanho da janela do browser (quando eu estou a diminuir o tamanho na horizontal) o conteudo vai para debaixo do menu. Isso não é suposto acontecer.

A partir de que tamanho do browser é que isso acontece? É que a partir de 400px para baixo, é suposto acontecer, da forma que tens a CSS...


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
brunoais

O que é que eu tenho que alterar no CSS para que não aconteça?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
mjamado

Se não quiseres mesmo que isso aconteça, tens de colocar um div contentor à volta desses, onde o min-width seja igual à soma dos min-width interiores. Adicionalmente, para evitar que os interiores "saltem fora", tens de dar a esse contentor um position: absolute;.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
brunoais

Já tentei... Não funciona correctamente.

Quando é em fullscreen ele afasta demasiado o RIGHT do LEFT.

Quando é demasiado pepqueno o RIGHT entra em overlapping com o LEFT.

+! O BOTTOM sobe até ao TOP misturando-se com o RIGHT e com o LEFT.

Soluções?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
mjamado

Tens CSS a menos para responder a tantas questões...

Seja como for, a estrutura deverá ser:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>

Depois, e só agora reparei as proporções 300/100 e 1000/300 não correspondem ao 80/20 das percentagens. Tens de ser coerente, senão vais acordar muitos dragões...

Finalmente, não te esqueças de fazer o clear às div da direita. Assumi que assim fosse, mas o que é certo é que não está no teu CSS...


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
brunoais

bem....

div.container {
width:100%;
margin:0px;
min-width:500px;
}
div.top {
position:static;
left:0px;
top:0px;
clear:left;
padding:0.5em;
clear:left;
}
div.middle{
position:relative;
min-width:500px;
}
div.left {
position:relative;
float:left;
width:20%;
max-width:300px;
min-width:100px;
}
div.right {
position:absolute;
float:left;
top:0px;
right:0px;
width:80%;
max-width:900px;
min-width:100px;
clear:right;
}
div.bottom {
position:static;
left:0px;
top:0px;
clear:both;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<link type="text/css" href="css/layout.css" rel="stylesheet" />
</head>
<body>
<div class="container">
	<div class="top"></div>
	<div class="middle">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<div class="bottom"></div>
</div>
</body>
</html>




"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
mjamado

Ora bem, várias coisas, até porque eu tinha interpretado mal o teu design:

[*]a div container, se não precisas dela para mais nada, está a mais;

[*]o position: static; não serve para nada, visto que esse já é o posicionamento por defeito de qualquer elemento;

[*]os left, top, right e bottom só servem para elementos com posicionamento absoluto ou relativo;

[*]com esse design em concreto, nenhuma classe precisa de clear;

[*]como queres que todo o design seja elástico, é conveniente definir as larguras (em percentagem, máximas e mínimas) das classes top, middle e bottom, em concordância com o resto;

[*]como já tinha dito, o elemento que alberga os elementos flutuantes tem de ter as mesmas larguras (em percentagem, máxima e mínima) do total das larguras dos elementos interiores;

[*]para forçar o elemento que contém flutuantes a acompanhá-los em altura, é preciso um overflow, tanto o auto como o hidden servem (nota que o hidden nunca mostra barras de deslocamento, se forem necessárias - neste caso, nunca são);

[*]os elementos flutuantes, por definição, não têm posicionamento (a menos que seja o absolute, e apenas para forçar o box-model a comportar-se devidamente) - muito menos, dois elementos um ao lado do outro com posicionamentos díspares, sendo que um deles, apesar de flutuante, até medidas de posicionamento tinha;

[*]finalmente, e tal como já tinha dito, tens que fazer com que a bota bata com a perdigota ao nível das medidas: 100+100 != 500, 300/900 != 20/80 e por aí fora. Isto depois dá granel ao reduzir.

CSS corrigida:



div.top,
div.bottom,
div.middle
{
width: 100%;
min-width: 200px;
max-width: 1200px;
}

div.middle
{
overflow: auto;
}

div.left
{
float: left;
width: 25%;
max-width: 300px;
min-width: 50px;
}

div.right
{
float: left;
width: 75%;
max-width: 900px;
min-width: 150px;
}

HTML corrigido:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link type="text/css" href="css/layout.css" rel="stylesheet" />
</head>
<body>
<div class="top">Top</div>
<div class="middle">
	<div class="left">left</div>
	<div class="right">right</div>
</div>
<div class="bottom">Bottom</div>
</body>
</html>


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
brunoais

Se eu pozer

max-width: 1200px; a max-width: 1215px;

e por o right com o padding:

padding:0px 0px 0px 15px;

Ele volta a deixar de funcionar (o right fica debaixo do menu). Algo que esteja em falta?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
mjamado

Não falta nada. O box-model é que é contra-intuitivo para quem não está habituado...

Por exemplo: com width: 100px; margin: 10px; border: 1px; padding: 10px;, que largura é que este hipotético elemento ocupa no elemento-pai? A resposta seria, intuitivamente, 100px. Afinal, a largura está ali definido. Mas não, a largura desenhada é 100 + (10 x 2) + (1 x 2) + (10 x 2) = 142px. Logo, se o contentor reservasse apenas 100px a contar com o tamanho do filho, ia dar granel...

Voltando ao teu problema: se queres dar padding, tens de subtrair, e não somar, à largura original.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
brunoais

Voltando ao teu problema: se queres dar padding, tens de subtrair, e não somar, à largura original.

A largura original está em em %. Como é que eu subtraio?

O objectivo final do aspecto é:

div.top,
div.bottom,
div.middle{
width: 100%;
min-width: 200px;
max-width: 1200px; 
}

div.middle{
overflow: auto;
 padding:10px 0px 0px 0px; 
}

div.left{
float: left;
padding:0px 0px 0px 5px;
width: 25%;
max-width: 300px;
min-width: 50px;
}

div.right{
padding:0px 0px 0px 15px; 
float: left;
width: 75%;
max-width: 900px;
min-width: 150px;
}
div.bottom{
padding:15px 0px 0px 0px;
}

(assim cmo está agora não funciona. O RIGHT fica por baixo do LEFT em janelas mais pequenas.)

Já andei a trabalhar com os máximos e com os mínimos mas sem sucesso. Parece ser das % para os tamanhos. Ideias, por favor.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
mjamado

Ah, claro, não podes misturar percentagens e pixels e esperar que bata certo... ;)

Ou tens designs elásticos, ou tens designs pixel-perfect: não podes ter os dois, duma forma, digamos, normal.

Existe uma maneira, que é mudar o box-model para contar a partir do exterior das borders, englobando, assim, todas as medidas dentro da width. No entanto, o suporte ainda é tremido, sobretudo em browsers antigos, por isso aplica isto com um grãozinho de sal...

div.left,
div.right
{
    /* IE e Opera */
    box-sizing: border-box;
    /* Firefox */
    -moz-box-sizing: border-box;
    /* Chrome e Safari */
    -webkit-box-sizing: border-box;
}


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
brunoais

O código funciona! (testei com o google chrome, Opera & FF), obg

Existe uma maneira, que é mudar o box-model para contar a partir do exterior das borders, englobando, assim, todas as medidas dentro da width. No entanto, o suporte ainda é tremido, sobretudo em browsers antigos, por isso aplica isto com um grãozinho de sal...

Q grão de sal?

BTW: Há alguma maneira de limitar o tamanho do LEFT (na horizontal) ao tamanho do texto que ele tem?

O que eu quero é que ele ocupe segundo a regra:

>= ao tamanho mínimo E

<= ao tamanho do texto (em largura) OU <= ao tamanho máximo OU = à percentagem de espaço destinado  (depende de qual é o menor valor)

Se não há maneira, tb não incomoda. Assim cmo está já é cmo eu quero.

Se não há tb n importa.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
mjamado
Q grão de sal?

É uma expressão idiomática; é para teres cuidado, e testares em browsers antigos também...

BTW: Há alguma maneira de limitar o tamanho do LEFT (na horizontal) ao tamanho do texto que ele tem?

Existir, existe quase de certeza; provavelmente, envolverá JS com força, porque tem de se medir a tipografia - o que não é linear entre os vários browsers, além de teres de forçar a não-quebra das linhas de texto, e por aí fora... Eu não aconselho, é demasiado trabalho e processamento no cliente para um detalhe de somenos importância.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
brunoais

É uma expressão idiomática;

Até aí eu tinha chegado (n fazia sentido levar à letra)

é para teres cuidado, e testares em browsers antigos também...

Era esta a resposta q queria. Eu terei cuidado até ao firefox 2.5 (já n há suporte para versões anteriores) se bem q ainda n testei com o FF4b.

Existir, existe quase de certeza; provavelmente, envolverá JS com força, porque tem de se medir a tipografia - o que não é linear entre os vários browsers, além de teres de forçar a não-quebra das linhas de texto, e por aí fora... Eu não aconselho, é demasiado trabalho e processamento no cliente para um detalhe de somenos importância.

Então não vale mm a pena.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.