Alguém sabe como fazer um layout com barra de status sem rolagem?
Tipo assim:
--------------------------------------------------------
| |
| Cabecalho - Topo |
--------------------------------------------------------
| | |
| | |
| Menu | Corpo c/ rolagem interna |
| | |
| | |
--------------------------------------------------------
| Rodape fixo no final em qualquer resolucao |
-------------------------------------------------------
Eu costumo fazer com uma tabela 100% de altura logo depois do body (três linhas)... e dentro eu aplico as ID/classes... mas tem como fazer sem a tabela?
Layout Com Barra De Status
Started By andregv, 08/04/2005, 10:48
17 replies to this topic
#1
andregv
-
- Usuários
-
- 157 posts
12 Horas
- Sexo:Masculino
- Localidade:São José dos Campos - SP
- Interesses:Programação Delphi, C/C++, ASP, Banco de Dados, WebDesigner.
Posted 08/04/2005, 10:48
#2
andregv
-
- Usuários
-
- 157 posts
12 Horas
- Sexo:Masculino
- Localidade:São José dos Campos - SP
- Interesses:Programação Delphi, C/C++, ASP, Banco de Dados, WebDesigner.
Posted 08/04/2005, 11:00
A mensagem anterior num foi do jeito que quero...
Vai uma imagem para mostrar.
Te+
Vai uma imagem para mostrar.
Te+
#3
Spider-man
-
- Usuários
-
- 987 posts
Doutor
- Sexo:Não informado
Posted 08/04/2005, 11:04
naum entendi muito bem, mas eu axo q dah pra usar frames ou iframe
#4
andregv
-
- Usuários
-
- 157 posts
12 Horas
- Sexo:Masculino
- Localidade:São José dos Campos - SP
- Interesses:Programação Delphi, C/C++, ASP, Banco de Dados, WebDesigner.
Posted 08/04/2005, 11:14
Tá... eu uso um iframe no conteudo... mas não consigo definir a altura em 100% da tela (ah.... detalhe... quero fazer usando apenas css sem tabela... pois com tabela eu consigo fazer no boi)
#5
jeanpaulo5
-
- Usuários
-
- 189 posts
....
- Sexo:Não informado
- Localidade:Rj - Rio de Janeiro
Posted 10/04/2005, 17:20
onde vc quer os 100% ?
#6
andregv
-
- Usuários
-
- 157 posts
12 Horas
- Sexo:Masculino
- Localidade:São José dos Campos - SP
- Interesses:Programação Delphi, C/C++, ASP, Banco de Dados, WebDesigner.
Posted 11/04/2005, 10:26
Bem... o topo ficaria com, p.ex., 110px... e o rodape ficaria com 20px... e a altura ficaria variável de acordo com a resolução... como Nesse site.
Retificando o link que pus
- tem o topo, o menu e o conteudo... mas queria colocar uma barra de status no final da pagima.
Retificando o link que pus
- tem o topo, o menu e o conteudo... mas queria colocar uma barra de status no final da pagima.
Edição feita por: xxALExx, 11/04/2005, 11:03.
#7
ddacal
-
- Usuários
-
- 147 posts
nheco
- Sexo:Não informado
- Interesses:Webdesign<br>Design em geral<br>Fotografia<br>Publicidade
Posted 03/05/2005, 17:18
Cara,
eu acho que isso é coisa do firefox..
no ie eu acho q funfa isso de 100%
eu acho que isso é coisa do firefox..
no ie eu acho q funfa isso de 100%
Diego Dacal
Webdesigner
Webdesigner
#8
arthurlucena
-
- Usuários
-
- 343 posts
Imamade nandomo..
- Sexo:Masculino
- Localidade:João Pessoa
- Interesses:Desenho, artes gráficas, fotografia, games, praia, cinema, animes, cultura japonesa, tecnologia, desenvolvimento para web entre outras coisas =)
Posted 05/05/2005, 15:32
Eu estou fazendo um layout semelhante ao colocado por andregv. Apenas sem um topo, de resto eh igual ~ menu, conteudo e rodape. Gostaria de setar a altura do menu em 100% da tela. Tenho um rodape fixo, que fica por cima do conteudo e do menu.
Porém no IE6 ele nao reconhece o "height: 100%;", ao contrario do FireFox, que aceita e exibe numa boa. Alquem sabe aqui algum CSS Hack pra me ajudar?
Porém no IE6 ele nao reconhece o "height: 100%;", ao contrario do FireFox, que aceita e exibe numa boa. Alquem sabe aqui algum CSS Hack pra me ajudar?
...........darkness.........²d¬¬b²
A vida é muito curta para se preocupar com o que as outras pessoas pensam. Viva.
Arthur Lucena..................貴族
arthurlucena at email dot com
[O'']olhares.com/arthurlucena
A vida é muito curta para se preocupar com o que as outras pessoas pensam. Viva.
Arthur Lucena..................貴族
arthurlucena at email dot com
[O'']olhares.com/arthurlucena
#9
arthurlucena
-
- Usuários
-
- 343 posts
Imamade nandomo..
- Sexo:Masculino
- Localidade:João Pessoa
- Interesses:Desenho, artes gráficas, fotografia, games, praia, cinema, animes, cultura japonesa, tecnologia, desenvolvimento para web entre outras coisas =)
Posted 09/05/2005, 14:23
"Meu" IE nao reconhece o "height: 100%"... alguém poderia me dar alguma ajuda?
O Firefox aceita numa boa, fica FILÉU! Mas o IE nao =(
Alguém... ?
O Firefox aceita numa boa, fica FILÉU! Mas o IE nao =(
Alguém... ?
...........darkness.........²d¬¬b²
A vida é muito curta para se preocupar com o que as outras pessoas pensam. Viva.
Arthur Lucena..................貴族
arthurlucena at email dot com
[O'']olhares.com/arthurlucena
A vida é muito curta para se preocupar com o que as outras pessoas pensam. Viva.
Arthur Lucena..................貴族
arthurlucena at email dot com
[O'']olhares.com/arthurlucena
#10
Rehzus
-
- Usuários
-
- 98 posts
Normal
- Sexo:Não informado
Posted 11/05/2005, 22:12
Eu consegui fazer cross-browser....
Só que tem um porém...
Tanto o cabeçalho como o rodapé também possuem medida relativa...
Se lhe interessar eu te passo o código...
Mas caso é altamente necessário que o rodapé e o cabeçalho tenham alturas fixas e apenas o meio tenha altura relativa...ainda há uma saída: usar javascript que seja cross-browser...E andei pesquisando, tem jeito de fazer por javascript.
::You choose, man!
Só que tem um porém...
Tanto o cabeçalho como o rodapé também possuem medida relativa...
Se lhe interessar eu te passo o código...
Mas caso é altamente necessário que o rodapé e o cabeçalho tenham alturas fixas e apenas o meio tenha altura relativa...ainda há uma saída: usar javascript que seja cross-browser...E andei pesquisando, tem jeito de fazer por javascript.
::You choose, man!
"A imaginação é muito mais importante que o conhecimento" (Albert Einstein)
#11
leopolly
-
- Usuários
-
- 3 posts
Novato no fórum
- Sexo:Não informado
Posted 13/05/2005, 20:17
cara eu não sei se entendi, mas ve se é isso:
<html>
<head><title>Título</title></head>
<frameset rows="100, *, 20" frameborder="no" border="0">
<frame src="cabecalho.htm" noresize scrolling="no">
<frameset cols="150, *" frameborder="no" border="0">
<frame src="menu.htm" noresize>
<frame src="conteudo.htm">
</frameset>
<frame src="rodape.htm" noresize scrolling="no">
</frameset>
</html>
<html>
<head><title>Título</title></head>
<frameset rows="100, *, 20" frameborder="no" border="0">
<frame src="cabecalho.htm" noresize scrolling="no">
<frameset cols="150, *" frameborder="no" border="0">
<frame src="menu.htm" noresize>
<frame src="conteudo.htm">
</frameset>
<frame src="rodape.htm" noresize scrolling="no">
</frameset>
</html>
Leonardo
#12
Perroud
-
- Usuários
-
- 146 posts
12 Horas
- Sexo:Não informado
Posted 16/05/2005, 04:46
Frames? Fogueira da Santa Inquisição neles, Papa!
Poderemos usar o seguinte:
topo:
#topo{height: 110px; width: 100%; position: relative;}
#menuEsq {/*exemplo*/ height: auto; width: 200px; float: left; position: relative;}
#conteudo {/*sem largura e sem altura*/ position: relative; clear: both;}
#rodape {width: 100%; position: relative;}
Aí neste #menuEsq, você pode usar XMLHTTPREQUEST, para exibir todos os dados dentro de um <div>, como se fosse um <iframe>
Poderemos usar o seguinte:
topo:
#topo{height: 110px; width: 100%; position: relative;}
#menuEsq {/*exemplo*/ height: auto; width: 200px; float: left; position: relative;}
#conteudo {/*sem largura e sem altura*/ position: relative; clear: both;}
#rodape {width: 100%; position: relative;}
Aí neste #menuEsq, você pode usar XMLHTTPREQUEST, para exibir todos os dados dentro de um <div>, como se fosse um <iframe>
[]'s
Perroud
perroud[at]gmail[dot]com
Perroud
perroud[at]gmail[dot]com
#13
ddacal
-
- Usuários
-
- 147 posts
nheco
- Sexo:Não informado
- Interesses:Webdesign<br>Design em geral<br>Fotografia<br>Publicidade
Posted 17/05/2005, 13:55
XMLHTTPREQUEST?
Pode falar um pouco mais sobre isso?!?!?
isso eh soh pra xml, ou funfa pra xhtml??
Pode falar um pouco mais sobre isso?!?!?
isso eh soh pra xml, ou funfa pra xhtml??
Diego Dacal
Webdesigner
Webdesigner
#14
arthurlucena
-
- Usuários
-
- 343 posts
Imamade nandomo..
- Sexo:Masculino
- Localidade:João Pessoa
- Interesses:Desenho, artes gráficas, fotografia, games, praia, cinema, animes, cultura japonesa, tecnologia, desenvolvimento para web entre outras coisas =)
Posted 17/05/2005, 17:56
Posta aqui o codigo Rehzus
Nao utilizo um topo, no entanto tenho um rodape, este eh fixo, e absoluto.
Perround, eu testei assim, porem qnd eu nao seto o valor da altura, o div acaba apos o ultimo elemento da mesma, no caso do menu, apos o ultimo botao. =(
Em ambos os browsers
Agora esse lance de XMLHTTPREQUEST eu tow por fora, tambem
Fala mais sobre
Nao utilizo um topo, no entanto tenho um rodape, este eh fixo, e absoluto.
Perround, eu testei assim, porem qnd eu nao seto o valor da altura, o div acaba apos o ultimo elemento da mesma, no caso do menu, apos o ultimo botao. =(
Em ambos os browsers
Agora esse lance de XMLHTTPREQUEST eu tow por fora, tambem
Fala mais sobre
...........darkness.........²d¬¬b²
A vida é muito curta para se preocupar com o que as outras pessoas pensam. Viva.
Arthur Lucena..................貴族
arthurlucena at email dot com
[O'']olhares.com/arthurlucena
A vida é muito curta para se preocupar com o que as outras pessoas pensam. Viva.
Arthur Lucena..................貴族
arthurlucena at email dot com
[O'']olhares.com/arthurlucena
#15
Rehzus
-
- Usuários
-
- 98 posts
Normal
- Sexo:Não informado
Posted 17/05/2005, 23:13
Bom não explicarei o código posi tenho pressa...
Mas caso pinte alguma dúvida pergunte sem vergonha!
CSS:
XHTML:
Testei aqui e funcionou de boa...
Mas caso pinte alguma dúvida pergunte sem vergonha!
CSS:
<style type="text/css" media="screen">
body { margin:0;padding:0;height:100%; }
div.topo { background:#be4;height:10%;min-height:40px;position:absolute;top:0;width:100%;z-index:2; }
div.meio { background:#eee;height:80%;overflow:auto;position:absolute;bottom:10%;width:100%; }
div.meio .col-esq { float:left;height:100%;width:20%; }
div.meio .col-dir { background:#fff;float:right;height:100%;width:80%; }
div.rodape { bottom:0;background:#b44;height:10%;min-height:40px;position:absolute;width:100%; }
</style>XHTML:
<div class="topo"> teste1 </div> <div class="meio"> <div class="col-esq"> teste2.1 </div> <div class="col-dir"> teste2.2 </div> </div> <div class="rodape"> teste3 </div>
Testei aqui e funcionou de boa...
Edição feita por: Rehzus, 17/05/2005, 23:14.
"A imaginação é muito mais importante que o conhecimento" (Albert Einstein)
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)
