[XHTML\CSS] 3 Column layout fixed width - Fout in Firefox - Softwareontwikkeling

woensdag 17 mei 2006 19:52

Acties:

-klik-

Topicstarter

Ben nog redelijk onbekend met <div>-jes en wil een pagina maken met een drie kolommen layout:

HEADER
K1|K2|K3
FOOTER

De pagina moet gecentreerd worden, en de kolommen hebben een fixed width.
De HEADER, K1, K2 en K3 ,div<-jes hebben images als achtergrond die naadloos aan elkaar
moeten passen.

In IE ziet het er uit zoals bedoeld, maar in Firefox totaal niet. Rare is dat ik het gemaakt naar aanleiding van een tutorial die uitgaat van Firefox.

Kan iemand me helpen?

CSS-code:

code:

    body {
        text-align:center;
        background-color:Black;
        }
    
    #frame {
        width:800px;
        margin-right:auto;
        margin-left:auto;
        margin-top:0px;
        padding:0px;
        text-align:left;
        }
        
    #contentleft
{
        width:170px;
        height:486px;
        padding:0px;
        float:left;
        background-attachment: fixed;
        background-image: url(images/contentleft.jpg);
        background-repeat: no-repeat;
}
    
    #contentcenter {
        width:460px;
        height:486px;
        padding:0px;
        float:left;
        background-attachment: fixed;
        background-image: url(images/contentcenter.jpg);
        background-repeat: no-repeat;
        }
    
    #contentright {
        width:170px;
        height:486px;
        padding:0px;
        float:left;
        background-attachment: fixed;
        background-image: url(images/contentright.jpg);
        background-repeat: no-repeat;

        }
    
    #contentheader 
    {
        height:114px;
        background-attachment: fixed;
        background-image: url(images/contentheader.jpg);
        background-repeat: no-repeat;
        }
    
    #contentfooter 
    {
        height:25px;
        float:left;
        text-align:center;
        }       
    p,h1,pre {
        margin:0px 10px 10px 10px;
        }
        
    h1 {
        font-size:14px;
        padding-top:10px;
        }
        
    #contentheader h1 {
        font-size:14px;
        padding:10px;
        margin:0px;
        }
    
    #contentright p { font-size:10px}

GamiQ, de game notes app met game maps!

woensdag 17 mei 2006 19:57

Acties: