1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

ajuda alinhamento de layers

Discussão em 'Web Development' iniciada por ThinkBrunus, 29 de Agosto de 2007. (Respostas: 4; Visualizações: 694)

  1. ThinkBrunus

    ThinkBrunus Power Member

    Boas!
    Já aqui coloquei um tópico sobre este assunto e tenho pesquisado e estudado sobre css, e mesmo assim não estou a conseguir resolver o problema...
    O problema é no alinhamento da layer, visto q no firefox ela fica na posição certa e no IE fica um pouco desviado....mas ainda pior é qdo minimizo a janela a layers fica todar fora do contexto em qualquer um dos browsers.

    o site está em http://vibeltaxis.pt.vu

    Aqui fica o código css:

    body{
    margin:0px;
    position:relative;
    }
    #divGeral{
    position:static;
    }
    #DivBandeiras{
    position:absolute;
    margin:0px;
    _margin:0px;
    padding:0px;
    _padding:0px;
    left:920px;
    top:20px;
    z-index:1;
    }
    #divTexto {
    position:absolute;
    padding:10px 50px 50px 20px;
    float:left;
    left:371px;
    top:182px;
    width:519px;
    z-index:1;
    }

    Agradeço qualquer dica, pois já nem sei para onde me voltar...

    Cumprimentos
     
  2. K0mA

    K0mA Power Member

    Não me leves a mal mas não uses "FRAMES", por duas ou três razões:

    1-consegues obter praticamente o mesmo efeito apenas com DIVs
    2-É mais dificil alguém te ajudar pois com FRAMES + CSS as coisas não ficam tão claras
    3-Os motores de pesquisa "não gostam" de FAMES

    Conclusão: começa por teres 5 DIVs:

    1 - um div para meteres os outros lá dentro
    2-um div para o cabeçalho
    3-um div para o menu lateral esquerdo
    4-um div para o conteúdo
    5-um div para o rodapé

    Em CSS metes todas as margens e paddings = 0 e testas a ver se bate bem no IE e no Firefox, depois trabalhas a partir desta base...

    Deixo-te 3 ligações a sitios onde podes usar o código que lá está e adaptares às tuas próprias necessidades:

    http://layouts.ironmyers.com/
    http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/
    http://www.maxdesign.com.au/presentation/page_layouts/

    K0ma
     
    Última edição: 30 de Agosto de 2007
  3. ThinkBrunus

    ThinkBrunus Power Member

    Boas!
    Antes de mais quero agradecer as suas dicas. estudar a situação, mas quero-lhe dizer q este site não tem frames.
    Foi feito o layout num editor de imagem e depois exportado para html, e estou a utilizar 2 layer, para o posicionamento das bandeiras e outra para o texto.
    De qualquer forma já consegui mais alguns progressos e vou pesquisas os links passados de forma a continuar a evoluir.

    De qualquer maneira deixo o código actualizado para alguma dica:

    HTML:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Vibeltaxis</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <meta name="Author" content="designisflowing">
    <meta name="copyright" content="23/08/2007">
    <meta name="keywords" content="taxis, algarve, transfers, golf, tours, turismo">
    <meta name="description" content="Empresas de transporte sediada no Algarve">
    <link rel="STYLESHEET" type="text/css" href="vibel.css">
    </head>
    <body>
    <!-- ImageReady Slices (exporting vibeltaxis.ai) -->
    <div id="divGeral">
    <div id="DivBandeiras">
    <table border="0">
    <tr>
    <td><div align="center"><img src="images/bandeiras/flag_por.jpg" alt="" width="25" height="16"></div></td>
    <td><div align="center"><img src="images/bandeiras/flag_en.jpg" alt="" width="25" height="16"></div></td>
    <td><div align="center"><img src="images/bandeiras/flag_ger.jpg" alt="" width="25" height="16"></div></td>
    </tr>
    </table></div>
    <div id="divTexto">
    <h1>Bem vindo!</h1>
    <p>Sedeada desde 1995 no sudoeste algarvio, esta &eacute; uma empresa de transportes que tem como objectivo prestar um bom servi&ccedil;o focando a <strong><em>Seguran&ccedil;a</em></strong> e o <strong><em>Conforto</em></strong>.<br>
    <br>
    Com veículos até <strong>seis lugares</strong> é ideal para golfistas. Mas também, para
    famílias com crianças, utilizando em cada caso a solução indicada para o transporte das crianças em segurança: <strong>baby seat</strong>, <strong>car seat</strong> e<strong> booster</strong>.<br>
    <br>
    Com uma óptima relação Preço/Qualidade, a Vibeltaxis oferece um variado número de serviços assim como<strong>: TRANSFERS DE / PARA AEROPORTO, GOLF, TRANSFERS</strong>,<strong> TOURS/VISITAS GUIADAS </strong>e serviço de <strong>TAXI.</strong><br>
    <br>
    Obrigado pela sua preferência e até breve.</p>
    </div>
    <table width="1019" height="603" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td rowspan="33">
    <img src="images/index_01.png" width="1" height="602" alt=""></td>
    <td colspan="2" rowspan="5" align="left" valign="top"><img src="images/index_02.png" width="72" height="184" alt=""></td>
    <td colspan="2" align="left" valign="top">
    <img src="images/index_03.png" width="145" height="69" alt=""></td>
    <td colspan="3" rowspan="2" align="left" valign="top">
    <img src="images/index_04.png" width="105" height="117" alt=""></td>
    <td colspan="2" rowspan="2" align="left" valign="top">
    <img src="images/index_05.png" width="109" height="117" alt=""></td>
    <td colspan="4" rowspan="2" align="left" valign="top">
    <img src="images/index_06.png" width="157" height="117" alt=""></td>
    <td colspan="4" rowspan="2" align="left" valign="top"><img src="images/index_07.png" width="172" height="117" alt=""></td>
    <td colspan="3" rowspan="3" align="left" valign="top">
    <img src="images/index_08.png" width="176" height="118" alt=""></td>
    <td rowspan="3" align="left" valign="top">
    <div><img src="images/index_09.png" width="80" height="118" alt=""></div></td>
    <td rowspan="33">
    <img src="images/index_10.png" width="1" height="602" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="69" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2" align="left" valign="top">
    <img src="images/index_11.png" width="145" height="49" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="48" alt=""></td>
    </tr>
    <tr>
    <td colspan="4" rowspan="4" align="left" valign="top">
    <img src="images/index_12.png" width="141" height="72" alt=""></td>
    <td colspan="4" rowspan="5" align="left" valign="top">
    <img src="images/index_13.png" width="187" height="73" alt=""></td>
    <td colspan="5" rowspan="5" align="left" valign="top">
    <img src="images/index_14.png" width="215" height="73" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" align="left" valign="top">
    <img src="images/index_15.png" width="145" height="65" alt=""></td>
    <td colspan="2" rowspan="5" align="left" valign="top">
    <img src="images/index_16.png" width="146" height="73" alt=""></td>
    <td colspan="2" rowspan="5" align="left" valign="top">
    <img src="images/index_17.png" width="110" height="73" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="65" alt=""></td>
    </tr>
    <tr>
    <td rowspan="9" align="left" valign="top">
    <img src="images/index_18.png" width="26" height="95" alt=""></td>
    <td rowspan="5" align="left" valign="top"><img src="images/index_19.png" width="119" height="33" alt="A empresa"></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td rowspan="8" align="left" valign="top">
    <img src="images/index_20.png" width="59" height="94" alt=""></td>
    <td rowspan="8" align="left" valign="top">
    <img src="images/index_21.png" width="13" height="94" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="5" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="19" align="left" valign="top">
    <img src="images/index_22.png" width="48" height="256" alt=""></td>
    <td colspan="2" rowspan="12" align="left" valign="top">
    <img src="images/index_23.png" width="93" height="139" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="4" rowspan="10" align="left" valign="top">
    <img src="images/index_24.png" width="187" height="136" alt=""></td>
    <td colspan="5" rowspan="10" align="left" valign="top">
    <img src="images/index_25.png" width="215" height="136" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="9" align="left" valign="top">
    <img src="images/index_26.png" width="146" height="135" alt=""></td>
    <td colspan="2" rowspan="3" align="left" valign="top">
    <img src="images/index_27.png" width="110" height="60" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="25" alt=""></td>
    </tr>
    <tr>
    <td align="left" valign="top">
    <img src="images/index_28.png" width="119" height="15" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="15" alt=""></td>
    </tr>
    <tr>
    <td rowspan="2" align="left" valign="top">
    <img src="images/index_29.png" width="119" height="32" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="4" align="left" valign="top">
    <img src="images/index_30.png" width="110" height="67" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="12" alt=""></td>
    </tr>
    <tr>
    <td align="left" valign="top">
    <img src="images/index_31.png" width="119" height="15" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="15" alt=""></td>
    </tr>
    <tr>
    <td rowspan="7" align="left" valign="top">
    <img src="images/index_32.png" width="59" height="94" alt=""></td>
    <td colspan="2" rowspan="7" align="left" valign="top">
    <img src="images/index_33.png" width="39" height="94" alt=""></td>
    <td align="left" valign="top">
    <img src="images/index_34.png" width="119" height="32" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="32" alt=""></td>
    </tr>
    <tr>
    <td rowspan="2" align="left" valign="top">
    <img src="images/index_35.png" width="119" height="14" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="6" align="left" valign="top">
    <img src="images/index_36.png" width="110" height="60" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="6" alt=""></td>
    </tr>
    <tr>
    <td rowspan="3" align="left" valign="top">
    <img src="images/index_37.png" width="119" height="33" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
    <td colspan="3" rowspan="8" align="left" valign="top">
    <img src="images/index_38.png" width="142" height="119" alt=""></td>
    <td colspan="5" rowspan="9" align="left" valign="top">
    <img src="images/index_39.png" width="183" height="120" alt=""></td>
    <td colspan="2" rowspan="8" align="left" valign="top">
    <img src="images/index_40.png" width="83" height="119" alt=""></td>
    <td rowspan="7" align="left" valign="top">
    <img src="images/index_41.png" width="140" height="118" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="7" align="left" valign="top">
    <img src="images/index_42.png" width="93" height="117" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="29" alt=""></td>
    </tr>
    <tr>
    <td align="left" valign="top">
    <img src="images/index_43.png" width="119" height="15" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="15" alt=""></td>
    </tr>
    <tr>
    <td rowspan="8" align="left" valign="top">
    <img src="images/index_44.png" width="59" height="107" alt=""></td>
    <td colspan="2" rowspan="8" align="left" valign="top">
    <img src="images/index_45.png" width="39" height="107" alt=""></td>
    <td rowspan="2" align="left" valign="top">
    <img src="images/index_46.png" width="119" height="31" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="6" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="6" align="left" valign="top">
    <img src="images/index_47.png" width="110" height="71" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="25" alt=""></td>
    </tr>
    <tr>
    <td align="left" valign="top">
    <img src="images/index_48.png" width="119" height="15" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="15" alt=""></td>
    </tr>
    <tr>
    <td rowspan="4" align="left" valign="top">
    <img src="images/index_49.png" width="119" height="31" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="26" alt=""></td>
    </tr>
    <tr>
    <td rowspan="5" align="left" valign="top">
    <img src="images/index_50.png" width="140" height="75" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="6" rowspan="5" align="left" valign="top">
    <img src="images/index_51.png" width="250" height="76" alt=""></td>
    <td rowspan="5" align="left" valign="top">
    <img src="images/index_52.png" width="33" height="76" alt=""></td>
    <td colspan="2" rowspan="4" align="left" valign="top">
    <img src="images/index_53.png" width="83" height="74" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td colspan="3" rowspan="4" align="left" valign="top"><img src="images/index_54.png" alt="" width="151" height="75" border="0"></td>
    <td colspan="2" rowspan="3" align="left" valign="top">
    <img src="images/index_55.png" alt="" width="32" height="73" border="0" usemap="#Map2"></td>
    <td>
    <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
    <td rowspan="3" align="left" valign="top">
    <img src="images/index_56.png" width="119" height="72" alt=""></td>
    <td colspan="2" rowspan="4" align="left" valign="top">
    <img src="images/index_57.png" width="110" height="77" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="30" alt=""></td>
    </tr>
    <tr>
    <td rowspan="4" align="left" valign="top">
    <img src="images/index_58.png" width="59" height="122" alt=""></td>
    <td colspan="2" rowspan="4" align="left" valign="top">
    <img src="images/index_59.png" width="39" height="122" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="40" alt=""></td>
    </tr>
    <tr>
    <td rowspan="4" align="left" valign="top">
    <img src="images/index_60.png" width="1" height="83" alt=""></td>
    <td colspan="3" rowspan="3" align="left" valign="top">
    <img src="images/index_61.png" width="114" height="82" alt=""></td>
    <td rowspan="3" align="left" valign="top">
    <img src="images/index_62.png" width="140" height="82" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2" align="left" valign="top">
    <img src="images/index_63.png" width="163" height="80" alt=""></td>
    <td colspan="5" rowspan="2" align="left" valign="top">
    <img src="images/index_64.png" width="206" height="80" alt=""></td>
    <td colspan="4" rowspan="3" align="left" valign="top">
    <img src="images/index_65.png" width="184" height="81" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="5" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2" align="left" valign="top">
    <img src="images/index_66.png" width="110" height="76" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="75" alt=""></td>
    </tr>
    <tr>
    <td colspan="10">
    <img src="images/index_67.png" width="467" height="1" alt=""></td>
    <td colspan="4">
    <img src="images/index_68.png" width="254" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="59" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="13" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="26" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="119" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="44" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="57" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="36" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="73" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="36" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="33" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="45" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="43" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="63" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="31" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="77" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="6" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="140" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="30" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="80" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td></td>
    </tr>
    </table>
    <!-- End ImageReady Slices -->
    </div>
    </body>
    </html>


    CSS:

    @charset "utf-8";
    /* CSS Document */
    body{
    margin:0px;
    position:relative;
    }

    #divGeral{
    position:static;
    }

    #DivBandeiras{
    position:absolute;
    margin:0px;
    padding:0px;
    left:74%;
    top:20px;
    z-index:1;
    }

    #divTexto{
    position:absolute;
    float:left;
    left:30%;
    top:29%;/*FIREFOX*/
    *top:30%;
    width:489px;
    z-index:1;
    }
    H1{
    font-family: Arial, sans-serif;
    font-size:14px;
    font-weight:bold;
    }

    p{
    text-align:justify;
    font-family:Times, serif;
    font-size:14px;
    font-weight:normal;
    font-variant:normal;
    line-height:18px;
    }

    Cumprimentos
     
  4. naoliveira

    naoliveira Power Member

    Oi ThinkBrunus,

    este é o código da tua página principal:

    <head>
    <title>Vibeltaxis</title>
    <meta name="description" content="Vibeltaxis">
    <meta name="keywords" content="vibeltaxis">
    </head>

    <frameset framespacing="0" frameborder="no" border="0" rows="100%">
    <frame name="ptvu_main" noresize framespacing="0" frameborder="no" border="0" src="http://vibeltaxis.brunus.coresp.com">
    </frameset>

    <noframes>
    <h1 align=center>Vibeltaxis</h1>
    </noframes>
    </frameset>

    como podes ver tens frames, sem saberes:)

    já repareaste na quantidade de código que a tua página tem? Se fizeres como disse o K0mA o
    código da tua página vai ser para aí 10x menos. Experimenta.

    Nuno
     
  5. ThinkBrunus

    ThinkBrunus Power Member

Partilhar esta Página