[Resolvido] Montagem de layout

João Paulo Novais · Dezembro 29, 2009

Pessoal, gostaria de uma ajuda de vocês...

Preciso montar um layout com três LINHAS sendo:

- Na primeira linha uma logo à esquerda, um flash no meio e outra imagem à direita;

- Na segunda linha um menu de acesso rápido como o dia por extenso, alguns ícones (6) e campos de usuário e senha para logar no site;

- Na teceira linha uma área de conteúdo que será composta por várias abas

O problema:

- Não consigo colocar na primeira linha uma imagem à esquerda, o flash no meio e outra a direita. Só ficam o flash e a imagem da direita;

- Na segunda linha, não consigo colocar "inline" o dia, os ícones e o login e senha;

- Na terceira linha, estou estudando formas para criar as abas, Dicas?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Emaús Nacional</title>
    <style type="text/css" media="screen, projection">

    * {
        padding:0;
        margin:0;
        border:0;
    }
    body {
        font-size:67.5%;
        text-align:center;
        min-width:760px;
        font-family:Verdana, Tahoma, Arial;
    }

    p {
        margin: 0 0 15px 0;
    }

    #divPrincipal{
        background-color:blue;
    }

    #divCabecalho {
	background-color:#286198;
	height: 100px;
    }

    #divConteudo {
	background-color: #FFFFFF;
	padding: 10px;
    }

    #divMenu {
	background-color: #286198; /* definido cor de background */
	height: 40px; /* definindo altura de 40px */
	clear: both;  /* não permitindo que objetos "flutuantes" obstruam o rodapé. */
    }

    a:link, a:visited {
        text-decoration:none;
        border-bottom:1px dotted #000;
    }

    a:hover, a:active {
        border-bottom-style:solid;
    }

    ul, ol {
        list-style:none;
        width:100%;
        float:left;
    }

    ul li {
        float:left;
    }

    h1, h2, h3 {
	margin: 0.8em 0;
	color:#c30;
	font-size:1.4em;
    }
    </style>
  </head>

  <body id="www.emaus.org.br">
      <div id="divPrincipal">
          <div id="divCabecalho">
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" height="140" width="380">
                  <param name="movie" value="vinheta.swf">
                  <param name="quality" value="high">
                  <param name="bgcolor" value="#ffffff">
                  <embed type="application/x-shockwave-flash" src="img/vinheta.swf" quality="high" bgcolor="#ffffff" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" height="140" width="380">
              </object>
            </div>
            <div id="divMenu">
                <label>{dia_semana}, {hoje} </label>
                <ul id="subMenu">
                    <li><a href="admin.php?modulo=Alavanca"><img name="img_alavanca" src="img/ic_alavanca_off.gif" height="28" width="27"></a></li>
                    <li><a href="admin.php?modulo=Fale_conosco"><img name="img_fale_conosco" src="img/ic_fale_off.gif" height="28" width="27"></a></li>
                    <li><a href="admin.php?modulo=Alavanca"><img name="img_alavanca" src="img/ic_galeria_off.gif" height="28" width="27"></a></li>
                    <li><a href="admin.php?modulo=Documento"><img name="img_documentos" src="img/ic_jornal_off.gif" height="28" width="27"></a></li>
                    <li><a href="admin.php?modulo=Link"><img name="img_link" src="img/ic_link_off.gif" height="28" width="27"></a></li>
                </ul>
                <form method="post" id="frmAcesso" name="frmAcesso">
                    <label>Usuário:
                        <input id="usuario_login" type="text" name="usuario_login" value="{usuario_login}" autocomplete="off"><br>
                    </label>
                    <label>Senha:
                        <input id="senha_login" type="password" name="senha_login" value="{senha_login}" autocomplete="off"><br>
                    </label>
                    <input id="login" type="submit" name="acao" value="Ok">
                </form>
            </div>
            <div id="divConteudo">
              <ul>
                <li><a href="#tab1"><span>Tab 1</span></a></li>
                <li><a href="#tab2"><span>Tab 2</span></a></li>
                <li><a href="#tab3"><span>Tab 3</span></a></li>
              </ul>
              <div id="tab1">
               <p>First tab is active by default:</p>
               <pre><code>$('#container').tabs();</code></pre>
              </div>
              <div id="tab2">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
              </div>
              <div id="tab3">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
              </div>
            </div>
      </div>
  </body>
</html>

Paulo de Tarso F. M. · Dezembro 29, 2009

Meu caro João Paulo Novais, criei um novo tópico para sua dúvida, pois, apesar de serem dúvidas parecidas, são dois casos distintos.

(O post inicial deste tópico havia sido postado neste tópico: http://forum.imasters.com.br/index.php?/topic/374887-nao-consigo-montar-o-layout/)

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Thiago Retondar · Dezembro 29, 2009

Não consigo colocar na primeira linha uma imagem à esquerda, o flash no meio e outra a direita. Só ficam o flash e a imagem da direita;

Use float: left, margin: 0 auto e float: rightrespectivamente.

Na segunda linha, não consigo colocar "inline" o dia, os ícones e o login e senha;

Trabalhe com float: left e para dar o espaço use margin ou padding.

Na terceira linha, estou estudando formas para criar as abas, Dicas?

Pode usar JavaScript. Há alguns plugins do jQuery que fazer isso.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

João Paulo Novais · Dezembro 30, 2009

Tiago,

Obrigado pela resposta!!! Todos os três problemas resolvidos! http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif Entretanto não sei se está elegante e se segui fielmente suas sugestões, eis o código:

Obs: Quais seriam os plugins JQuery que você falou?

O que pode ser melhorado, além do programador?? http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Emaús Nacional</title>
    <style type="text/css" media="screen, projection">

    * {
        padding:0;
        margin:0;
        border:0;
    }
    body {
        font-size:67.5%;
        text-align:center;
        min-width:760px;
        font-family:Verdana, Tahoma, Arial;
    }

    p {
        margin: 0 0 15px 0;
    }

    #divPrincipal{
        background-color:#FFFFFF;
    }

    #divCabecalho {
	background-color:#286198;
	height: 96px;
    }

    #img_logotipo {
        float:left;
    }

    #img_discipulos {
        float:right;
    }

    #divConteudo {
	margin: 10em;
    }

    #divMenu {
	height: 40px;
	float:left;
    }

    #lbl_dia_semana {
        float:left;
        padding:0 20em 0 0;
    }

    #opt_menu {
        margin-top:5em;
        padding: 0 20em 0 25em;
    }

    #frmAcesso {
        float:right;
        padding: 0 0 0 15em;
    }


    a:link, a:visited {
        text-decoration:none;
        border-bottom:1px dotted #000;
    }

    a:hover, a:active {
        border-bottom-style:solid;
    }

    ul, ol {
        list-style:none;
        float:left;
    }

    ul li {
        float:left;
    }

    h1, h2, h3 {
	margin: 0.8em 0;
	color:#c30;
	font-size:1.4em;
    }
    </style>
  </head>

  <body id="www.emaus.org.br">
      <div id="divPrincipal">
          <div id="divCabecalho">
              <img alt="Logotipo do Movimento de Emaús" id="img_logotipo" src="img/logotipo.gif">
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" height="140" width="380">
                  <param name="movie" value="vinheta.swf">
                  <param name="quality" value="high">
                  <param name="bgcolor" value="#ffffff">
                  <embed type="application/x-shockwave-flash" src="img/vinheta.swf" quality="high" bgcolor="#ffffff" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" height="140" width="380">
              </object>
              <img alt="Imagem dos Discípulos de Emaús" id="img_discipulos" src="img/logotipo.gif">
            </div>
            <div id="divMenu">
                <label id="lbl_dia_semana">{dia_semana}, {hoje} </label>
                <ul id="opt_menu">
                    <li><a href="admin.php?modulo=Alavanca"><img name="img_alavanca" src="img/ic_alavanca_off.gif" height="28" width="27"></a></li>
                    <li><a href="admin.php?modulo=Fale_conosco"><img name="img_fale_conosco" src="img/ic_fale_off.gif" height="28" width="27"></a></li>
                    <li><a href="admin.php?modulo=Alavanca"><img name="img_alavanca" src="img/ic_galeria_off.gif" height="28" width="27"></a></li>
                    <li><a href="admin.php?modulo=Documento"><img name="img_documentos" src="img/ic_jornal_off.gif" height="28" width="27"></a></li>
                    <li><a href="admin.php?modulo=Link"><img name="img_link" src="img/ic_link_off.gif" height="28" width="27"></a></li>
                </ul>
                <form method="post" id="frmAcesso" name="frmAcesso">
                    <label>Usuário:
                        <input id="usuario_login" type="text" name="usuario_login" value="{usuario_login}" autocomplete="off"><br>
                    </label>
                    <label>Senha:
                        <input id="senha_login" type="password" name="senha_login" value="{senha_login}" autocomplete="off"><br>
                    </label>
                    <input id="login" type="submit" name="acao" value="Ok">
                </form>
            </div>
            <div id="divConteudo">
              <ul>
                <li><a href="#tab1"><span>Tab 1</span></a></li>
                <li><a href="#tab2"><span>Tab 2</span></a></li>
                <li><a href="#tab3"><span>Tab 3</span></a></li>
              </ul>
              <div id="tab1">
               <p>First tab is active by default:</p>
               <pre><code>$('#divConteudo').tabs();</code></pre>
              </div>
              <div id="tab2">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
              </div>
              <div id="tab3">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
              </div>
            </div>
      </div>
  </body>
