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

Incompatibilidade Firefox e IE (Ver Primeiro e Segundo Post)

Discussão em 'Web Development' iniciada por Ayato, 15 de Fevereiro de 2009. (Respostas: 2; Visualizações: 1355)

  1. Ayato

    Ayato Power Member

    Olá!

    Estava agora a tratar de arranjar o site, pouco a pouco. E tentei dividir aquilo a que chamo "Navigation Bar" em 5 (em CSS), porque vai 5 temas: "Home", "GIZ", "Escola", "Contactos" e "Ano Lectivo 2008/2009".
    Os primeiros quatro temas vão ser ser "misturados" com JavaScript para que quando "mouseon" apareçam «submenus» clicáveis.

    Voltando à minha dúvida, ao fazer a divisão... tive o resultado que vocês podem observar no site:
    http://www.projectogiz.com
    Não era aquele o meu objectivo... Tentei o elemento "float:left" mas não ajudou... Se alguém me puder ajudar... Vou colocar os códigos aqui.

    P.S.: O que acham do "logótipo", acham melhor com sombras, ou dar uma cor a cada sombra?


    OS CÓDIGOS


    index.html
    layout.css
     
    Última edição: 16 de Fevereiro de 2009
  2. Ayato

    Ayato Power Member

    Penso ter dado uma solução temporária (mal-estruturada mas com o resultado pretendido) ao site...

    O que fiz foi o seguinte:
    -Dei a todas as imagens excepto à do "Bem-vindos..." uma posição ABSOLUTA;
    -Criei uma nova imagem para substituir a do "Bem-vindos..." que ficava cortada... e colocada muito acima...;
    -A nova imagem do "Bem-vindos..." ficou com mais 35 pixéis de altura na parte de cima, como são brancos e ficam debaixo dos menus ninguém se apercebe...


    Isto é tudo uma solução temporária... Continua a precisar da vossa ajuda...

    Fui verificar a compatibilidade com o Internet Explorer e vi que havia problemas.... Aqui ficam as comparações com Mozilla Firefox e Internet Explorer...

    http://img242.imageshack.us/my.php?image=damnitne3.png

    O código HTML manteve-se e alterei o código CSS para:

     
    Última edição: 16 de Fevereiro de 2009
  3. unsilent

    unsilent Power Member

    Esse off-set tem a ver com a posição absolute das divs, sempre que puderes evita isso.
    É dificil dizer-te como alterar isso portanto:
    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>projecto giz</title>
    
    <style type="text/css">
    <!--
    body {
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }
    .header {
        background-color: #CCCCCC;
        width: 1000px;
        height: 175px;
        clear:both;
        margin-top:0;
        margin:auto;
    }
    .logo{
        width: 175px;
        height: 175px;
        position:relative;
        float:left;
    }
    .navbar{
    height:35px;
    width:825px;
    float:right;
    position:relative;
    }
    .navbar ul{
        margin: 0;
        padding: 0;
        padding-left:0px;
        list-style-type: none;
        font-family: Arial;
        font-size: 12px;
        font-style: normal;
        font-weight: bold;
    }
    
    .navbar li{
    display: inline;
    margin: 0;
    }
    
    .navbar li a{
        float: left;
        display: block;
        text-decoration: none;
        color:#FFFFFF;
        width:100px;
        height:35px;
        text-align:center;
        padding-right: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
        padding-top: 3px;
    }
    
    .banner{
    float:right;
    width:825px;
    height:140px;
    }
    .left_column {
        width: 175px;
        float: left;
        background-color: #FFFF99;
    }
    .right_column {
        height: auto;
        float: right;
        background-color: #FFFFCC;
        width: 825px;
    }
    .center_column {
        height: 250px;
        float: center;
        background-color: #FFFFCC;
        width: auto;
    }
    .footer {
        height: 30px;
        background-color: #666666;
        clear: both;
    }
    .wrapper {
        width: 1000px;
        clear:both;
        background-color: #666666;
        margin-top:0;
        margin:auto;
    
    }
    -->
    </style>
    </head>
    <body>
    <div class="header">
      <div class="logo"></div>
        <div class="navbar">
        <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">GIZ</a></li>
        <li><a href="#">ESCOLA</a></li>
        <li><a href="#">CONTACTOS</a></li>
        <li><a href="#">ANO LECTIVO 08/09</a></li>
        </ul>
        </div>
         <div class="banner"></div>
    </div>
    
        <div class="wrapper">
        <div class="left_column">
            <p>menu (p/ exemplo) </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;    </p>
        </div>
    
        <div class="right_column">
            <p>podes por aqui o conteudo.... </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;    </p>
        </div>
        
        <div class="footer">
            espero que ajude... </div>
        </div>
    </body>
    </html>
    
    
    Vê se isto assim te safa, a longo prazo acho que é preferivel teres o código assim estruturado.
     

Partilhar esta Página