Avatar billede optur Novice
22. december 2010 - 12:05 Der er 2 kommentarer og
1 løsning

problemer med div som skal følge indhold

Jeg har en div med indhold som udvider sig alt afhængig af indhold, i bunden af den div har jeg en anden div, men det billede som skal flytte sig med indholdet. Jeg har prøvet følgende, men den flytter sig ikke, har brugt lignende kode før som virkede.

min html:
<div id="container">
    <!-- Indeholder Header, samt menu som er lavet i CSS Sprites -->
    <div id="header">
        <div id="navigation">
            <ul id="navlist">
                <li id="nav01"><a href=""><!--Forside--></a></li>
                <li id="nav02"><a href=""><!--Priser--></a></li>
                <li id="nav03"><a href=""><!--Vare--></a></li>
                <li id="nav04"><a href=""><!--Kontakt--></a></li>
            </ul>
        </div>
    </div>
    <div id="contenttop"></div>
    <div id="content">
   
    </div>
    <div id="contentbottom"></div>
    <div id="sidebartop"></div>
    <div id="sidebar"></div>
    <div id="footer"></div>
</div>

og så min css:
#contenttop {
    position:absolute;
    top:279px;
    left:163px;
    width:498px;
    height:10px;
    background-image:url(../images/contenttop.png);
}

#content {
    position:relative;
    float:left;
    top:-2px;
    clear:both;
    left:163px;
    width:498px;
    min-height:250px;
    background-color:#FFF;
}

#contentbottom {
    position:relative;
    width:498px;
    height:10px;
    left:163px;
    top:198px;
    margin-bottom:800px;
    background-image:url(../images/contentbottom.png);
}
Avatar billede herlevsen123 Nybegynder
22. december 2010 - 21:56 #1
Nu er det lidt svært at se hvad du mener uden resten af css'en. Bruger du position til at centrere?
Avatar billede optur Novice
23. december 2010 - 14:48 #2
Jeg har valgt at lave det i tabeller i stedet. Ikke verdens bedste løsning, men den virker.
Avatar billede optur Novice
28. december 2010 - 08:13 #3
Her er løsningen på mit første problem:
HTML koden:
<div id="contentcontainer">
    <div id="contenttop"></div>
    <div id="content">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><h1><?php echo $headline; ?></h1></td>
            </tr>
            <tr>
                <td id="hrline"></td>
            </tr>
            <tr>
                <td><?php echo $indhold; ?></td>
            </tr>
        </table>
    </div>
    <div id="contentbottom"></div>
</div>


CSS:
#contentcontainer {
    position:absolute;
    float:left;
    left:138px;
    width:498px;
    top:279px;
}

#contenttop {
    position:absolute;
    top:0px;
    width:498px;
    height:10px;
    background-image:url(../images/contenttop.png);
}

#content {
    position:relative;
    top:10px;
    clear:both;
    min-height:200px;
    width:498px;
    background-color:#FFF;
    margin-bottom:50px;
}

#contentbottom {
    position:relative;
    top:-40px;
    width:498px;
    height:10px;
    background-image:url(../images/contentbottom.png);
}


Jeg kunne ikke få contentbottom til at følge content boksen når den udvidede sig i forhold til indholdet, men det virker med denne kode.
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