Floyde
Pôster original- 7 de abril de 2005
- Monterrey México
- 27 de março de 2006
Eu tenho dois divs. Um tem uma altura fixa e quero que o outro preencha o espaço vertical restante na janela. Se eu definir a altura do último div para 100%, ele terá a mesma altura da janela, mas quero que seja a altura da janela menos a altura do primeiro div.
Este é o código que estou usando:
Código:
Vertical div test body { margin:0; padding:0; height:100%; } #div1 { height: 100px; background-color: blue; } #div2 { height: 100%; background-color: green; } Também incluí algumas imagens que mostram o que quero fazer e o que pude fazer até agora. desde já, obrigado
Anexos
N
NoNameBrand
- 17 de novembro de 2005
- Halifax, Canadá
- 27 de março de 2006
Caso contrário, não consigo pensar em uma maneira de você conseguir o que deseja.
stevep
- 13 de outubro de 2004
- Reino Unido
- 27 de março de 2006
Experimente:
Documento Sem Título
para
b
c
d
E
ps Eu trapaceei fazendo isso no DW, adicionando algum conteúdo à segunda camada e, em seguida, bagunçando o código - o DW gosta que as coisas tenham algum preenchimento nas bordas e mesmo que você possa especificar nas caixas de diálogo que deseja uma camada comece em 0px do canto superior, você tem que dizer duas vezes, usando a visualização de código. Eu tinha que fazer de qualquer maneira.
Floyde
Pôster original- 7 de abril de 2005
- Monterrey México
- 27 de março de 2006
NoNameBrand disse: Por que não aninhar o primeiro dentro do segundo?
Caso contrário, não consigo pensar em uma maneira de você conseguir o que deseja.
Obrigado, isso funciona visualmente, mas o segundo div será um contêiner para este layout, então eu ainda preciso que ele tenha as dimensões adequadas para que seu conteúdo possa herdá-los.
Então, talvez simplesmente não seja possível? Talvez eu precise usar um pouco de javascript para fazer funcionar?
stevep disse: Experimente:Obrigado, mas não consegui fazer funcionar, qual navegador você usou?
Floyde
Pôster original- 7 de abril de 2005
- Monterrey México
- 27 de março de 2006
Ok, aqui está uma foto do meu objetivo final. Até agora tenho feito isso gradualmente, então talvez o problema seja minha abordagem inicial. Então, como vocês abordariam isso (eu só preciso de ideias)? Você usaria css puro ou cederia a tabelas ou frames?
Anexos
stevep
- 13 de outubro de 2004
- Reino Unido
- 27 de março de 2006
O que você precisa fazer é brincar com o seguinte:
# Layer1 {
posição: absoluta;
esquerda: 0px;
topo: 0px;
largura: 100%;
altura: 180px;
índice z: 1;
cor de fundo: # 99CCFF;
}
Desbaste sua página em um pedaço de papel para obter as posições corretas e isso lhe dará a posição do canto superior esquerdo de cada camada. A altura da camada 1 determinará a posição inicial da camada 2 - neste caso, a camada 2 deve ter umtopo: 180px;linha de código.
Se você quiser as 3 camadas conforme mostra em sua última postagem, a camada mais à esquerda será:
# Layer1 {
posição: absoluta;
esquerda: 0px;
topo: 0px;
largura: 200px;
altura: 100%;
índice z: 1;
cor de fundo: # 336699;
}
e a camada superior de RH será:
# Layer1 {
posição: absoluta;
esquerda: 200px;
topo: 0px;
largura: 100%;
altura: 180px;
índice z: 2;
cor de fundo: # 33CCFF;
}
e a 3ª camada para preencher o restante da janela (porém é redimensionada) deve ser algo como:
# Layer1 {
posição: absoluta;
esquerda: 200px;
topo: 180px;
largura: 100%;
altura: 100%;
índice z: 3;
cor de fundo: # 99CCFF;
}
É melhor colocar algum conteúdo fictício em cada camada se você estiver usando o Dreamweaver, caso a camada se reduza a nada na visualização da página, daí o 'a, b, c etc' no html original acima.
PS Não sou um especialista, posso estar errado, mas espero que ajude. O que posso dizer é que meu primeiro pedaço de código parece funcionar. Eu pessoalmente não aninharia camadas se pudesse ajudar um pouco, mas isso sou eu - eu apenas faço o simples. N
NoNameBrand
- 17 de novembro de 2005
- Halifax, Canadá
- 27 de março de 2006
Aqui está o que eu faria:
Código:
foo você acredita!
-
- 14 de junho de 2003
-
-
- MD / VA / DC
- 27 de março de 2006
Desconectar ...
Confira o FlashObject e no download tem código para fazer um div fullscreen .. talvez possa ser customizado como você quiser.
http://blog.deconcept.com/flashobject/ Floyde
Pôster original -
- 7 de abril de 2005
-
-
- Monterrey México
- 28 de abril de 2006
Obrigado por toda a ajuda pessoal, mas acabei de perceber que o layout exato que eu quero é impossível de conseguir com uma combinação de larguras / alturas fixas e porcentagens. Reescrevi usando apenas porcentagens e agora funciona. Se você estiver interessado na marcação, me avise e eu a postarei. stevep
-
- 13 de outubro de 2004
-
-
- Reino Unido
- 28 de abril de 2006
floyde disse: Se você estiver interessado na marcação, me avise e eu postarei.
Gostaria de ver se você tem tempo para postar novamente.
NoNameBrand disse: O que é essa coisa de 'camadas'? é aquele Dreamweaver-esque para 'break stuff realmente bom'?
Bem, não sei sobre as 'coisas quebradas', mas acho que você percebeu que não sou um CSS boff - camadas são um nome conveniente dado pelo DW a coisas que acho que deveriam ser chamadas de 'elementos posicionados em CSS' - e Eu acho que eles os chamam assim para fazer pessoas como eu de um fundo de DTP / Photoshop se sentirem um pouco mais confortáveis. Olhando para o código que você incluiu em sua postagem NoNameBrand, é muito mais elegante do que o meu - vou ter que tentar entender a tag div. Obrigado pelo OP e pelas respostas. N NoNameBrand
-
- 17 de novembro de 2005
-
-
- Halifax, Canadá
- 28 de abril de 2006
stevep disse: Bem, eu não sei sobre 'quebrar coisas', mas acho que você percebeu que não sou um CSS boff - camadas são um nome conveniente dado pelo DW a coisas que eu acho que deveriam ser chamadas de 'elementos posicionados CSS '
Eles também tinham índices z empilhados sobre eles - que posicionam as coisas de frente para trás em uma página. Eu já vi camadas DW antes que quebrassem totalmente um site, mas por outro lado não tive muita exposição a elas (isso foi o suficiente, na verdade).
Vou ter que tentar realmente colocar minha cabeça em volta da tag div.
A é apenas um bloco arbitrário - não significa nada semanticamente, da mesma forma que umfaz (um parágrafo de texto). UMAé a mesma ideia, mas para coisas embutidas (como um tag, mas, novamente, semântica livre).
A coisa mais fácil a fazer para aprender essas coisas é parar de usar o Dreamweaver. Eu projeto meus sites no Photoshop e, em seguida, salvo os elementos gráficos que desejo, junto com a anotação de códigos de cores e algumas medidas de pixel aproximadas para fins de alinhamento, e então codifico o site em TextWrangler ou VIM. Floyde
Pôster original -
- 7 de abril de 2005
-
-
- Monterrey México
- 28 de abril de 2006
stevep disse: Eu gostaria de ver se você tem tempo para postar novamente.
Aqui está, tem um pouco de espanhol lá, espero que não seja muito confuso:
Código:Grande Esquema html {altura: 100%; } corpo {margem: 0; preenchimento: 0; altura: 100%; largura: 100%; } #esquerda, #direita {float: esquerda; } #left {height: 100%; cor de fundo: laranja; largura: 10%; } #right {height: 100%; posição: relativa; largura: 90%; } #top {background-color: blue; altura: 10%; } #fotos {posição: relativa; altura: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der {altura: 50%; largura: 50%; estouro: automático; posição: absoluta; } #foto_sup_izq, #foto_sup_der {top: 0; } #foto_sup_der, #foto_inf_der {esquerda: 50%; } #foto_inf_izq, #foto_inf_der {top: 50%; } 
Anexos
Publicações Populares