Paulo Freitas Nobrega 0 Denunciar post Postado Abril 11, 2007 Olá pessoal estou começando a estudar webstandards e estou com um dúvida: tenho o seguinte código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Mydesign.net</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css"> @import url("css/index.css");</style></head><body><div id="geral"> <div id="cab"> <div id="menu_lateral"> <ul> <li class="tit_menu_laterais">:: Portfólio</li> <li><a href="#" title="Ilustrações">› Ilustrações</a></li> <li><a href="#" title="Material Gráfico">› Material Gráfico</a></li> <li><a href="#" title="Web Design">› Web design</a></li> <li><a href="#" title="Diagramação">› Diagramação</a></li> </ul> <h2 class="cab_menu"> :: Referências </h2> <ol> <li><a href="#" title="www.maujor.com.br">Maujor</a></li> <li><a href="#" title="www.imasters.com.br">Imasters</a></li> <li><a href="#" title="www.tablelles.com.br">Tablelles</a></li> <li><a href="#">Diagramação</a></li> </ol> </div> <div id="corpo"> body </div> </div> </div><div id="rodape"> <span id="image"> <img src="img/xhtml1-1.gif" alt="valido em xhtml 1.1" /> <img src="img/css.gif" alt="valido em css" /> </span></div> <div id="rodape2">Desenvolvimento: Paulo Ricardo de Freitas</div></body></html> Nesse código tenho a div "rodape" e rodape2", gostaria de colocar elas no rodapé da pagina, independete da resolução do monitor do usuário... O css para os demais elementos da página ficou assim, se alguém encontrar erros, por favor postem... body{margin:0;padding:0;background-image:url(../img/bg.jpg);background-repeat:repeat-x; }#geral {margin:0 auto;width: 860px; }#cab{background-image:url(../img/cab.jpg);background-repeat:no-repeat;margin:0 auto;width: 860px;height: 280px; position:relative; }#menu_lateral{width: 170px;border-right: 1px dotted #a7c062;position: absolute; top: 230px; left: 35px; }#menu_lateral ul {margin-top: 10px;margin-bottom: 0;width: 150px;padding-left:10px;padding-right: 10px;list-style: none;}#menu_lateral ul li {width: 100%;line-height: 20px;font-family: Arial, Helvetica, sans-serif;font-size: 12px;border-bottom: 1px dotted #7d9148; }#menu_lateral ul li a {width: 100%;padding-left: 3px;color:#7d9148;display:block;text-decoration: none; }#menu_lateral ul li a:hover {display:block;color:#fff;background-color:#a7c062; }#menu_lateral ul li.tit_menu_laterais {line-height: 15px;font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: bold;padding-left: 3px;padding-bottom: 5px;border:0;font-size: 13px;color:#7d9148; }#menu_lateral ol {margin-bottom:0;position:relative; top:-10px; }#menu_lateral ol li {font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 15px;list-style-type: square; color: #7d9148; }#menu_lateral ol li a {color: #7d9148;text-decoration:none; }#menu_lateral ol li a:hover {text-decoration:underline; }#corpo {position: absolute; top: 230px; left: 220px; }.cab_menu {line-height: 15px;font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: bold;font-size: 13px;color:#7d9148;padding-left: 13px; }/* Fix IE. Hide from IE Mac \*/* html #menu_lateral ul { margin-left: 0; }* html #menu_lateral ul li a { height: 1%;}* html #menu_lateral .cab_menu { position:relative; top:-6px; }* html #menu_lateral ol { position:relative; top:-18px; }/* End */ bem eu havia até tentando colocar as div e o css ficou assim: #rodape2 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;color: #fff;text-align:center;padding-top: 10px;width:100%;height: 20px;position: absolute; bottom:0;background-color: #80af00}#image {position:relative; top: 30px; }.cab_menu {line-height: 15px;font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: bold;font-size: 13px;color:#7d9148;padding-left: 13px; } e dois hack's para o IE: * html #rodape { position:absolute; top: 490px; }* html #image { position: relative; top: 55px; } Mas não deu muito certo, dependendo da resolução, o código fica todo quebrado... Se alguém puder ajudar agradeço... Opá mais uma coisa, o arquivo que estou testando esta no seguinte endereço aqui ilhasolteira.net/jogosregionais, se vocês quiserem ver o erro que está dando... Compartilhar este post Link para o post Compartilhar em outros sites
Paulo de Tarso F. M. 24 Denunciar post Postado Abril 11, 2007 Observei q você posicionou seu menu lateral através de um valor absoluto. Nesse tipo de layout, você não precisa especificar posições absolutas para seus elementos... Já comece por aí... Quer saber como posicionar elementos lado a lado, sem a necessidade de usar o position: absolute? Procure por float... Tem um tutorial que fiz... você poderia começar por isso, organizando melhor sua página... http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Layout fixo 3 colunasE se não me engano, vi há alguns dias algo relacionado à sua dúvida tb... Vou ver se encontro, e depois eu posto, ok? Mas eu acho melhor primeiro você reajustar sua estrutura... Abraço! Compartilhar este post Link para o post Compartilhar em outros sites
Paulo Freitas Nobrega 0 Denunciar post Postado Abril 11, 2007 Obrigado pela dica Paulo, irei ler seu artigo agora mesmo... Compartilhar este post Link para o post Compartilhar em outros sites
Paulo Freitas Nobrega 0 Denunciar post Postado Abril 11, 2007 Bem, fiz uma nova estrutura com o uso do float e clear, coloquei o css junto ao html por ser apenas um teste... ficou assim: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Título do Site</title><style type="text/css">body {padding: 0;margin:0; }#tudo {width: 100%; }#topo {width: 100%;height: 100px;background-color:#075c84; }#meio {width: 100%;height: 100%;background-color: #009966; }#corpo {margin: 0 auto;width: 800px;height: 100%;background-color: #FFF; }#menu {float: left;width: 150px;height: 100%; }#texto {float: right;width: 650px;height: 100%; }#standerd {width: 100%;height: 50px;background-color: #330099;clear: both; }#rodape {clear: both;width: 100%;height: 20px;background-color: #3399FF; }</style></head><body><div id="tudo"> <div id="topo"></div> <div id="meio"> <div id="corpo"> <div id="menu"> <ul> <li> <a href="" title="teste">teste1</a> </li> <li> <a href="" title="teste">teste2</a> </li> <li> <a href="" title="teste">teste3</a> </li> <li> <a href="" title="teste">teste4</a> </li> <li> <a href="" title="teste">teste1</a> </li> <li> <a href="" title="teste">teste2</a> </li> <li> <a href="" title="teste">teste3</a> </li> <li> <a href="" title="teste">teste4</a> </li> <li> <a href="" title="teste">teste1</a> </li> <li> <a href="" title="teste">teste2</a> </li> <li> <a href="" title="teste">teste3</a> </li> <li> <a href="" title="teste">teste4</a> </li> <li> <a href="" title="teste">teste1</a> </li> <li> <a href="" title="teste">teste2</a> </li> <li> <a href="" title="teste">teste3</a> </li> <li> <a href="" title="teste">teste4</a> </li> <li> <a href="" title="teste">teste1</a> </li> <li> <a href="" title="teste">teste2</a> </li> <li> <a href="" title="teste">teste3</a> </li> <li> <a href="" title="teste">teste4</a> </li> </ul> </div> <div id="texto"> <h4> Agora vai ter textos também </h4> </div> <div id="standerd"> <h6> css-ok <br /> xhtml-ok <br /> </h6> </div> </div> </div> <div id="rodape"></div></div></body></html> Em resolução 1024x768 ou superior fica beleza, mas abaixo disso da um pau doido, primeiramente achei que era o IE, mas depois vi que até no Firefox e Opera dava o mesmo erro... Não sei o que pode ser isso, se alguem puder da uma mãozinha agradeço... Coloquei no ar para vocês verem... AQUI Compartilhar este post Link para o post Compartilhar em outros sites
Paulo de Tarso F. M. 24 Denunciar post Postado Abril 11, 2007 Ué... Abro no IE6, no FF 2 e no Opera 9... Tah td mto bom... O q há de errado amigo? Observei que as medidas utilizadas estão acima de 800px na largura de alguns elementos... E com isso, naturalmente, seu layout vai ficar maior do q a tela em resolução 800x600 por exemplo... Como você está trabalhando com medidas fixas, procure deixar tudo com no máximo uns 700px... (Qdo digo tudo é área do menu + área do conteúdo principal e etc)... Depois vou analisar melhor, caso seja necessário... Tô de saída! Abraço! http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif Compartilhar este post Link para o post Compartilhar em outros sites
Paulo Freitas Nobrega 0 Denunciar post Postado Abril 12, 2007 Bem vou TENTAR explicar: vou pegar de exemplo essa parte: #topo {width: 100%;height: 100px;background-color:#075c84; }#corpo {margin: 0 auto;width: 800px;height: 100%;background-color: #FFF; } bem o que eu pude perceber é que 100% em resolução menor que 800x600 supondo (600x400) o width da div topo considera 100% como 600px, então como a div corpo tem 800px o topo que deveria acompanhar o corpo, mas para em 600px e fica o resto branco... Nisso tudo que tem medida maior que a resolução do monitor e tem a opção tp 100% é barrada nos limites da resolução e fica branco o resto... Deu pra Enteder????? http://forum.imasters.com.br/public/style_emoticons/default/upset.gif Compartilhar este post Link para o post Compartilhar em outros sites
André do Vale 76 Denunciar post Postado Abril 12, 2007 Eu entendi mais ou menos...É o seguinte, se você tem uma parte do layout com tamanho "fixo" em pixels, todas as áreas que acompanham essa parte deverá ter o mesmo tamanho, declarado em pixels... no caso, 800px? Compartilhar este post Link para o post Compartilhar em outros sites
Paulo de Tarso F. M. 24 Denunciar post Postado Abril 12, 2007 (...)bem o que eu pude perceber é que 100% em resolução menor que 800x600 supondo (600x400) o width da div topo considera 100% como 600px, então como a div corpo tem 800px o topo que deveria acompanhar o corpo, mas para em 600px e fica o resto branco...Na verdade, não é isso que acontece não, meu caro Paulo Nobrega. Vms entender melhor isso aki... Primeira coisa: qdo se trabalha com medidas relativas (%), interprete sempre a medida em relação à tela do browser... Se eu tiver uma resolução 5000x3750 (claro, isso não existe, é só um exemplão rsrs), ao abrir a página ele interpretará q a div com width: 100% deverá ter no máximo 5000px... Mas pq no máximo? Pq é assim: se você diminuir o tamanho da janela do browser, vms supor, que eu esteja na super-mega-resolução de 5000x3750, e eu diminua manualmente minha janela do browser para uns 970px de largura... Essa div de width: 100%, a partir de agora, terá seu tamanho máximo em 970px! Por isso que esse tipo de medida (%) se chama relativa... Pq? Pq ela é relativa ao tamanho da área útil do browser. Da maneira q você colocou, ele não vai deixar em branco o restante pq você especificou um tamanho de 800px para um elemento de sua página... Ou seja, mesmo se eu diminuir o tamanho da janela do meu browser, esse elemento com width: 800px continuará a ter sua medida de 800px... A diferença aki é que você terá q usar a barra de rolagem horizontal para visualizar o restante que estiver escondido... Se você não especificar uma medida, o conteúdo da sua página vai se ajustando automaticamente ao tamanho da área útil do seu browser. Conseguiu perceber a diferença aki de unidades fixas e relativas? E outra: para "esconder" algum conteúdo que ultrapasse os limites da div, você deve utilizar a propriedade overflow: hidden... Ok? Bom, sei lá se isso td vai te ajudar a compreender melhor, mas de qq forma, volte a postar caso existam dúvidas... Abraço! Compartilhar este post Link para o post Compartilhar em outros sites
Paulo Freitas Nobrega 0 Denunciar post Postado Abril 12, 2007 Além de esclarecer ajudou muito, obrigado a todos vocês com a ajuda...Abraços Compartilhar este post Link para o post Compartilhar em outros sites
creipi 0 Denunciar post Postado Maio 2, 2007 Acho que estou com uma dificuldade parecida mas não estou conseguindo resolver, estou tentando fazer com que um texto apareça em um mesmo lugar do site independente de resolução mas não estou conseguindo, segue: <div id="text1" style="position:absolute; left:49%; top:57%; width:17%; z-index:1; visibility: hidden"><p align="center"><font face="Arial" size="2">Faça suas pesquisas, trabalhos e divirta-se no mundo fantástico da internet, tudo isso em uma conexão rápida, segura e com o apôio de uma equipe especializada.</font></p></div> Quando uso uma resolução diferente de (1024X768) sai completamente do foco. Troquei absolute por relative e mesmo assim não deu. Aguardo Gerson Compartilhar este post Link para o post Compartilhar em outros sites
Paulo de Tarso F. M. 24 Denunciar post Postado Maio 2, 2007 estou tentando fazer com que um texto apareça em um mesmo lugar do site independente de resolução mas não estou conseguindoSim, sim... Pelo seu código, isso realmente não vai acontecer... Por quê? Vejamos: <div id="text1" style="position:absolute; left:49%; top:57%; width:17%; z-index:1; visibility: hidden">Neste trecho, você tem uma posição abosluta de 49% em relação à lateral esquerda e 57% em relação ao topo... Essa medida significa que, de acordo com a resolução visualizada, naturalmente, a posição será de acordo com ela! Por exemplo: Em resolução 800x600 :Se fôssemos "converter" a porcentagem em pixels, teríamos: http://forum.imasters.com.br/public/style_emoticons/default/seta.gif left: 392px (49% de 800px) http://forum.imasters.com.br/public/style_emoticons/default/seta.gif top: 342px (57% de 600px)Agora, em resolução 1024x768 :http://forum.imasters.com.br/public/style_emoticons/default/seta.gif left: 501px (49% de 1024px) http://forum.imasters.com.br/public/style_emoticons/default/seta.gif top: 437px (57% de 768px)E assim por diante em qualquer resolução que você escolha... Entendeu agora pq que com medidas relativas você não conseguirá posicionar seu elemento na mesma posição em qualquer resolução? Mas temos um detalhe muito importante: não se esqueça que com unidades relativas se o usuário redimensiona a janela do browser a posição definida tb se modificará! Esses valores que coloquei mais acima seriam referentes à tela do browser se ela realmente tivesse o tamanho de 800x600... Mas isso não acontece!!! Todos esses cálculos são feitos em relação à área útil do browser, ok? Então, na prática, os valores em pixels de left e top serão menores do que os que coloquei, mas eu usei esses para poder mostrar como funciona o cálculo e mostrar as diferenças entre resoluções... Por exemplo, se estou usando uma resolução 800x600, mas redimensiono minha janela do browser para uns 523x537, esses valores irão mudar de acordo com isso: http://forum.imasters.com.br/public/style_emoticons/default/seta.gif left: 256px (49% de 523px) http://forum.imasters.com.br/public/style_emoticons/default/seta.gif top: 306px (57% de 537px)Agora ficou mais claro ainda? Bom, mas só me surgiu uma dúvida: visibility: hiddenEste texto está "escondido"? Pq? E se tiver mesmo, como você consgeue visualizá-lo? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Ah! E por favor, né... <font face="Arial" size="2">Sem comentários... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Abraço! Compartilhar este post Link para o post Compartilhar em outros sites
creipi 0 Denunciar post Postado Maio 2, 2007 Suas dúvidas: Este texto está "escondido"? Pq? E se tiver mesmo, como você consgeue visualizá-lo? R: está assim porque ele é ativado a partir de um evento onmouseover, são quatro textos desses que aparecem em um mesmo local quando o usuário passa o mouse em cima de determinado local no site. Ah! E por favor, né...<font face="Arial" size="2"> R: é a formatação da fonte em que o texto aparecerá quando for ativado o evento onmouseover Caso você queira conferir o site: Passe o mouse em cima dos botões: JOGOS, PESQUISA, SUPORTE E DIGITAÇÃO, o texto correspondente aparecerá na área central da página. Sua exlicação foi muito boa, mas como faço para resolver o problema da resolução. De já agradeço. Gerson Compartilhar este post Link para o post Compartilhar em outros sites
Paulo de Tarso F. M. 24 Denunciar post Postado Maio 2, 2007 Como é complicado ajudar quando alguma página não está dentro dos padrões... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Acredite: fiquei mais de meia hora tentando solucionar seu problema... Como comecei, tive que terminar... (Mas que demorou, demorou...) Sua página está, em termos de código, horrível! Assim, tem muita coisa desnecessária e semanticamente incorreta... Foi muito difícol encontrar o "local" do problema... Olha só, as alterações que vou sugerir são totalmente contra os padrões, mas já que o seu caso necessita disso, então vamos lá: 1° - Você tem uma linha no seu código que está assim: <td width="400" rowspan="2">Altere-a para:<td width="400" rowspan="2" style="position: relative">Observe que adicionei a propriedade position: relative. 2° - Você tem as seguintes linhas no seu código: <div id="text1" style="position:absolute; left:49%; top:57%; width:17%; z-index:1; visibility: hidden"> <p align="center"><font face="Arial" size="2">Faça suas pesquisas, trabalhos e divirta-se no mundo fantástico da internet, tudo isso em uma conexão rápida, segura e com o apôio de uma equipe especializada.</font></p></div><div id="text2" style="position:absolute; left:49%; top:57%; width:17%; z-index:2; visibility: hidden"><p align="center"><font face="Arial" size="2">Um vasto acervo dos mais modernos e emocionantes jogos. Interatividade e diversão estão a sua espera, junte sua turma e venha conferir.</font></p></div><div id="text3" style="position:absolute; left:49%; top:57%; width:17%; z-index:3; visibility: hidden"><p align="center"><font face="Arial" size="2">Instalação e manutenção de computadores, impressoras. Cabeamento estruturado e suporte de redes. Atendimento a domicílio.</font></p></div><div id="text4" style="position:absolute; left:49%; top:57%; width:17%; z-index:4; visibility: hidden"><p align="center"><font face="Arial" size="2">Trabalhos cientifícos, xerox, encadernação, plastificação, gravação de CD's e DVD's, digitação de documentos, impressões, scanner. Serviços com qualidade garantida.</font></p></div> Delete-as! (Não se preocupe... A solução vem agora tb... rsrs) 3° - Agora, copie esse trecho de código: <div id="text1" style="position:absolute; left:193px; top:187px; width:160px; z-index:1; visibility: hidden"> <p align="center"><font face="Arial" size="2">Faça suas pesquisas, trabalhos e divirta-se no mundo fantástico da internet, tudo isso em uma conexão rápida, segura e com o apôio de uma equipe especializada.</font></p></div><div id="text2" style="position:absolute; left:193px; top:194px; width:160px; z-index:2; visibility: hidden"><p align="center"><font face="Arial" size="2">Um vasto acervo dos mais modernos e emocionantes jogos. Interatividade e diversão estão a sua espera, junte sua turma e venha conferir.</font></p></div><div id="text3" style="position:absolute; left:192px; top:196px; width:160px; z-index:3; visibility: hidden"><p align="center"><font face="Arial" size="2">Instalação e manutenção de computadores, impressoras. Cabeamento estruturado e suporte de redes. Atendimento a domicílio.</font></p></div><div id="text4" style="position:absolute; left:193px; top:187px; width:160px; z-index:4; visibility: hidden"><p align="center"><font face="Arial" size="2">Trabalhos cientifícos, xerox, encadernação, plastificação, gravação de CD's e DVD's, digitação de documentos, impressões, scanner. Serviços com qualidade garantida.</font></p></div>Alterei alguns valores como os referentes ao top, ao left e width. Pronto? Agora a última etapa! 4° - Agora, você vai pegar este trecho que acabou de copiar e irá colar abaixo da primeira linha que mencionei: <td width="400" rowspan="2" style="position: relative">Irá ficar assim: <td width="400" rowspan="2" style="position: relative"><div id="text1" style="position:absolute; left:193px; top:187px etc...Bom, espero que tenha ajudado... Mas por fim, vale uma dica: estude muito! Se envolva com as webstandards! CSS!!!! Estude mais sobre semântica também... Boa sorte! Compartilhar este post Link para o post Compartilhar em outros sites
creipi 0 Denunciar post Postado Maio 3, 2007 Ok, obrigado! Compartilhar este post Link para o post Compartilhar em outros sites
creipi 0 Denunciar post Postado Maio 20, 2007 Amigo,No Firefox não está dando certo, aparece fora do lugar, você pode continuar me ajudando?Francisco Gerson Compartilhar este post Link para o post Compartilhar em outros sites
Paulo de Tarso F. M. 24 Denunciar post Postado Maio 20, 2007 Amigo,No Firefox não está dando certo, aparece fora do lugar, você pode continuar me ajudando?Francisco GersonBom... Com esse código, acho que eu já ajudei o que pûde... Observe que como seu site está construído de maneira incorreta, isso dificulta muito solucionar qualquer problema... Por isso a importância de construir dentro dos padrões... Lembre-se que no meu último post levei mais de meia hora para encontrar uma solução... Isso, se estivesse de maneira adequada, não levaria nem 5...Recomendo que recomece...Boa sorte! Compartilhar este post Link para o post Compartilhar em outros sites
