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: 795)

  1. claudiuh

    claudiuh Power Member

    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

    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

    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

    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

    Vou tentar por o site online. Depois posto aqui o link.
     
  6. Tenta por

    height:100%;

    no teu
    .content




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

    claudiuh Power Member

    Já tinha feito isso e não deu.
     
  8. hYpe

    hYpe [email protected] Member

    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" "on.png"
            
    }
            function 
    mouseOut(i)
            {
            
    document.getElementById("b"+i).src="images/op" "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
  9. claudiuh

    claudiuh Power Member

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

    hYpe [email protected] Member

    Queres q aquela barra cinzenta embaixo desapareça, e' isso?
     
  11. claudiuh

    claudiuh Power Member

    Sim. Basicamente é isso...
     
  12. hYpe

    hYpe [email protected] Member

    Oki, tira o height: 100% do content e põe margin-bottom: 0px; .
     
  13. claudiuh

    claudiuh Power Member

    hYpe já está. Muito obrigado pela ajuda. ;)
     
  14. hYpe

    hYpe [email protected] Member

    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