Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Começei a brincar de tabless hoje... nem sei se tô fazendo certo.
O problema é que meu inicio de layout ta certo no IE e no FF ele disfigura e não faço idéia de como arrumar.
Já tentei colocar clear: both; na minha classe #contextFF mas não melhorou muito.
Além disso, gostaria que me apontassem os meus erros quanto ao padrão tabless.
Valeus!
IE:
FF:
Source:
<!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>Solicitação de Vistoria Prévia</title><link href="solicita_vistoria/estilo.css" rel="stylesheet" type="text/css" /><script src="solicita_vistoria/lib.js" language="JavaScript" type="text/javascript"></script><script>MM_reloadPage(true);</script></head><body><div id="titulo"></div> <!--Titulo da página--><div id="separador"></div> <!--Linha branca de 1px--><div id="context" align="center"> <!--Inicio do conteudo--> <div id="intContext"> <!--Interior do conteudo--> <div id="formField-1" class="formField"> <!--Area de formulario 1--> <div id="cabecalhoFF"> <!--Cabeçalho da area--> <div id="tituloFF">Dados do Solicitante</div> <!--Titulo do formulario 1--> <div id="showModeFF"><img id="mm-ff-1" src="/imagens/btn_minimize.gif" border="0" width="10" height="10" /></div> <!--Botão de esconder/mostrar conteudo do formulario--> </div> <div id="contextFF"><span class="label">Nome:</span></div> <!--Conteudo do formulario--> </div> </div></div></body></html>CSS:body { margin-top: 10px; margin-left: 10px; background-image: url(fundo.jpg);}#titulo { width: 604px; height: 36px; border: 1px solid #000000; padding: 1px 1px 1px 1px; background-color: #FFFFFF; background-position: center; background-image: url(solicita_vistoria_top.jpg); background-repeat: no-repeat;}#separador { width: 608px; height: 1px; overflow: auto; background-color: #FFFFFF;}#context { width: 604px; border: 1px solid #000000; padding: 1px 1px 1px 1px; background-color: #FFFFFF; }#intContext { width: 598px; padding: 3px 3px 3px 3px; background-position: bottom; background-image: url(/imagens/fundo_main.gif); background-repeat: repeat-x;}.formField { border: 1px solid #000000;}#cabecalhoFF { width: 100%; background-repeat: repeat-x; background-image: url(/imagens/fundo_dy_table.gif); border-bottom: 1px solid #000000;}#tituloFF { height: 13px; padding: 4px 4px 5px 4px; float: left; font-family: Tahoma; font-size: 12px; color: #122844; font-weight: bold;}#showModeFF { height: 13px; float: right; padding: 7px 5px 3px 4px;}#contextFF { width: 586px; padding: 5px 5px 5px 5px; background-color: #E5EAEF; border-top: 1px solid #FFFFFF;}.label { color: #816D1F; font-family: Tahoma; font-size: 10px; font-weight: bold; float:left;}
Alguém mais pode olhar para mim? É que meu serviço depende um pouco disso... senão vou fazer tudo em tabela mesmo hehehe
http://forum.imasters.com.br/public/style_emoticons/default/devil.gif
Ve isso ai acho q ajuda Fleury
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Pronto. Depois de um muito trabalho.
As explicações estão em cada linha alterada. Depois eu quero ajuda também heim. hehehe
Tive que usar isso em alguns sites tipo meu blogzim de concursos públicos, blog com dicas do orkut e msn e fotos, e blog de dietas e regimes (sim, estão toscos mesmo, eu também preciso ganhar uma graninha com o ad se ns e heheh)
<!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>Solicitação de Vistoria Prévia</title><link href="estilo.css" rel="stylesheet" type="text/css" /><script src="solicita_vistoria/lib.js" language="JavaScript" type="text/javascript"></script><script>MM_reloadPage(true);</script></head><body><div id="geral"> <!-- ACICIONEI ESTE DIV PRA FICAR MAIS FÁCIL DEFINIR WIDTH E POSICIONAMENTO --><H1>Solicitacao de Vistoria Previa</H1> <!--Titulo da página //TROQUEI PELO REAL VALOR SEMANTICO PARA UM TÍTULO QUE É O H1 --><!-- <div id="separador">ESTE SEPARADOR NÃO É MAIS NECESSÁRIO, COLOQUEI UMA MARGEM BOTTOM DE 1PX</div> --><div id="context" > <!--Inicio do conteudo--> <!-- RETIREI O ALIGN CENTER --> <div id="intContext"> <!--Interior do conteudo--> <div id="formField-1" class="formField"> <!--Area de formulario 1--> <div id="cabecalhoFF"> <!--Cabeçalho da area--> <!-- passei o botao para cima do h2 para que o float right funcione corretametne --> <div id="showModeFF"><img id="mm-ff-1" src="/imagens/btn_minimize.gif" border="0" width="10" height="10" /></div> <h2>Dados do Solicitante</h2> <!--Titulo do formulario 1 TRANSFORMEI ESTE DIV EM H2 --> </div> <div id="contextFF"><span class="label">Nome:</span></div> <!--Conteudo do formulario--> </div> </div></div></div> <!-- fim div GERAL --></body></html>
{margin: 0px; padding: 0px;} / TRUQUE QUE você DEVE USAR EM TODOS SEUS CSS PARA QUE VOCE MESMO TENHA CONTROLE SOBRE OS ELEMENTOS E NÃO O BROWSER USE VALORES PADRÃO /body { margin-top: 10px; margin-left: 10px; background-image: url(fundo.jpg);}#geral { width: 604px; / ELIMINA A NECESSIDADE DE DEFINIR WIDTH EM CAAADA DIV /}h1 { / AQUI ESTAVA O #TITULO / margin-bottom:1px; / ELIMINA A NECESSIDADE DO SEU DIV SEPARADOR / / width: 604px; COLOCADO NO #GERAL / / height: 36px; TIREI E ESTOU DEFININDO NO PADDING / border: 1px solid #000000; padding: 10px 0px 10px 10px; background-color: #57718B; background-position: center; background-image: url(solicita_vistoria_top.jpg); background-repeat: no-repeat; font-weight: bold; font-family: Verdana; font-size: 16px; color:white;}/ SEU SEPARADOR NÃO É MAIS NECESSÁRIO POIS DEFINI UM MARGIN BOTTOM NO TITULO H1, ENTAO RETIREI A DECLARAÇÃO DELE /#context { / width: 604px; COLOCADO NO #GERAL / border: 1px solid black; padding: 1px 1px 1px 1px; background-color: #FFFFFF; }#intContext { / width: 598px; NÃO PRECISAREMOS DISSO SE DEFINIRMOS UM PADDING BOM EM #CONTEXT / padding: 3px 3px 3px 3px; background-position: bottom; background-image: url(/imagens/fundo_main.gif); background-repeat: repeat-x;}.formField { border: 1px solid red;}#cabecalhoFF { / width: 100%; NÃO PRECISAMOS DISSO. É AUTOMÁTICO / background-repeat: repeat-x; background-image: url(/imagens/fundo_dy_table.gif); border-bottom: 1px solid black; height:24px;}h2 { / TRANSFORMEI O DIV TITULOFF EM UM H2 / / height: 13px; PASSEI ESTE HEIGHT PARA O CABECALHOFF / padding: 4px 4px 5px 4px;/ A CULPA DO SEU TITULOFF FICAR FORA DA CAIXA É DESTE FLOAT LEFT. ELE NÃO É NECESSÁRIO. DEFINIREMOS SÓ O FLOAT RIGHT NA IMAGEM / / float: left; -- RETIREI O FLOAT LEFT SERVE PARA O TEXTO APARECER NA LATERAL E NÃO É O CASO AQUI / font-family: Tahoma; font-size: 12px; color: #122844; font-weight: bold;}#showModeFF { height: 13px; float: right; padding: 7px 5px 3px 4px;}#contextFF { / width: 586px; NÃO PRECISAMOS DISTO / padding: 5px 5px 5px 5px; background-color: #E5EAEF; border-top: 1px solid #FFFFFF;}.label { color: #816D1F; font-family: Tahoma; font-size: 10px; font-weight: bold; / float:left; NOVAMENTE O FLOAT LEFT TIRA ELE DE DENTRO DO DIV PAI */}
Agora você faz suas alterações. Quem tiver mais coisa a corrigir aqui, é só postar...
Ah e lembre-se de ler os tutoriais indicados aqui no forum, foi neles que eu aprendi...
:blink: tem de perguntar a quem sabe oia ai o micox destruindo...valeu ai micox!! tem duas saídas agora, mas a dele ta melhor pq tem os coments.Fleury chefe,....volte pras tables não!! huaruarhur :lol:
Hehehe, vou estudar galera... phoda é o tempo =/Mas mesmo assim vou tentar.A proposito, não testei ainda do micox mas o seu hunter, não funcionou no FF também.mesmo assim valeu a ajuda de todos e quando precisar, é só chamar xD
O meu, eu testei no FF1.5 e IE6 e deu tudo beleza...
Não intendi isso muito bem...
h2 { / TRANSFORMEI O DIV TITULOFF EM UM H2 / / height: 13px; PASSEI ESTE HEIGHT PARA O CABECALHOFF / padding: 4px 4px 5px 4px;/ A CULPA DO SEU TITULOFF FICAR FORA DA CAIXA É DESTE FLOAT LEFT. ELE NÃO É NECESSÁRIO. DEFINIREMOS SÓ O FLOAT RIGHT NA IMAGEM / / float: left; -- RETIREI O FLOAT LEFT SERVE PARA O TEXTO APARECER NA LATERAL E NÃO É O CASO AQUI / font-family: Tahoma; font-size: 12px; color: #122844; font-weight: bold;}#showModeFF { height: 13px; float: right; padding: 7px 5px 3px 4px;}
<div id="showModeFF"><img id="mm-ff-1" src="/imagens/btn_minimize.gif" border="0" width="10" height="10" /></div> <h2>Dados do Solicitante</h2> <!--Titulo do formulario 1 TRANSFORMEI ESTE DIV EM H2 --> </div>
Tipo que tanto a imagem quanto o h2 estão dentro do div com o float: right.
pq esse float só se aplicou na imagem e não colocou o h2 a direita também?
Parece que não, Fleury... dá uma olhada melhor... e lê os comentários que eu coloquei:
<div id="showModeFF"> <!-- Começa o div --> <img id="mm-ff-1" src="/imagens/btn_minimize.gif" border="0" width="10" height="10" /> <!-- Imagem --></div> <!-- Fim do DIV --><h2>Dados do Solicitante</h2> <!--Titulo do formulario 1 TRANSFORMEI ESTE DIV EM H2 --></div> <!-- Não olhei direito, mas aqui me parece ser um div superior, que engloba inclusive o #showModeFF -->
[http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/thumbsup.gifÉ o seguinte pessoal:
O h2("dados do solicitante") e o div showModeFF (o que tem a imagem de minimizar) estão dentro de um Div pai que serve de cabecalho (cabecalhoFF).
Quando você Possui 2 elementos e quer que eles fiquem lado a lado, não é necessário utilizar float nos 2. você escolhe 1 dos 2 elementos, coloca ele antes no código fonte e aplica o float nele. Por isto que o div do showMOdeFF ficou antes do h2 e só ele levou o float. Sakou?
Quanto a este comentário
/ A CULPA DO SEU TITULOFF FICAR FORA DA CAIXA É DESTE FLOAT LEFT. ELE NÃO É NECESSÁRIO. DEFINIREMOS SÓ O FLOAT RIGHT NA IMAGEM / / float: left; -- RETIREI O FLOAT LEFT SERVE PARA O TEXTO APARECER NA LATERAL E NÃO É O CASO AQUI /Ele explica o que eu falei acima. E, se dentro do div cabeçalhoFF só tiverem elementos que estão em float, o cabeçalhoFF recebe um height quase 0 (zero) e os elementos em float ficam aparecendo pra fora (isso no FF).
Sacaram? qualquer coisa postae...
É isso aí micox...É que parece que o Fleury não tinha visto que a tag do div showModeFF fechava antes do H2...
É isso aí micox...É que parece que o Fleury não tinha visto que a tag do div showModeFF fechava antes do H2...
isso isso isso xD
QUOTE(THE_WATCHER @ Feb 8 2006, 07:25 PM) *É isso aí micox...É que parece que o Fleury não tinha visto que a tag do div showModeFF fechava antes do H2...isso isso isso xD
hehehe era o que eu imaginava...se tiver mais alguma dúvida, manda aí :)
Teu código ainda ta meio sujo, ta muito "old school" de ser....vou analisar e ver o q pode ta errado, demora um bucadim http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif