Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
oi..
su novo com css, e estou tentando montar um site com css, já comecei do zero 3 vezes, e não estou conseguindo resolver os problemas então resolvi postar uma imagem para vocês poderem ver como é o layout e me mostrarem qual é a melhor maneira de faze-lo...
o maior problema que eu estou enfrentando é quanto as duas colunas, que eu não consigo fazer funcionar no FF e no IE ao mesmo tempo....
obrigado...
carmolim,
Naquele outro tópico eu lhe passei um link que ensina a fazer layout's.
A imagem que você passou pode ser adaptada do layout de 2 colunas.
[]'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
gio! comecei a montar o layout em cima do modelo que tem nesse artigo.. e estava indo tudo perfeito até que eu coloquei um margin-right: 25px no #conteudo daí no internet explorer ele está jogando o tudo 25px para direita... e no FF está perfeito...
alguém tem alguma idéia do que pode estar acontecendo??por que eo IE interpreta as informações de maneira diferente...e as vezes interpreta corretamente e as vezes não??
Olha eu fazia miseria pra consertar essa coisa do margin o.o nos dois navegadores... até que comecei a usar
* {margin: 0; padding: 0;}
Espero que isso resolva o.o
mas isso daí nõ vai zerar o espaço que eu quero que tenha??eu usei o margin justamente para separar uma div da div externa...
Isso vai zerar todas a margins e paddings dos navegadores. Fazendo isso você vai ter colocar os padding/margin onde você necessitar, por exemplo, na tag <p></p>Aparentemente dá um pouco mais de trabalho, mas você tem um controle maior do que está fazendo.Mesmo assim, haverá algumas diferenças entre IE, FF, safari e outros.Boa noite.
poste o seu código//
Se você não usar isso, vai acabar usando IE Hacks.
infelizmente não deu certo esse código que você passou...
<!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">* {margin: 0; padding: 0;}body { background-image: url(css/px_background.jpg); background-repeat: repeat-x; background-color: #625723; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; color: #2A1600;}a {text-decoration:none;}a img {border: 0;}img {border: 0;}.titulo { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #2A0300; background-color: #d2d291; border-left-width: 5px; border-left-style: solid; border-left-color: #3e2003; height: 25px; padding: 10px; margin-left: -16px;}#tudo { width: 720px; margin: 35px auto; background-color: #DADB99; padding-bottom: 50px;}#topo { width: 720px;}#menu a { background-color: #b6b277; border-left-width: 2px; border-left-style: solid; border-left-color: #5d4621; padding: 0 10px 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: italic; font-weight: bold; color: #2A0300; vertical-align: middle; height: 50px; margin: 0 0 0 10px;}#menu { width: 720px; background-color: #c3bf85}#esquerda { float: left; width: 320px; padding: 15px; border-left-width: 1px; border-left-style: dashed; border-left-color: #2A0300; border-right-width: 1px; border-right-style: dashed; border-right-color: #2A0300; margin: 20px 0 40px 25px;}#direita { float: right; width: 280px; margin-top: 20px; padding: 10px; margin-right: 25px;}#menu_aux a { background-color:#c4c280; display:block; font-family:arial; margin-top:2px; color: #2A0300; text-align: right; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; height: 20px; padding: 5px 8px 0 0; vertical-align: middle; margin: 3px 0 3px 0;}#menu_aux { background-color: #b8b472; padding: 10px;}#servicos { background-color: #3e2003; width: 185px; margin: 0px auto 10px auto; height: 30px; padding: 10px 0 0 0; text-align: center; vertical-align: middle;}#servicos_box { background-image: url(css/px_background_servicos.jpg); text-align: center; color: #E6DF98; padding-bottom: 10px; clear: both;}</style></head><body><div id="tudo"> <div id="topo"> <img src="images/topo.jpg" alt="Dr. Marluz Cesar Mazepa" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="15,30,384,110" href="#" alt="Dr. Marluz Cesar Mazepa" /> </map> <div id="menu"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> </td> <td class="links_menu"><a href="home.html">Home</a></td> <td> </td> <td class="links_menu"><a href="servicos.html">Serviços</a></td> <td> </td> <td class="links_menu"><a href="faq.html">Perguntas Frequentes</a></td> <td> </td> <td class="links_menu"><a href="contato.html">Contato</a></td> <td> </td> </tr></table> </div><!--fim da div "menu"--> </div><!--fim da div "topo"--> <div id="esquerda"> <span class="titulo">Implantes</span><br /> <br /> <br /> <p>Para dentes perdidos, não há nenhuma imitação mais próxima da natureza do que o implante dental. Esta fantástica prótese é fixa por um pequeno parafuso de titânio que se solidifica ao osso da mandíbula ou maxila para criar uma raiz artificial. <br /> <br /> Sobre o implante é colocado uma coroa estética. O resultado? Uma forte e duradoura prótese que permite ao paciente comer confortavelmente, praticamente qualquer tipo de alimento.<br /> <br /> Com implante, você não precisa se preocupar com a manutenção da dentadura, adesivos, limpeza ou deslocamento. O cuidado com o implante é o mesmo que você faria com seu dente natural, escovar diariamente e passar fio dental, acompanhado de visitas regulares ao dentista para limpeza profissional. Saiba mais sobre implantes dentais, ligue para o Dr. Marluz Mazepa e marque uma consulta. <br /> <br /> Implantes dentais podem dar uma nova aparência a sua vida! </p> </div><!--fim da div "esquerda"--> <div id="direita"> <div id="menu_aux"> <a href="#">augusto chagas lima do carmo</a> <a href="#">augusto chagas lima do carmo</a> <a href="#">augusto chagas lima do carmo</a> <a href="#">augusto chagas lima do carmo</a> </div><!--fim da div "menu_aux"--> </div><!--fim da div "direita"--> <div id="servicos_box"> <div id="servicos"> Serviços Prestados</div> <table width="80%" border="0" cellspacing="0" cellpadding="6"> <tr> <td>Cuidados Preventivos</td> <td>Clareamento </td> <td>Ortodontia</td> <td align="center">Tratamento Periodontal</td> </tr> <tr> <td>Facetas de Porcelana</td> <td>Implantes</td> <td>Próteses</td> <td>Serviços Cosméticos</td> </tr> </table> </div> <!--fim da div "rodape"--></div><!--fim da div "tudo"--></body></html>
esse código aí eu peguei a base desse aqui:
http://forum.imasters.com.br/index.php?showtopic=219987
edit... pelo menos era... mas é um tópico aqui do fórum... layout com duas colunas fixas...
só mudei as margens..paddings...bordas.. etc...
Num vo faze o código todo né... mas vê se te da uma luz!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Título do Site</title><style type="text/css">* {margin: 0; padding: 0;} body {background-image: url(css/px_background.jpg);background-repeat: repeat-x;background-color: #625723;font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: 700;color: #2A1600;}img {border: 0;}ul {list-style: none;}h3 {font-size: 16px;font-weight: bold;color: #2A0300;background-color: #d2d291;border-left-width: 5px;border-left-style: solid;border-left-color: #3e2003;height: 25px;display: block;width: 100px;}p {text-indent: 20px; text-align: justify; line-height: 20px;} #tudo {width: 720px;margin: 0 auto;background-color: #DADB99;padding-bottom: 50px;}#topo {width: 720px;}#menu li {display: inline;}#menu li a {display: block; width: 158px; height: 25px; float: left; background-color: #b6b277; border-left-width: 2px; border-left-style: solid; border-left-color: #5d4621; padding: 10px; font-size: 15px; font-style: italic; font-weight: bold; color: #2A0300;}#conteudo {float: left; width: 417px; padding: 20px;}#menu_dir {float: right; width: 223px; padding: 20px;}#rodape {clear: both;}</style></head><body><div id="tudo"> <div id="topo"><img src="images/topo.jpg" alt="Dr. Marluz Cesar Mazepa" usemap="#Map" /><map name="Map" id="Map"><area shape="rect" coords="15,30,384,110" href="#" alt="Dr. Marluz Cesar Mazepa" /></map></div> <div id="menu"> <ul> <li><a href="home.html">Home</a></li> <li><a href="servicos.html">Serviços</a></li> <li><a href="faq.html">Perguntas Frequentes</a></li> <li><a href="contato.html">Contato</a></li> </ul> </div> <div id="conteudo"> <h3>Implantes</h3> <p>Para dentes perdidos, não há nenhuma imitação mais próxima da natureza do que o implante dental. Esta fantástica prótese é fixa por um pequeno parafuso de titânio que se solidifica ao osso da mandíbula ou maxila para criar uma raiz artificial.</p> <p>Sobre o implante é colocado uma coroa estética. O resultado? Uma forte e duradoura prótese que permite ao paciente comer confortavelmente, praticamente qualquer tipo de alimento. </p> <p>Com implante, você não precisa se preocupar com a manutenção da dentadura, adesivos, limpeza ou deslocamento. O cuidado com o implante é o mesmo que você faria com seu dente natural, escovar diariamente e passar fio dental, acompanhado de visitas regulares ao dentista para limpeza profissional. Saiba mais sobre implantes dentais, ligue para o Dr. Marluz Mazepa e marque uma consulta.</p> <p> Implantes dentais podem dar uma nova aparência a sua vida! </p> </div> <div id="menu_dir"> <ul> <li><a href="#">augusto chagas lima do carmo</a></li> <li><a href="#">augusto chagas lima do carmo</a></li> <li><a href="#">augusto chagas lima do carmo</a></li> <li><a href="#">augusto chagas lima do carmo</a></li> </ul> </div> <div id="rodape">Content for id "rodape" Goes Here</div></div></body></html>
Bom eu não pude olhar no seu css todo, mas eu reparei que você definiu varias vezes "font" e "color" mas usando o mesmo que já estava definido no body, então não precisa.
esse código que você mandou.. ta mudando o que?
você usou tabelas no seu codigo e uma div dentro de outra num sei pra que no menu aux ... to te ensinando a fazer menu sem tabela.Falta colocar os paddings e etc... não se esquecendo que quando muda o padding muda height e/ou width
descobri o problema finalmente!!!!!!
é um problema que o IE tem com margens e float...
o IE não sei porque... esse lazarento.. ehhehe duplica o valor das margens quando tem float....
a solução foi a seguinte:
coloquei dentro da tag div esse código style="display: inline"...
para maiores explicações:
http://www.positioniseverything.net/explor...led-margin.html
http://www.positioniseverything.net/explor...loatIndent.html
coloquem resolvido no meu tópico
Olá carmolim, Boa Tarde!
QUe bom que você conseguiu resolver o problema. Melhor ainda é você ter retornado ao post e compartilhado a solução com os demais membros. Parabéns continui assim. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Crie o XHTML na ordem em que você vê na imagem e após ter criado o XHTML crie o CSS somente posicionando e editando o conteúdo.
Acho que é essa resposta que você espera.