</html>

Thiago Retondar · Dezembro 30, 2009

Tente não usar id com nomes das tags. Exemplos #divConteudo poderia ser só #conteudo, não? Se quiser organizar o CSS, faça assim: div#conteudo.

Tente, também, não usar medidas distintas, como px e em.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

João Paulo Novais · Janeiro 2, 2010

Obrigado Tiago, mais uma vez!

As coisas estão evoluindo...

Da forma que estava fazendo, trabalhando "inline" os objetos (imagens, divs e forms) estavam corretamente alinhados, mas a distância entre a linha superior e a inferior estavam muito grandes pela diferença de altura entre os conteúdos, dessa forma mudei para display:block, o que melhorou o design, contudo ainda estou com umas dificuldades:

- Como fazer, num layout três colunas e duas linhas para os conteúdos se dividirem igualmente pelo espaço (width:100%)?

- Como fazer para as linhas alinharem sem ficar conteúdo órfão?

Segue link com o exemplo: http://emaus.sourceforge.net/

Matheus Brito · Janeiro 2, 2010

Só uma dica JQuery não é um plugin e sim um framework.

Abs

Obs: Quais seriam os plugins JQuery que você falou?

O que pode ser melhorado, além do programador?? http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif

Thiago Retondar · Janeiro 2, 2010

Cara, não entendi suas últimas dúvidas...

É Layout líquido que quer fazer? Look: http://forum.imasters.com.br/index.php?/topic/347842-layout-liquido/

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

João Paulo Novais · Janeiro 2, 2010

Thiago,

Acho que o layout não é 100% líquido não, mas o objetivo é criar um design limpo e flexível que atenda os diferentes browsers e resoluções. Ousado não? :-D

Tentando ser mais claro:

1 - Na abas (área de conteúdo) quero dividir o conteúdo que está sempre envolto por um fieldset em 3 colunas por até 3 linhas.

2 - Gostaria de fixar as laterais (talvez 20% em cada uma), deixando a coluna do meio livre, mas quando retiro o float:left desta ela vai para a direita fora da área estipulada.

Obs: Atualizei o site http://emaus.sourceforge.net/

Gostei muito da referência. Uma dúvida: as áreas são montadas com divs (header, menu e etc) mas e os conteúdos, também só podem ser div ou poderiam ser fieldset, como no meu caso?

Thiago Retondar · Janeiro 2, 2010

Os blocos ali são as div. Dentro delas pode usar o que quiser.

Olhe o HTML no tutorial e você vai ver como fazer.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

João Paulo Novais · Janeiro 7, 2010

Pois é eu já estava trabalhando dessa forma...

De qualquer modo, para não complicar, dentro de minha área de conteúdo (abas) coloquei três colunas: esquerda, meio e direita e já tentei várias formas e tutoriais como estes:

http://css.maxdesign.com.au/floatutorial/introduction.htm

http://www.richardbarros.com.br/blog/css/css-truques-para-dominar-a-propriedade-float

http://www.desenvolvimentoparaweb.com/css/css-float-consideracoes-dicas-e-macetes-para-bons-layouts-na-web/

Apesar do layout estar completamente diferente no IE (pelo menos no meu IE for linux está), gostaria de colocar a div da direita alinhada com as demais (esquerda e meio), parece idiota, mas já fiz muitas tentativas (sou quase um macaco com uma metralhadora nesta hora) e ela só fica para baixo, mesmo determinando os tamanhos de cada uma e o posicionamento com magin... Alguma idéia?

Uma curiosidade é que para resolver o alinhamento da div do meio (que estava com o mesmo problema) bastou determinar padding para a da esquerda e a do meio. Confesso que achei muito estranho, caso alguém tenha uma explicação agradeço.

O Html é:

