Avatar billede mostcrazy Nybegynder
23. december 2007 - 13:03 Der er 5 kommentarer og
1 løsning

Problem med div og tilpasning til indhold

Hej

Jeg har nedenstående kode. Mit problem består i, at når jeg laver noget indhold i div'en content, som fylder mere end div'en wrapper er høj, så skal wrapper tilpasse dig således at alt indholdet kan være i den, og baggrunden også følger med.


*****************************************
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
    <title>Priku - [*pagetitle*]</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type="text/css">

body {
    font-size:12px;
    font-family:'arial','tahoma','times New Roman',serif;
    background-image:url( images/bg2.gif);
    background-position:top;
    background-attachment:fixed;
    margin-top:0px;
    margin-bottom:0px;
}
#wrapper    {
    background-image:url(images/contentbg2.gif);
    background-position:top;
    background-repeat:repeat-y;
    width:900px;
    left:50%;
    margin-left:-450px;
    top:0px;
    position:absolute;
    height:600px;
    min-height:600px;
        padding-bottom:30px;
}
#top    {
    background-image:url( images/topbg.gif);
    background-position:top;
    background-repeat:no-repeat;
    width:900px;
    height:20px;
}
#complogo    {
    text-align:right;
    left:70px;
    top:45px;
    position:absolute;

}
#mainmenu    {
    text-align:left;
    left:55px;
    top:90px;
    font-size:11px;
    width:130px;
    position:absolute;
    line-height:20px;
    list-style-image:url(images/menudot.gif);
}
#submenu    {
    text-align:left;
    left:55px;
    top:200px;
    font-size:11px;
    width:130px;
    position:absolute;
    line-height:20px;
    list-style-image:url(images/submenudot.gif);
}
#content    {
    overflow:hidden;
    left:290px;
    top:215px;
    width:520px;
    line-height:18px;
    position:absolute;
}
#headline    {
    font-size:16px;
    font-weight:bold;
    overflow:hidden;
    left:290px;
    top:185px;
    width:520px;
    position:absolute;
}
#contactbox    {
    left:73px;
    top:100%;
    margin-top:-130px;
    font-size:11px;
    width:130px;
    position:absolute;

}
#kuvert    {
    left:650px;
    top:9px;
    position:absolute;
}
#bottom    {
    background-image:url( images/bottombg.gif);
    background-position:top;
    background-repeat:no-repeat;
    width:900px;
    height:20px;
    top:100%;
    margin-top:-20px;
    position:absolute;
}
p {
    margin-bottom:0px;
    margin-top:0px;
}
a:active {
    text-decoration:none;
    color:#C80000;

}
a:hover {
    text-decoration:underline;
    color:#C80000;

}
menu.a:link, a:visited {
    text-decoration:none;
    color:#000000;

}
menu.a:visited {
    text-decoration:none;
    color:#000000;

}
#beta {
    left:50%;
    top:50%;
    margin-top:-117px;
    margin-left:-175px;
    position:absolute;
}
</style>
</head>
<body>

<div id="wrapper">
<img src="images/beta.gif" width="350" height="234" alt="" id="beta" />
    <div id="top"></div>
            <img src="images/logo.gif" width="120" height="22" alt="" id="complogo" />
            <img src="images/kuvert2.jpg" width="150" height="101" alt="" id="kuvert" />
            <div id="mainmenu" class="menu">
                [!Wayfinder?&startId=`0`&level=1!]
            </div>

            <div id="submenu" class="menu">
                [!Wayfinder?&startId=`[[UltimateParent]]`&level=2!]
            </div>

            <div id="headline">[*longtitle*]</div>
            <div id="content">[*content*]</div>
            <div id="contactbox"></div>
    <div id="bottom"></div>


</div>


</body>
</html>
*****************************************
Avatar billede roenving Novice
25. december 2007 - 00:38 #1
Hvorfor bruger du absolut positionering ?-)

Placér dem relativt, og du får automatisk det, du ønsker !-)
Avatar billede flashnoob Nybegynder
25. december 2007 - 11:47 #2
Nu har jeg ikke lige testet det, men kan det ikke klares med en overflow:auto; på wrapper elementet?
Avatar billede roenving Novice
25. december 2007 - 14:02 #3
Ikke med absolut placerede elementer indeni ...
Avatar billede mostcrazy Nybegynder
25. december 2007 - 22:55 #4
fordi jeg ikke har forstået princippet bag relative, men hvis du har en god og let forklaring på det, så skal jeg da gerne forsøge :P
Avatar billede mostcrazy Nybegynder
29. september 2008 - 07:41 #5
roenving læg lige et svar
Avatar billede roenving Novice
29. september 2008 - 14:32 #6
Oki '-)

-- og absolut positionerede elementer er 'flydende' elementer, som ikke må indgå i beregningen af, hvilken placering efterfølgende elementer har samt det omkransende elements størrelse (sammen med f.eks. floatede !-)

-- ofte vil man kunne klare det med en clear-div, men den tror jeg ikke på vil virke med absolut positionerede ...
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