Div de Conteudo - Como sobrepor?

[nunolevezinho]

Boas, é o seguinte, estou a construir uma página e tenho 4 divs principais.

O header, a left-bar, o content, e o footer.

Para perceberem melhor segue-se uma imagem.

http://vision-plus.netau.net/duvida.png

O que eu pretendo é que na div 'content' quando eu escrever, o texto apareca a direita da div 'left-bar' e não "atrás" dela.

O mesmo se segue para o 'header';

Tenho o seguinte código no css:

#left-bar {
  left : 0px ;
  position : fixed ;
  top : 0px ;
  height : 100% ;
  background-color:#36393D ;
}

#header-bar {
  left : 0px ;
  position : fixed ;
  top : 0px ;
  width : 100% ;
  background-color:#36393D ;
}

#content {
        height : 100% ;
        overflow : auto ;
}

Alguem me pode ajudar?

[mjamado]

Tens de dar ao #content, pelo menos, tanta margin-left quanto a width do #left-bar.

[ruiFernandes]

Boas, tens que usar a propriedade "float" no css da div left-bar e da content.

Cumprimentos,

    Rui Fernandes

[mjamado]

Boas, tens que usar a propriedade "float" no css da div left-bar e da content.

Não, não tem.

[nunolevezinho]

Eu acabei por usar

padding: 40px;

será melhor o

margin-left

ou tanto faz?

[ruiFernandes]

tu não estás a definir largura para o left-bar, defines a largura que quiseres e usas "float:left;" para o #left-bar e o #content, porque isso do padding, não te vai dar em todos os browsers

[mjamado]

Eu acabei por usar

padding: 40px;

será melhor o

margin-left

ou tanto faz?

Tanto faz, desde que seja igual ou maior que a largura da barra. Repara que só padding vai-te dar a toda a volta do container, enquanto padding-left (ou right, ou top, ou bottom) dá-te só de um lado.

Verifica o que é que te interessa mais, e toma atenção se usares background no #content, porque margin e padding têm influências diferentes na área útil.

[mjamado]

tu não estás a definir largura para o left-bar, defines a largura que quiseres e usas "float:left;" para o #left-bar e o #content, porque isso do padding, não te vai dar em todos os browsers

Mais asneiras...  ?

[ruiFernandes]

Mais asneiras...  ?

podes-me explicar porque são asneiras? ainda não percebi....

[mjamado]

podes-me explicar porque são asneiras? ainda não percebi....

A propriedade padding é suportada desde a especificação 1 (sim, um) de CSS. Dizer que não vai dar em todos os browsers é uma calinada do tamanho do mundo.

Pronto, não dá no Lynx... 

[ruiFernandes]

e em relação ao "float: left;" para pôr as duas div's lado a lado e a "width" da "left-bar" tens alguma coisa a acrescentar sobre isso?

[mjamado]

e em relação ao "float: left;" para pôr as duas div's lado a lado e a "width" da "left-bar" tens alguma coisa a acrescentar sobre isso?

Acho que isso é óbvio: se o nunolevezinho quer que a barra seja fixa (olha lá o fixed no código dele), estar a propor o float não resolve o problema dele, vai é criar problemas novos.

A width da #left-bar não é obrigatória, o nunolevezinho é que sabe que conteúdo lhe vai meter dentro e se é necessário restringir a largura da barra em si - pode ser, pode não ser.

Em suma, tudo o que disseste foi irrelevante, quando não errado, para o problema original.

[ruiFernandes]

ok, obrigado pelo esclarecimento 🙂

[nunolevezinho]

Desculpem a demora na resposta mas nao estive no computador este fim-de-semana.

Acabei por utilizar o padding-left e padding-top porque o que eu pretendo é que esteja fixo em cima e a esquerca o container. Já que as barras (top, bottom e left) estão sempre fixas naquea posição mesmo que faça scroll.

Obrigado sendo assim :b

EDIT: Estava tudo a "supostamente" funcionar muito bem quando me lembro de ir ver como estava o site noutros computadores.

Até que me deparei que no meu computador (Res: 1024x768) aparecia tudo bem, mas quando fui para o desktop (Res: 1920x1080) a top-bar escondia partes do elemento content.

Como posso resolver isto?

[mjamado]

Até que me deparei que no meu computador (Res: 1024x768) aparecia tudo bem, mas quando fui para o desktop (Res: 1920x1080) a top-bar escondia partes do elemento content.

Como posso resolver isto?

É o mesmo conceito, tens de dar tanta ou mais margin ao #content quanta a altura da #header-bar (em qualquer resolução - tens de testar).