...
<div id="conteudo">
              <ul id="abas">
                <li><a href="#abaPrincipal"><span>Principal</span></a></li>
                <li><a href="#abaFiquePorDentro"><span>Fique por dentro</span></a></li>
                <li><a href="#abaAtualizeSe"><span>Atualize-se</span></a></li>
                <!--
                <li><a href="#abaParticipe"><span>Participe</span></a></li>
                <li><a href="#abaMeuEmaus"><span>Meu Emaús</span></a></li>
                <li><a href="#abaUltimas"><span>Últimas</span></a></li>
                -->
              </ul>
              <div id="abaPrincipal">
                  <div id="abaPrincipal_esquerda">
                      <fieldset id="proximos_cursos">
                          <legend>Próximos cursos</legend>
                          <ul>
                              <li>Brasília - 01/04/2010 a 04/04/2010</li>
                              <li>Florianópolis - 01/04/2010 a 04/04/2010</li>
                              <li>Mariana - 10/09/2010 a 14/09/2010</li>
                              <li>Bagé - 11/11/2010 a 15/11/2010</li>
                          </ul>
                      </fieldset>
                      <fieldset id="evangelho_dia">
                          <legend>Evangelho do dia</legend>
                          <label>Lc 24, 13-35</label>
                      </fieldset>
                  </div>
                  <div id="abaPrincipal_meio">
                      <fieldset id="texto_emaus">
                          <legend>O Emaús na bíblia</legend>
                          <h1>Lc 24, 13-35</h1>
                          <p>
                              <cite>
                              Nesse mesmo dia, dois discípulos caminhavam para uma aldeia chamada Emaús, distante de Jerusalém sessenta estádios.
                              Iam falando um com o outro de tudo o que se tinha passado.
                              Enquanto iam conversando e discorrendo entre si, o mesmo Jesus aproximou-se deles e caminhava com eles.
                              Mas os olhos estavam-lhes como que vendados e não o reconheceram.
                              Perguntou-lhes, então: De que estais falando pelo caminho, e por que estais tristes?
                              Um deles, chamado Cléofas, respondeu-lhe: És tu acaso o único forasteiro em Jerusalém que não sabe o que nela aconteceu estes dias?
                              Perguntou-lhes ele: Que foi? Disseram: A respeito de Jesus de Nazaré... Era um profeta poderoso em obras e palavras, diante de Deus e de todo o povo.
                              Os nossos sumos sacerdotes e os nossos magistrados o entregaram para ser condenado à morte e o crucificaram.
                              Nós esperávamos que fosse ele quem havia de restaurar Israel e agora, além de tudo isto, é hoje o terceiro dia que essas coisas sucederam.
                              É verdade que algumas mulheres dentre nós nos alarmaram. Elas foram ao sepulcro, antes do nascer do sol;
                              e não tendo achado o seu corpo, voltaram, dizendo que tiveram uma visão de anjos, os quais asseguravam que está vivo.
                              Alguns dos nossos foram ao sepulcro e acharam assim como as mulheres tinham dito, mas a ele mesmo não viram.
                              Jesus lhes disse: Ó gente sem inteligência! Como sois tardos de coração para crerdes em tudo o que anunciaram os profetas!
                              Porventura não era necessário que Cristo sofresse essas coisas e assim entrasse na sua glória?
                              E começando por Moisés, percorrendo todos os profetas, explicava-lhes o que dele se achava dito em todas as Escrituras.
                              Aproximaram-se da aldeia para onde iam e ele fez como se quisesse passar adiante.
                              Mas eles forçaram-no a parar: Fica conosco, já é tarde e já declina o dia. Entrou então com eles.
                              Aconteceu que, estando sentado conjuntamente à mesa, ele tomou o pão, abençoou-o, partiu-o e serviu-lho.
                              Então se lhes abriram os olhos e o reconheceram... mas ele desapareceu.
                              Diziam então um para o outro: Não se nos abrasava o coração, quando ele nos falava pelo caminho e nos explicava as Escrituras?
                              Levantaram-se na mesma hora e voltaram a Jerusalém. Aí acharam reunidos os Onze e os que com eles estavam.
                              Todos diziam: O Senhor ressuscitou verdadeiramente e apareceu a Simão.
                              Eles, por sua parte, contaram o que lhes havia acontecido no caminho e como o tinham reconhecido ao partir o pão.
                              </cite>
                          </p>
                      </fieldset>
                  </div>
                  <div id="abaPrincipal_direita">
                      <fieldset id="aniversariantes">
                          <legend>Aniversariantes de hoje</legend>
                          <ul>
                              <li>João Paulo</li>
                              <li>Valdênia</li>
                              <li>João Pedro</li>
                              <li>Eduardo</li>
                          </ul>
                      </fieldset>
                      <fieldset id="missas">
                          <legend>Horário de missas e confissões</legend>
                          <form method="post" id="missa" name="missa">
                              <p>
                                  <label>Paróquia:
                                  <select name="cod_paroquia">
                                      <option>Selecione...</option>
                                      <!-- BEGIN Paroquia -->
                                      <option value="{cod_paroquia}"{selecionado}>{nom_pessoa_paroquia}</option>
                                      <!-- END Paroquia -->
                                  </select>
                                  </label>
                              </p>
                              <p>
                                  <label>Dia da semana:
                                  <select name="sig_dia_semana">
                                      <option>Selecione...</option>
                                      <option value="DOM">Domingo</option>
                                      <option value="SEG">Segunda</option>
                                      <option value="TER">Terça</option>
                                      <option value="QUA">Quarta</option>
                                      <option value="QUI">Quinta</option>
                                      <option value="---">Sexta</option>
                                      <option value="SAB">Sábado</option>
                                  </select>
                                  </label>
                              </p>
                              <p>
                                  <label>Horário:
                                      <input type="text" id="hor_missa_confissao" name="hor_missa_confissao" value="{hor_missa_confissao}">
                                  </label>
                              </p>
                              <input id="login" type="submit" name="acao" value="Ok">
                          </form>
                      </fieldset>
                  </div>
              </div>
</div>

...

O trecho correspondente ao CSS é:

...

div#conteudo {
    margin-top:5em;
    display:block;
    overflow:auto;
}

div#abaPrincipal_esquerda {
    float:left;
    padding:0.1em 1em 1em 0.1em;

}

div#abaPrincipal_meio {
    text-align:justify;
    padding:0.1em 1em 1em 1em;
}

div#abaPrincipal_direita {
    float:right;
    clear:right;
    padding:0.1em 0.1em 1em 1em;
}

