Avatar billede lund_dk Praktikant
11. juni 2006 - 12:48 Der er 4 kommentarer og
1 løsning

Sideopbygning med CSS - lidt problemer

Prøv at se denne adresse i firefox,baggrunden følger ikke med mine menuer, det gør den i IE

Hvordan løser jeg dette?

link: http://www.referencer.lund.dk/cphbn/
Avatar billede lund_dk Praktikant
11. juni 2006 - 12:49 #1
Kildekoden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>CPHBN.DK</title>
<style type="text/css">
    body {
    margin: 0px 0px 0px 0px;
    text-align: center;
    background: url('images/background.jpg');
    background-repeat: repeat-x;
    background-position: top;
    background-color: #5C7C8E;
    font-family:Verdana;
    font-size:11px;
    color:#5C7C8E;
}


#content {
    background-color:#506F83;
    width: 850px;
    margin:0px auto;
    }

#content2 {
    background-color:#506F83;
    width: 830px;
    margin:0px auto;
    }

#contentbottom {
    background-image:url('images/contentbottom.jpg');
    width: 850px;
    height:24px;
    margin:0px auto;
}

   
#logotop{
    background-image:url('images/topimage.jpg');
    height:200px;
    width:830px;

}

#topmenu{
    background-color:#3E5F74;
    height:30px;
    color:white;
    font-weight:bold;
    width:830px;
    font-size:16px;
    padding-top:5px;

}


    #leftCol{
    overflow: hidden;
    float:left;
    width:150px;
    background-color:silver;
    text-align:left;
    margin-top:0;
    margin-right:10px;
    position:relative;
}

#contentCol{
    float:left;
    display:block;
    width:510px;
    background-color:white;
    text-align:center;
    margin-top:0px;
    border-left:0px solid #EBEBEB;
}

#rightCol{
    overflow: hidden;
    float:right;
    width:150px;
    background-color:silver;
    position:relative
}



</style>
</head>

<body>

<div id="content">
<div id="content2">

<div id="logotop"><img src="images/toplogo.gif" height="200" width="830"/></div>
<div id="topmenu">Jalla</div>

<!-- menu left -->
<div id="leftCol">1<br/><br/><br/><br/><br/><br/><br/></div>
<!-- /menu left -->

<!-- main -->
<div id="contentCol">2<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
<!-- /main -->


<!-- menu right  -->
<div id="rightCol">3<br/><br/><br/></div>
<!-- /menu right -->

<br/><br/>


</div>
<div id="contentbottom">...</div>
</div>
</body>

</html>
Avatar billede mclemens Nybegynder
11. juni 2006 - 12:59 #2
Tror du skal have clearet dine float's ... prøv denne:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>CPHBN.DK</title>
<style type="text/css">
    body {
    margin: 0px 0px 0px 0px;
    text-align: center;
    background: url('images/background.jpg');
    background-repeat: repeat-x;
    background-position: top;
    background-color: #5C7C8E;
    font-family:Verdana;
    font-size:11px;
    color:#5C7C8E;
}


#content {
    background-color:#506F83;
    width: 850px;
    margin:0px auto;
    }

#content2 {
    background-color:#506F83;
    width: 830px;
    margin:0px auto;
    }

#contentbottom {
    background-image:url('images/contentbottom.jpg');
    width: 850px;
    height:24px;
    margin:0px auto;
}

   
#logotop{
    background-image:url('images/topimage.jpg');
    height:200px;
    width:830px;

}

#topmenu{
    background-color:#3E5F74;
    height:30px;
    color:white;
    font-weight:bold;
    width:830px;
    font-size:16px;
    padding-top:5px;

}


    #leftCol{
    float:left;
    width:150px;
    background-color:silver;
    text-align:left;
    margin-top:0;
    margin-right:10px;
}

#contentCol{
    float:left;
    width:510px;
    background-color:white;
    text-align:center;
    margin-top:0px;
    border-left:0px solid #EBEBEB;
}

#rightCol{
    float:right;
    width:150px;
    background-color:silver;
}

.clearer{background:red;clear:both;height:0px;line-height:0px;overflow:hidden;}

</style>
</head>

<body>

<div id="content">
<div id="content2">

<div id="logotop"><img src="images/toplogo.gif" height="200" width="830"/></div>
<div id="topmenu">Jalla</div>

<!-- menu left -->
<div id="leftCol">1<br/><br/><br/><br/><br/><br/><br/></div>
<!-- /menu left -->

<!-- main -->
<div id="contentCol">2<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
<!-- /main -->


<!-- menu right  -->
<div id="rightCol">3<br/><br/><br/></div>
<!-- /menu right -->

<div class="clearer">&nbsp;</div>
<br/><br/>


</div>
<div id="contentbottom">...</div>
</div>
</body>

</html>
Avatar billede mclemens Nybegynder
11. juni 2006 - 13:00 #3
.clearer{background:red; <- background i .clearer skal lige fjernes...
Avatar billede mclemens Nybegynder
11. juni 2006 - 13:39 #4
Hov lidt problemer grundet manglende doctype ...
og IE ville ikke helt være med til den 0px clearer :/

Så her:


<!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" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" />


<title>CPHBN.DK</title>
<style type="text/css">
    body {
    margin: 0px 0px 0px 0px;
    text-align: center;
    background: url('images/background.jpg');
    background-repeat: repeat-x;
    background-position: top;
    background-color: #5C7C8E;
    font-family:Verdana;
    font-size:11px;
    color:#5C7C8E;
}


#content {
    background-color:#506F83;
    width: 850px;
    margin:0px auto;
    }

#content2 {
    background-color:#506F83;
    width: 830px;
    margin:0px auto;
    }

#contentbottom {
    background: #506F83 url('images/contentbottom.jpg');
    width: 850px;
    height:24px;
    margin:0px auto;
}

   
#logotop{
    background-image:url('images/topimage.jpg');
    height:200px;
    width:830px;

}

#topmenu{
    background-color:#3E5F74;
    height:30px;
    color:white;
    font-weight:bold;
    width:830px;
    font-size:16px;
    padding-top:5px;

}


    #leftCol{
    float:left;
    width:150px;
    background-color:silver;
    text-align:left;
    margin-top:0;
    margin-right:10px;
}

#contentCol{
    float:left;
    width:510px;
    background-color:white;
    text-align:center;
    margin-top:0px;
    border-left:0px solid #EBEBEB;
}

#rightCol{
    float:right;
    width:150px;
    background-color:silver;
}

#clearer{clear:both;}
</style>
</head>

<body>

<div id="content">
<div id="content2">

<div id="logotop"><img src="images/toplogo.gif" height="200" width="830"/></div>
<div id="topmenu">Jalla</div>

<!-- menu left -->
<div id="leftCol">1<br/><br/><br/><br/><br/><br/><br/></div>
<!-- /menu left -->

<!-- main -->
<div id="contentCol">2<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
<!-- /main -->


<!-- menu right  -->
<div id="rightCol">3<br/><br/><br/></div>
<!-- /menu right -->

<div id="clearer">&nbsp;</div>

</div></div>
<div id="contentbottom">a</div></body></html>
Avatar billede mclemens Nybegynder
13. juni 2006 - 11:56 #5
- og tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester