robson cavalcante 0 Denunciar post Postado Julho 21, 2006 Bom dia!!!! Estou com algumas dificuldades em Tableless quando vou posicionar DIVS. A minha dúvida reladiona-se quando tenho a seguinte semântica: Exemplo de div com posicionamento: <div id="geral"> <div id="topo"></div> <div id="meio"> <div id="menu_cima"><img src="imagens/topo.jpg" alt="ABREED" width="764" height="344" /></div> <div id="lateral_esquerda">esquerda</div> <div id="lateral_direita">direta</div> <div id="rodape">rodape</div> </div> <div id="baixo"></div> </div> O problema está no posicionamento da DIV ID= lateral_esquerdo com a DIV ID=lateral_direita, eu já usei o seguinte CSS: CSS do Layout: body{ background:#F7F7F7; font-family:Helvetica, Arial, sans-serif; } #geral{ width: 776px; margin:0 auto; background-image:url(../imagens/fundo_geral.jpg); } #topo{ background:#F8C300; height:20px; } #meio{ background:#FFFFFF; width:764px; margin:0 auto; } #menu_cima{ width:764px; } #lateral_direita{ width:150px; margin:5 auto; float:right; } #lateral_esquerda{ width:500px; margin: 5 auto; float:left; } #rodape{ height:50px; clear:both; } #baixo{ height:5px; } Usei a condição float: right e float: left mais não consigo fazer a DIV separar e cada uma ficar no seu canto. Alguém poderia me ajudar? Agradeço a força e segue abaixo os meus contatos: MSN: robson_cavalcantebr@hotmail.com Skype: robson_cavalcante Grande abraço. Compartilhar este post Link para o post Compartilhar em outros sites
Perfect Lion 10 Denunciar post Postado Julho 21, 2006 Kra fiz o teste aqui e está correto o que você fez... :S cada um está no lado que você disse. abaixo da img ;) sendo que o lado esquerdo tem uma largura maior que o da direita.. ;) posta o que você quer ai ;) Compartilhar este post Link para o post Compartilhar em outros sites
Hunter_ 0 Denunciar post Postado Julho 21, 2006 http://forum.imasters.com.br/public/style_emoticons/default/devil.gif Já que todo mundo posta códigos monstruosos, chegou minha vez http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- body{ background:url(images/layout_grid.gif); font-family:Helvetica, Arial, sans-serif; text-align: center; } #geral{ width: 776px; margin: 20px auto; background-image:url(images/bg_cont.gif); border: 1px solid #000; padding: 5px; text-align: left; } #topo, #baixo{ background:#FC0; height:30px; border: 1px solid #000; text-align: left; } #topo{ background: url(images/logo.gif) no-repeat #FFF; } #meio{ background:#FFF; border: 1px solid #000; width:764px; margin: 5px auto; text-align: left; } #menu_cima{ display: block; text-align: left; border: 1px solid #000; margin: 5px; background: url(images/logo.jpg) no-repeat; height: 30px; } #lateral_esquerda, #lateral_direita{ width:150px; margin:5px; border: 1px solid #000; text-align: center; height: 200px; color: #FFF; font-weight: bolder; } #lateral_esquerda{float:left; background: #CCC;} #lateral_direita{ float:right; background: #069;} #rodape{ height:50px; clear:both; margin: 5px; border: 1px solid #000; text-align: center; font-weight: bolder; } //--> </style> </head> <body> <div id="geral"> <div id="topo"></div> <div id="meio"> <div id="menu_cima"></div> <div id="lateral_esquerda">:. Esquerda .:</div> <div id="lateral_direita">:. Direita .:</div> <div id="rodape">:. Rodape .:</div> </div> <div id="baixo"></div> </div> </body> </html> Sugestão, de amigo, tire a imagem do menu cima e use no background como eu fiz ai pra você, so n passo a url...oxe,.... pq n to afim ahruahruahrua flow veja se deu certo e de um retorno aqui mesmo no fórum para ajudar os demais http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif P.S: reduza também o número de divs, mas como sei q você é novo...sei que aprende heheheheh http://forum.imasters.com.br/public/style_emoticons/default/devil.gif Compartilhar este post Link para o post Compartilhar em outros sites
robson cavalcante 0 Denunciar post Postado Julho 21, 2006 Boa tarde. Pessoal, valew a força mais já consegui o resultado que eu queria. Abraços. Segue abaixo: Página: <style type="text/css"> <!-- @import url("css/geral.css"); --> </style> </head> <body> <div id="geral"> <div id="topo"></div> <div id="meio"> <div id="menu_cima"><img src="imagens/topo.jpg" alt="ABREED" width="764" height="344" border="0" usemap="#Map" /> <map name="Map" id="Map"><area shape="poly" coords="335,222" href="#" /></map></div> <div id="lateral_esquerda">esquerda</div> <div id="lateral_direita">direta</div> <div id="rodape">rodape</div> </div> <div id="baixo"></div> </div> </body> </html> CSS: /* CSS Document */ body{ background:#F7F7F7; font-family:Helvetica, Arial, sans-serif; font-size:12px; } #geral{ width: 776px; margin:0 auto; background-image:url(../imagens/fundo_geral.jpg); } #topo{ background:#F8C300; height:20px; } #meio{ background:#FFFFFF; width:764px; margin:0 auto; } #menu_cima{ width:764px; } #lateral_direita{ width:550px; margin:5 auto; float:right; padding:2px; } #lateral_esquerda{ width:200px; margin: 5 auto; float:left; padding:2px; } #rodape{ height:50px; clear:both; } #baixo{ height:5px; } Abraços. Compartilhar este post Link para o post Compartilhar em outros sites