Avatar billede Slettet bruger
12. juni 2009 - 12:50 Der er 4 kommentarer og
1 løsning

DIV+CSS problem.

Hej eksperter

Jeg håber der er en der kan hjælpe mig.

Jeg sidder og er ved at kode et layout for en client, og kodning er sq ikke mit speciale. Jeg koder den i xHTML og CSS for at den er så up-to-date som muligt, og så det er nemmest for ham at gå til.

Jeg sidder med det problem, at mit contentarea's baggrund ikke vil følge selve indholdet på siden.

HTML'en i grove træk:

<!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>
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../css/menu.css" />

</head>
<body>
<!-- BACKGROUND / BODY -->
<div id="topbanner">
<center>
<div id="container">
<!-- BACKGROUND / BODY -->

<!-- LOGO -->
<div id="logo"></div>
<!-- LOGO -->

<!-- TOPMENU -->
<div id="hovedmenu">
<div id="menu_left"></div>
    <div id="menu">
        <ul>
        <li><a href="#"><span>Forside</span></a></li>
        <li><a href="#"><span>Information</span></a></li>
        <li><a href="#"><span>Skribenter</span></a></li>
        <li><a href="#"><span>Events</span></a></li>
        <li><a href="#"><span>Kontakt</span></a></li>
    </ul>
    </div>
<div id="menu_right"></div>
<div id="rss"><a href="#"><img src="../img/icon_rss.jpg" width="26" height="16" alt="RSS" /></a></div>
</div>
<!-- TOPMENU -->

<!-- CONTENTBODY -->
<div id="contentbody">

    <div id="left">
      Venstre side's indhold (Main content)
    </div>
   
    <div id="right">
      Højre side's indhold
    </div>

</div>
<!-- CONTENTBODY -->

<!-- CONTENTBOTTOM -->
<div id="contentbottom"></div>
<!-- CONTENTBOTTOM -->

<!-- BOTTOM -->
<div id="bottom">
<div id="bottom_left"></div>

  Bund indhold
   
<div id="bottom_right"></div>
</div>
<!-- BOTTOM -->

</div>
</center>
</div>

</body>
</html>



OG CSS'en i grove træk:
body
{
    background: #c0d7d9 url(../img/background.jpg) top center repeat-x;
    margin: 0px;
    font-family: Arial, Tahoma, Verdana;
    font-size: 11px;
    color: #333333;
    height: 100%;
}
#contentbody
{
    background: url(../img/body.jpg) top center repeat-y;
    width: 980px;
    height: auto;
}

#contentbottom
{
    width: 980px;
    height: 3px;
    background: url(../img/body_bottom.jpg) bottom center no-repeat;
    clear: both;
}
#left
{
    width: 658px;
    float: left;
    margin: 18px 0px 18px 18px;
    text-align: left;
}
#right
{
    width: 263px;
    float: right;
    margin: 18px 15px 18px 0px;
    text-align: left;
}


Men som sagt, så vil baggrunden fra #contentbody ikke vises i sammenhæng med indholdet i div'erne Left og Right.

Er der nogen der kan hjælpe mig?
Avatar billede keysersoze Ekspert
12. juni 2009 - 12:59 #1
når du floater "fylder" elementerne ikke noget - så du er nødt til at placere fx en div med style clear: both; umiddelbart før din contentbody afslutnings-dev
Avatar billede Slettet bruger
12. juni 2009 - 13:04 #2
altså indsætte clear: both; i #contentbody eller i #contentbottom?

Fordi jeg har allerede placeret i #contentbottom..

Men hvis jeg ikke skal bruge float: left/right, hvordan kan jeg ellers lave mine #left og #right elementer, så de bliver inde i #contentbody?
Avatar billede keysersoze Ekspert
12. juni 2009 - 13:09 #3
det er indholdet i din contentbody der floater - og derfor det der skal cleares;

<div id="contentbody">

    <div id="left">
      Venstre side's indhold (Main content)
    </div>
   
    <div id="right">
      Højre side's indhold
    </div>

    <div style="clear: both;"></div>
</div>
Avatar billede Slettet bruger
12. juni 2009 - 13:13 #4
Du er en skat! :D

Smid et svar, så du kan få dine velfortjente points :)
Avatar billede Slettet bruger
12. juni 2009 - 13:14 #5
Det havde du allrede, så værsgo :)
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