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

S.o.s. (css)

Discussão em 'Web Development' iniciada por nj1000, 4 de Fevereiro de 2009. (Respostas: 5; Visualizações: 635)

  1. Olá a todos!

    Estou a criar um layout, e sei que é normal haver diferenças entre diferentes browsers. Mas neste caso estou a ter problemas dentro do mesmo browser (IE), ou seja se abrir num computador está tudo bem, mas se abrir num outro o posicionamento dos menus e etc. não fica onde desejava. Alguém me pode ajudar ou explicar o que é que se está a passar? Talvez a diferença das defenições do ecrã? Desculpem mas ainda sou principiante nisto... :P

    Desde já obrigado

    Cumprimentos
     
  2. geoblast

    geoblast Power Member

    Se tiveres o site num servidor indica o url para darmos uma vista de olhos, senão, coloca aqui o css e o html da página em questão. Muito provavelmente, deve ter a ver com os posicionamentos que utilizaste.
     
  3. King_UnReal

    King_UnReal Power Member

    A versao do IE e a mesma?
     
  4. Ignoto_Deo

    Ignoto_Deo Power Member

    A partida

    À partida tem a ver com a resolução dos monitores serem diferentes
     
  5. -» HTML «-
    Código:
    <html>
    <head>
     <link rel="stylesheet" type="text/css" href="getwork.css">
     <title>:|: GET WORK - Soluções Profissionais :|:</title>
    </head>
    <body>
    <!----------------------------------------------------------------------------------------------------------------------------------->
     <!--  HEADER -->
     <div class="header">
      <img src="GW_logo.jpg" alt="Get Work" style="position: absolute; top: 5px; left: 25px;"/>
     </div>
     
    <!----------------------------------------------------------------------------------------------------------------------------------->
     
     <!-- BACKGROUND do MENU de INFORMAÇÕES -->
     <div class="back_menu_info"> </div>
     
    <?php
     // Cria o "Menu_Info"
     function show_menu_info($type=0){
    ?>
     
     <!-- MENU de INFORMAÇÕES -->
     <ul class="menu_info">
       <li width="20">|</li>
       <li><a href="?pagina">Home</a></li>
       <li width="20">|</li>
       <li><a href="?pagina=registo">Registo</a></li>
       <li width="20">|</li>
       <li><a href="?pagina=pesquisa">Pesquisa</a></li>
       <li width="20">|</li>
       <li><a href="?pagina=guestbook">Guestbook</a></li>
       <li width="20">|</li>
       <li><a href="?pagina=termos">Termos & Condições</a></li>
       <li width="20">|</li>
       <li><a href="?pagina=contactos">Contactos</a></li>
       <li width="20">|</li>
      </ul>
      
    <?php
     }
     // Mostra as Informações Dentro de Cada Opção do Menu
     function show_info($menu_info){
     
      if($menu_info == 'registo'){
    ?>
    <!----------------------------- REGISTO ---------------------------------->
     <center>
     <fieldset style="border:1px solid #27408B; padding:2px; width:50%;" class="registo">
      <legend>&nbsp&nbsp<b style="font-size: 14px; color: #FFD700;">Registo</b>&nbsp&nbsp;</legend>
     
     <form method="post" action="" name="registo">
     <table>
      <tr>
       <td align="right" style="font-size: 11px; "><b>*Nome: </b></td>
       <td><input type="text" name="registo_nome" style="width: 300px; height: 20px;"/></td>
      </tr>
      <tr>
       <td align="right" style="font-size: 11px; "><b>*E-mail: </b></td>
       <td><input type="text" name="registo_email" style="width: 300px; height: 20px;"/></td>
      </tr>
      <tr>
       <td align="right" style="font-size: 11px;"><b>*Morada: </b></td>
       <td><input type="text" name="registo_morada" style="width: 300px; height: 20px;"/></td>
      </tr>
      <tr>
       <td align="right" style="font-size: 11px;"><b>*Localidade: </b></td>
       <td><input type="text" name="registo_localidade" style="width: 200px; height: 20px;"/></td>
      </tr>
      <tr>
       <td align="right" style="font-size: 11px;"><b>*Cidade: </b></td>
       <td>
        <select>
         <option>-------------</option>
         <option value="chaves">Chaves</option>
         <option value="braga">Braga</option>
         <option value="porto">Porto</option>
         <option value="aveiro">Aveiro</option>
         <option value="coimbra">Coimbra</option>
         <option value="lisboa">Lisboa</option>
         <option value="beja">Beja</option>
         <option value="algarve">Algarve</option>
        </select>
       </td>
      </tr>
      <tr>
       <td align="right" style="font-size: 11px;"><b>Idade: </b></td>
       <td><input type="text" name="registo_cidade" style="width: 50; height: 20px;"/></td>
      </tr>
      <tr>
       <td align="right" style="font-size: 11px;"><b>Sexo: </b></td>
       <td align="left">
        <input type="radio" name="registo_masculino"/> <span style="font-size: 12px;">Masculino</span><br/>
        <input type="radio" name="registo_feminino"/> <span style="font-size: 12px;">Feminino </span>
       </td>
      </tr>
      <tr>
       <td align="right" style="font-size: 11px;"><b>*Password: </b></td>
       <td><input type="password" name="registo_password" style="width: 175px; height: 20px;"/></td>
      </tr>
      <tr>
       <td align="right" style="font-size: 11px;"><b>*Confirmar Password: </b></td>
       <td><input type="password" name="registo_confirmar_password" style="width: 175px; height: 20px;"/></td>
      </tr>
      
      <tr>
       <td></td>
       <td align="left">
        <!-- Botão "ENVIAR" --><input type="submit" name="registo_enviar" value="Enviar"/>
        <!-- Botão "APAGAR" --><input type="reset" name="registo_apagar" value="Apagar"/>
       </td>
      </tr>
     </table>
     </form>
     
     </fieldset>
     </center>
    <?php
      }
      elseif($menu_info == 'pesquisa'){
    ?>
    <!----------------------------- PESQUISA ---------------------------------->
     » FORMULÁRIO de PESQUISA
     
    <?php
      }
      
      elseif($menu_info == 'guestbook'){
    ?>
    <!----------------------------- GUESTBOOK ---------------------------------->
     <center>
     <fieldset style="border:1px solid #27408B; padding:2px; width:35%;" class="guestbook">
      <legend>&nbsp&nbsp<b style="font-size: 14px; color: #FFD700;">Guestbook</b>&nbsp&nbsp;</legend>
       <div style="height: 20px;"></div>
     <table border="0" cellpadding="0" cellspacing="2" align="center">
     <form method="post" name="" action="">
      <tr>
       <td align="right"><b style="font-size: 11px;">Nome </b><input type="text" name="guestbook_nome" style="width:250; height:23; color: 363636;"></td>
      </tr>
      <tr>
       <td align="right"><b style="font-size: 11px;">Cidade </b><input type="text" name="guestbook_Cidade" style="width:250; height:23; color: 363636;"></td>
      </tr>
      <tr>
       <td align="right"><b style="font-size: 11px;">E-mail </b><input type="text" name="guestbook_email" style="width:250;height:23; color: 363636;"></td>
      </tr>
      <!-- Espaçamento entre os DADOS e a "TEXTAREA" -->
      <tr>
       <td height="12"></td>
      </tr>
      <!-- Fim do Espaçamento -->
      <tr> 
       <td align="left" valign="top"><b><span style="font-size: 10px;"> &nbsp Mensagem</span></b><br>
       <!-- Inicia a "TEXTAREA" -->
       <textarea type="text" style="width:350; height:150; font-family: verdana, sans-serif; color: 363636;" name="guestbook_mensagem"></textarea><br/>
       <!-- Botão "ENVIAR MENSAGEM" -->
       <input type="submit" value="Enviar Mensagem" name="guestbook_enviar" style="width:100%;height:25;"></div></td>
      </tr>
     </form>
     </table>
       <div style="height: 25px;"></div>
     </fieldset>
     </center>
     
    <?php
      }
      
      elseif($menu_info == 'termos'){
    ?>
    <!----------------------------- TERMOS & CONDIÇÕES ---------------------------------->
     » TERMOS & CONDIÇÕES
     
    <?php
      }
      
      elseif($menu_info == 'contactos'){
    ?>
    <!----------------------------- CONTACTOS ---------------------------------->
     <center>
     <fieldset style="border: 1px solid #27408B; width: 20%;" class="contactos">
      <legend style="font-size: 16px; color: #FFD700;"><b> &nbsp Nuno Justo &nbsp </b></legend>
      <div style="height: 10px;"></div>
     <table>
      <tr>
       <td align="right" style="font-size: 14px; color: #09265F;"><b>Telefone:</b></td>
       <td width="5"></td>
       <td style="font-size: 17px;">22 753 34 36</td>
      </tr>
      <!-- Espaçamento -->
      <tr>
       <td height="10"></td>
      </tr>
      <!-- Fim do Espaçamento -->
      <tr>
       <td align="right" style="font-size: 14px; color: #09265F;"><b>Telemóvel:</b></td>
       <td width="5"></td>
       <td style="font-size: 17px;">91 602 77 29</td>
      </tr>
      <!-- Espaçamento -->
      <tr>
       <td height="10"></td>
      </tr>
      <!-- Fim do Espaçamento -->
      <tr>
       <td align="right" style="font-size: 14px; color: #09265F;"><b>E-mail:</b></td>
       <td width="5"></td>
       <td><a href="[EMAIL="[email protected]"]mailto:[email protected][/EMAIL]" style="text-decoration: none; font-size: 17px; color: #FFC125;">[email protected]</a></td>
      </tr>
     </table>
      <div style="height: 13px;"></div>
     </fieldset>
     </center>
     
    <?php
      }
     }
    ?>
    <!----------------------------------------------------------------------------------------------------------------------------------->
     <!-- MENU VERTICAL -->
     <ul class="menu_vert">
      <li><a href="#">Chaves</a></li>
      <li><a href="#">Braga</a></li>
      <li><a href="#">Porto</a></li>
      <li><a href="#">Aveiro</a></li>
      <li><a href="#">Coimbra</a></li>
      <li><a href="#">Lisboa</a></li>
      <li><a href="#">Beja</a></li>
      <li><a href="#">Algarve</a></li>
     </ul>
     
    <!----------------------------------------------------------------------------------------------------------------------------------->
     <!-- FORMULARIO de LOGIN -->
     <form method="post" action="" name="" class="login">
     <table>
      <tr>
       <td align="right" style="font-size: 13px; color: #0A0A0A;">E-mail </td>
       <td><input type="text" name="login_email" style="background-color: #E8E8E8;"/></td>
      </tr>
      <tr>
       <td align="right" style="font-size: 13px; color: #0A0A0A;">Password</td>
       <td><input type="password" name="login_pass" style="background-color: #E8E8E8;"/></td>
      </tr>
      <tr>
       <td></td>
       <td align="right"><!-- Botao "Entrar" --><input type="submit" name="login_entrar" value="Entrar"/><!-- Botao "Apagar" --><input type="reset" name="login_apagar" value="Apagar"></td>
      </tr>
     </table>
     </form>
     
    <!----------------------------------------------------------------------------------------------------------------------------------->
    </body>
    </html>
       
    -----------------------------------------------------------------------------------------


    -» CSS «-
    Código:
    body{
     margin: 0px, 0px, 0px, 0px;
     padding: 0px, 0px, 0px, 0px;
     border: 0px, 0px, 0px, 0px;
     background-color: #4169E1;
     color: #0A0A0A;
     font-family: verdana, sans-serif;
     font-size: 11px;
    }
    /***************************************************************************/
    /* Background-Header */
    .header{
     width: 100%;
     height: 155px;
     background-color: white;
     border-bottom: 2px solid #F0D52D;
    }
    /***************************************************************************/
    /*Background Menu Informações*/
    .back_menu_info{
     position: absolute;
     top: 165px;
     left: 0px;
     width: 100%;
     height: 20px;
     border-top: 2px solid #F0D52D;
     border-bottom: 2px solid #F0D52D;
     background-color: white;
    }
    /*Menu de Informações*/
    .menu_info{
     position: absolute;
     top: 168px;
     left: 725px;
     color: #0A0A0A;
    }
    .menu_info li{
     display: inline;
    }
    .menu_info li a{
     text-decoration: none;
     font-weight: bold;
    }
    .menu_info li a:hover{
     color: #2F4F4F;
    }
    .menu_info li a:visited{
     color: #4169E1;
    }
    /***************************************************************************/
    /* Menu Vertical */
    .menu_vert{
     position: absolute;
     top: 400px;
     left: -15px;
     width: 125px;
     height: 19px;
     font-size: 14px;
    }
    .menu_vert li a{
     text-decoration: none;
     width: 125px;
     height: 19px;
     margin-top: 4px;
     padding-left: 8px;
     border-left: 6px double #4682F4;
     border-right: 7px solid #4682F4;
     background-color: #4876FF;
     color: #0A0A0A;
    }
    .menu_vert li a:hover{
     border-right: 7px solid #4682F4;
     border-left: 6px double #54FF9F;
    }
    .menu_vert li a:active{
     color: #1C1C1C;
     border-right: 7px solid #54FF9F;
     border-left: 6px double #4682F4;
    }
    /***************************************************************************/
    /* LOGIN */
    .login{
     position: absolute;
     top: 35px;
     left: 1025px;
    }
    /***************************************************************************/
    /* GUESTBOOK */
    .guestbook{
     position: absolute;
     top: 240px;
     left: 775px;
    }
    /***************************************************************************/
    /* CONTACTOS */
    .contactos{
     position: absolute;
     top: 300px;
     left: 700px;
    }
    /***************************************************************************/
    /* REGISTO */
    .registo{
     position: absolute;
     top: 240px;
     left: 575px;
    }
       
    -----------------------------------------------------------------------------------------

    Este é o HTML e o CSS. ;)


    Sim...é a mesma versão do versão do IE.

    E se o problema for a resuloção do ecrã há alguma forma de resolver isso?

    Obrigado a todos

    Cumprimentos
     
    Última edição pelo moderador: 5 de Fevereiro de 2009
  6. dando uma vista de olhos rápida ao teu código, o posicionamento absoluto que utilizas é um problema, visto que é calculado em relação à distância da "borda" do browser, qualquer redimensionamento da janela vai afectar automaticamente o posicionamento dos elementos.
    No meu ver existem 2 opções, a utilização de uma div main, colocando o posicionamento absoluto em relação a essa DIV e nao browser em si e a melhor opção utilizares posicionamento relativo em vez de absoluto.
     

Partilhar esta Página