Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Buenas, amigos!
Tenho um baita desafio para vocês - bem, para mim está sendo... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif
É o seguinte: estou desenvolvendo o HTML de uma página cuja o rodapé tem largura 100% da tela do usuário: há o centro dela, de 777px, fixo, e o restante deve ser preenchido com fundo. Porém, há um detalhe: há um fundo que comporá o lado esquerdo da tela - até o fim - e outro que comporá o lado direito - até o fim.
Honestamente, com tabela, isso seria barbada. Mas já como peguei aversão a ela...
Eu, apesar de estar há tempos matutando como encaixar, não estou sendo feliz, talvez porque não conheça algum truquezinho do CSS q facilitaria a minha vida :)
Bem, amigos, preciso da ajuda de vcs com certa urgência. Sabendo uma solução, compartilhem... O meu futuro profissional está jogo, ehehehehhe.
Abraço a todos.
É, sem link, fica difícil... Mas só para adiantar: se seu futuro está em jogo, meu, coloca uma tabela lá e depois corre atrás da alternativa mais adequada! Todos sabem que as tabelas servem para dados tabulares e não para estruturar a página, mas há casos que de repente você precisa! Então, é isso... Põe lá a tabela e depois você procura com mais calma a solução correta...Abraço!
Opa!
Boa tarde, amigo!
Obrigado pela atenção de vcs!
Eis o design que menciono: http://www.turmadochaves.com/tableless.gif
Paulo, estou deixando de lado por momento o rodapé. Além do CSS, estou desenvolvendo outras coisinhas, de programação.
Valeu, amigos!
Olá amigo. Eu analisei a figura, mas acho q seria melhor você postar o código, teria como?No aguardo....
Opa! Segue abaixo:
<div id = "geral"> <div id = "topo"> <div id = "topo_cima"> <div id = "topo_cima_logo"> <a href = "index.html" title="Lorem ipsum"><img src = "img/logo.gif" alt = "Lorem ipsum" border="0" /></a> </div> <div id = "topo_cima_frase"> <img src = "img/topo_frase.jpg" alt = "" /> </div> <div id = "topo_cima_menu"> <div class = "topo_cima_menu"> <ul> <li><a href = "">english</a></li> <li><a href = "">español</a></li> </ul> </div> </div> </div> </div><!-- FECHA TOPO --> <div id = "conteudo"> <div id = "topo_baixo"></div> <div id = "esquerdo"> <div id = "esquerdo_menu"> <ul> <li class="destaque"><a href = "#">Lorem ipsum</a></li> <li><a href = "#">Lorem ipsum</a></li> <li><a href = "#">Lorem ipsum</a></li> <li><a href = "#">Lorem ipsum</a></li> <li><a href = "#">Lorem ipsum</a></li> <li><a href = "#">Lorem ipsum</a></li> <li><a href = "#">Lorem ipsum</a></li> <li><a href = "#">Lorem ipsum</a></li> </ul> </div> </div><!-- FECHA ESQUERDO --> <div id = "meio"> <div id = "meio_nav"><a href = "#">home</a> » <a href = "#"><strong>lorem ipsum</strong></a></div> <img src = "img/titulo_1.jpg" align = "top" class = "posicao_img_titulo_1" alt="" /> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <div id = "meio_menu_verde"> <img src="img/conteudo_menu_verde_titulo.jpg" align="top" alt="" /> <div id = "meio_menu_verde_conteudo"> <a href="#" onClick="abre_fecha('1_1')"><strong>Lorem ipsum</strong></a> <span class = "submenu-faq" id = "1_1"> Lorem ipsum </span> <br> <a href="#" onClick="abre_fecha('1_2')"><strong>Lorem ipsum</strong></a> <span class = "submenu-faq" id = "1_2"> Lorem ipsum </span> </div> <img src = "img/conteudo_menu_verde_baixo.jpg" align="bottom" alt="" /> </div><!-- FECHA CONTEUDO_MENU_VERDE --> <div id = "meio_menu_azul"> <img src = "img/conteudo_menu_azul_titulo.jpg" align="top" alt="" /> <div id = "meio_menu_azul_conteudo"> <ul> <a href="#" onClick="abre_fecha('2_1')"><strong>Lorem ipsum</strong></a> <div class="submenu-faq" id = "2_1"> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> </div> </ul> <ul class="sem_espaco"> <a href="#" onClick="abre_fecha('2_2')"><strong>Lorem ipsum</strong></a> <div class="submenu-faq" id = "2_2"> <li>Lorem ipsum</li> </div> </ul> </div> <img src = "img/conteudo_menu_azul_baixo.jpg" align="bottom" alt="" /> </div><!-- FECHA CONTEUDO_MENU_AZUL --> <img src = "img/titulo_2.gif" class="posicao_img_titulo_2" alt="" /> <div id = "meio_bts"> <div id = "meio_bts_bt1"> <a href = "#"><img src="img/conteudo_bt_1.jpg" class="borda_zero" alt="" /></a> </div> <div id = "meio_bts_bt2"> <a href = "#"><img src="img/conteudo_bt_2.jpg" class="borda_zero" alt="" /></a> </div> </div> </div><!-- FECHA MEIO --> </div><!-- FECHA CONTEUDO --> <div id = "direito"> <img src = "img/busca.gif" class="espaco_busca" alt="" /> <div id = "direito_busca_campo"> <input type = "text" class="campo" /> </div> <div id = "direito_busca_bt"> <input type = "image" src="img/bt_busca.jpg" /> </div> <img src = "img/linha_2.gif" class="espaco_busca_linha" alt="" /> </div><!-- FECHA DIREITO --> </div><!-- FECHA GERAL --> <div id = "rodape"> <div id = "rodape_conteudo"> </div> </div><!-- FECHA RODAPE -->
Poste um link, por favor!
Fica mais fácil de ajudar! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif