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

Problema fundo css

Discussão em 'Web Development' iniciada por claudiuh, 10 de Junho de 2009. (Respostas: 14; Visualizações: 863)

  1. claudiuh

    claudiuh Power Member

    #1 10 de Junho de 2009
    Boas pessoal,

    Eu estou com um problema numa template que tou a desenvolver.

    Está aqui a screen do site no firefox: http://i40.tinypic.com/10hvm6u.png

    No ie o fundo branco vai até ao fim da página mas no firefox não.

    HTML:
    Código:
    <html>
<head>
    <link type="text/css" rel="stylesheet" href="css.css">
    <script type="text/javascript">
        function mouseOver()
        {
        document.getElementById("b1").src="images/home2.png"
        }
        function mouseOut()
        {
        document.getElementById("b1").src="images/home.png"
        }

        function mouseOver2()
        {
        document.getElementById("b2").src="images/noticias2.png"
        }
        function mouseOut2()
        {
        document.getElementById("b2").src="images/noticias.png"
        }

        function mouseOver3()
        {
        document.getElementById("b3").src="images/forum2.png"
        }
        function mouseOut3()
        {
        document.getElementById("b3").src="images/forum.png"
        }

        function mouseOver4()
        {
        document.getElementById("b4").src="images/contactos2.png"
        }
        function mouseOut4()
        {
        document.getElementById("b4").src="images/contactos.png"
        }
    </script>
</head>

<body>

<div class = "wraper">

    <div class = "header">
        HOME &nbsp;&nbsp; CLAUDIU &nbsp;&nbsp; TESTE &nbsp;&nbsp; YOUTUBE &nbsp;&nbsp; GOOGLE &nbsp;&nbsp; OLA
    </div>
    
    <div class = "header2">
        <font align = "left"></font>
    </div>
    
    <div class = "banner">
        <font align = "left"></font>
    </div>
    
    <div class = "menu">
        <img onmouseover="mouseOver()" onmouseout="mouseOut()"  src="images/home.png" id="b1" />
        <img onmouseover="mouseOver2()" onmouseout="mouseOut2()" src="images/noticias.png" id="b2" />
        <img onmouseover="mouseOver3()" onmouseout="mouseOut3()" src="images/forum.png" id="b3" />
        <img onmouseover="mouseOver4()" onmouseout="mouseOut4()" src="images/contactos.png" id="b4" />
    </div>
    
    <div class="content">
        claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>
    </div>
</div>

</body>
</html>
    CSS

    Código:
    body{
background-image:url('images/bg.png');
text-align:center;
margin:0px;
color:white;
height:100%;
}

.header {
    width: 800px;
    height:20px;
    background-image:url('images/header.png');
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    color:black;
    font-family:Arial;
    font-size:12;
}

.header2 {
    width: 800px;
    height:30px;
    background-image:url('images/header2.png');
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
}

.banner {
    width: 800px;
    height:150px;
    background-image:url('images/banner.png');
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
}

.menu {
    width: 800px;
    height:50px;
    background-image:url('images/menu.png');
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
}

.content{
    height:100%;
    margin:20px;
    color:black;
}

.wraper {
    width: 800px;
    height:100%;
    background-image:url('images/wraper.png');
    background-repeat:repeat-y;
    margin-left:auto;
    margin-right:auto;
}
    Alguém tem alguma solução?
     
    Última edição: 11 de Junho de 2009
  2. hYpe

    hYpe [email protected] Member

    #2 11 de Junho de 2009
    Porque o "position: absolute" no container?

    Experimenta tirar isso.. De qq modo, se tiveres isso online deixa o link que é mais fácil de perceber o q se passa.
     
  3. claudiuh

    claudiuh Power Member

    #3 11 de Junho de 2009
    isso não tá lá a fazer nada mas não é esse o problema. E não o tenho online.
     
  4. hYpe

    hYpe [email protected] Member

    #4 11 de Junho de 2009
    Tava aqui a tentar simular o teu site, mas não tenho as imagens, portanto não posso ajudar mais.

    Boa sorte com isso.
     
  5. claudiuh

    claudiuh Power Member

    #5 11 de Junho de 2009
    Vou tentar por o site online. Depois posto aqui o link.
     
  6. claudiuh

    claudiuh Power Member

    #6 11 de Junho de 2009
  7. playit_faster

    playit_faster

    #7 11 de Junho de 2009
    Tenta por

    height:100%;

    no teu
    .content




    .content
    {
    position:absolute;
    margin:20px;
    height:100%;
    }
     
  8. claudiuh

    claudiuh Power Member

    #8 11 de Junho de 2009
    Já tinha feito isso e não deu.
     
  9. hYpe

    hYpe [email protected] Member

    #9 11 de Junho de 2009
    Tira o height: 100% do body e do wraper.

    EDIT:

    Em relação aos menús, tem outra duas opções bastante mais fáceis.

    Uma delas é usar imagens em efeito roll over » http://www.htmlcodetutorial.com/images/images_famsupp_59.html

    A outra é uniformizares o nome das tuas imagens de menu para "op1on", "op2on"... etc. e "op1off", "op2off"... etc

    Assim só precisavas de uma função de mouseOver que seria assim:

    PHP:
    function mouseOver(i)
            {
                document.getElementById("b"+i).src="images/op" + i + "on.png"
                }
            function     mouseOut(i)
            {
                document.getElementById("b"+i).src="images/op" + i + "off.png"
                }
    E em vez de teres isto:
    PHP:
    <div class = "menu">
            <    img onmouseover="mouseOver()" onmouseout="mouseOut()"  src="images/home.png" id="b1" />
            <    img onmouseover="mouseOver2()" onmouseout="mouseOut2()" src="images/noticias.png" id="b2" />
            <    img onmouseover="mouseOver3()" onmouseout="mouseOut3()" src="images/forum.png" id="b3" />
            <    img onmouseover="mouseOver4()" onmouseout="mouseOut4()" src="images/contactos.png" id="b4" />
        </    div>
    Passavas a ter isto:
    PHP:
    <div class = "menu">
            <    img onmouseover="mouseOver('1')" onmouseout="mouseOut('1')"  src="images/home.png" id="b1" />
            <    img onmouseover="mouseOver('2')" onmouseout="mouseOut('2')" src="images/noticias.png" id="b2" />
            <    img onmouseover="mouseOver('3')" onmouseout="mouseOut('3')" src="images/forum.png" id="b3" />
            <    img onmouseover="mouseOver('4')" onmouseout="mouseOut('4')" src="images/contactos.png" id="b4" />
        </    div>
     
    Última edição: 11 de Junho de 2009
  10. claudiuh

    claudiuh Power Member

    #10 11 de Junho de 2009
    Já tirei. Tá melhor mas ainda não está como quero. Já modifiquei no site online.
     
  11. hYpe

    hYpe [email protected] Member

    #11 11 de Junho de 2009
    Queres q aquela barra cinzenta embaixo desapareça, e' isso?
     
  12. claudiuh

    claudiuh Power Member

    #12 11 de Junho de 2009
    Sim. Basicamente é isso...
     
  13. hYpe

    hYpe [email protected] Member

    #13 11 de Junho de 2009
    Oki, tira o height: 100% do content e põe margin-bottom: 0px; .
     
  14. claudiuh

    claudiuh Power Member

    #14 11 de Junho de 2009
    hYpe já está. Muito obrigado pela ajuda. ;)
     
  15. hYpe

    hYpe [email protected] Member

    #15 11 de Junho de 2009
    De nada.. estamos aqui é para ajudar.

    Qualquer dúvida apita, que eu ou outro membro te ajudam de certeza!

    Boa sorte com a construção do site.
     

Partilhar esta Página