ul#abas {
    width:100%;
}

ul#abas li {
    float:left;
    background:url(../img/tab-right.gif)no-repeat top right;
}

ul#abas li a {
    display:block;
    padding:0 2em;
    line-height:2.5em;
    background:url(../img/tab-left.gif)no-repeat top left;
    text-decoration:none;
    color:#FFF;
}

ul#abas li a:hover {
    color:#333;
}

div#rodape {
    clear:both;
    height:2em;
    background-color:#fde1aa;
}

...

Caso precise ver o código completo está em http://emaus.sourceforge.net/

Começo até a sentir inveja dos colegas que já resolveram seus floats!! 8-D

Thiago Retondar · Janeiro 7, 2010

Cara, eu não estou entendo o resultado final que você quer...

Pode postar uma imagem de como é para ficar?

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

BDore · Janeiro 7, 2010

Cara, se você está falando do IEs4Linux, baseado no IE6, pode ser que você esteja com o double margin bug. Coloque display: inline nas div's flutuadas (esquerda e direita).

Ps.: não dá pra usar um browser melhorzinho não? O Linux acompanha as últimas versões do Firefox, do Chrome e do Opera, todos muito superiores ao IE6.

João Paulo Novais · Janeiro 9, 2010

Cara, eu não estou entendo o resultado final que você quer...

Pode postar uma imagem de como é para ficar?

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Cara, tentarei desenhar algo por aqui. A questão é que não fiz um leiaute no Photoshop, Gimp e etc, criei direto no html... ousado não? :-D

Aquilo que fiz até o momento pode ser visto em http://emaus.sourceforge.net/. O que gostaria é que o conteúdo apresentado nas abas ficasse em 3 ou 2 colunas.

Será que me fiz entender?

João Paulo Novais · Janeiro 9, 2010

Cara, se você está falando do IEs4Linux, baseado no IE6, pode ser que você esteja com o double margin bug. Coloque display: inline nas div's flutuadas (esquerda e direita).

Ps.: não dá pra usar um browser melhorzinho não? O Linux acompanha as últimas versões do Firefox, do Chrome e do Opera, todos muito superiores ao IE6.

Concordo com você!!!

Eu desenvolvo e testo no Firefox, com Firebug e Web Developer... Não consigo mais viver sem eles. :-D

A história do IEs4Linux é que não perco a mania de criticar produtos como o Internet Explorer... :-(

Obrigado pela dica, mas não funcionou...

Thiago Retondar · Janeiro 9, 2010

Acho que entendi o seu problema. É assim que deseja que fique?

Imagem Postada

Se for, faça o seguinte no HTML:

<div class="tabs-container" id="abaPrincipal">
	<div id="abaPrincipal_esquerda">
		<!-- CONTEUDO -->
	</div>
	<div id="abaPrincipal_direita">
		<!-- CONTEUDO -->
	</div>
	<div id="abaPrincipal_meio">
		<!-- CONTEUDO -->
	</div>
</div>

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

João Paulo Novais · Janeiro 9, 2010

Tiago,

Funcionou!! Muitíssimo obrigado!!

Apenas para esclarecer e para que eu aprenda, qual a lógica de colocar primeiro a coluna da esquerda, depois a da direita e por último a do meio? Pensei que o display:block pegasse na ordem que encontrasse, por isso coloquei esquerda, meio e direita... Outra coisa, qual o conteúdo que você sugere para a classe "tabs-container"?

Thiago Retondar · Janeiro 9, 2010

Eu fiz isso por que a coluna da esquerda está flutuada para à esquerda, a coluna da direita para à direita, então o elemento que sobrou fica no meio deles.

É exatamentamente o que está no link do meu post #8. :P

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Arquivado

[Resolvido] Montagem de layout

Recommended Posts

João Paulo Novais 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Paulo Novais 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Paulo Novais 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Brito 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Paulo Novais 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Paulo Novais 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

BDore 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Paulo Novais 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Paulo Novais 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Paulo Novais 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real