Avatar billede jwulff Nybegynder
02. august 2007 - 18:39 Der er 13 kommentarer og
1 løsning

Indholds boks skal automatisk udvide sig

Hej, jeg har lavet nedenstående div side. Jeg har dog et problem med div-boksen hoved_vindue. Hvis der kommer en masse tekst skal boksen automatisk udvide sig og blive større. Bruger jeg overflow kommer der en bare en scrollbar.

Nogen der lige ved hvordan man klarer den?

<!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>
<title>-</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--

#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:958px;
    height:825px;
}

#top-distance_ {
    position:absolute;
    left:0px;
    top:0px;
    width:958px;
    height:40px;
}

#logo_ {
    position:absolute;
    left:0px;
    top:40px;
    width:198px;
    height:140px;
}

#top-menu_ {
    position:absolute;
    left:198px;
    top:40px;
    width:721px;
    height:72px;
}

#trans-02_ {
    position:absolute;
    left:919px;
    top:40px;
    width:39px;
    height:694px;
}

#top-bar_ {
    position:absolute;
    left:198px;
    top:112px;
    width:721px;
    height:68px;
}

#trans-01_ {
    position:absolute;
    left:0px;
    top:180px;
    width:41px;
    height:554px;
}

#left-stroke_ {
    position:absolute;
    left:41px;
    top:180px;
    width:3px;
    height:504px;
}

#index-08_ {
    position:absolute;
    left:44px;
    top:180px;
    width:673px;
    height:56px;
}

#opslagstavlen-overskrift_ {
    position:absolute;
    left:717px;
    top:180px;
    width:202px;
    height:56px;
}

#hoved_vindue_top_ {
    position:absolute;
    left:44px;
    top:236px;
    width:673px;
    height:18px;
}

#opslagstavlen_ {
    position:absolute;
    left:717px;
    top:236px;
    width:202px;
    height:448px;
}

#hoved-vindue_ {
    position:absolute;
    left:44px;
    top:254px;
    width:633px;
    height:000px;;
    overflow:auto;
    min-height: 415px;
    padding-left: 20px;
    padding-right: 20px;
}

#hoved_vindue_bund_ {
    position:absolute;
    left:44px;
    top:669px;
    width:673px;
    height:15px;
}

#bund_ {
    position:absolute;
    left:41px;
    top:684px;
    width:878px;
    height:50px;
}

#skygge_ {
    position:absolute;
    left:0px;
    top:734px;
    width:958px;
    height:91px;
}
body {
    background-image: url(images/bg.gif);
    background-color: #67b24a;
}
#container {

  position: relative;
  width: 960px;
  margin: 0 auto;
}

-->
</style>
</head>

<body style="background-color:#FFFFFF;">

<div id="container">
    <div id="Table_01">
        <div id="top-distance_">
            <img id="top_distance" src="images/top_distance.gif" width="958" height="40" alt="" />
        </div>
        <div id="logo_">
            <img id="logo" src="images/logo.gif" width="198" height="140" alt="" />
        </div>
        <div id="top-menu_">
            <img id="top_menu" src="images/top_menu.gif" width="721" height="72" alt="" />
        </div>
        <div id="trans-02_">
            <img id="trans_02" src="images/trans_02.gif" width="39" height="694" alt="" />
        </div>
        <div id="top-bar_">
            <img id="top_bar" src="images/top_bar.gif" width="721" height="68" alt="" />
        </div>
        <div id="trans-01_">
            <img id="trans_01" src="images/trans_01.gif" width="41" height="554" alt="" />
        </div>
        <div id="left-stroke_">
            <img id="left_stroke" src="images/left_stroke.gif" width="3" height="504" alt="" />
        </div>
        <div id="index-08_">
            <img id="index_08" src="images/index_08.gif" width="673" height="56" alt="" />
        </div>
        <div id="opslagstavlen-overskrift_">
            <img id="opslagstavlen_overskrift" src="images/opslagstavlen_overskrift.gif" width="202" height="56" alt="" />
        </div>
        <div id="hoved_vindue_top_">
            <img id="index_10" src="images/hoved_vindue_top.gif" width="673" height="18" alt="" />
        </div>
        <div id="opslagstavlen_">
            <img id="opslagstavlen" src="images/opslagstavlen.gif" width="202" height="448" alt="" />
        </div>
        <div id="hoved-vindue_" style="background-image:url(images/hoved_vindue.gif);">
            indhold<br><br>
        </div>
    <div id="hoved_vindue_bund_">
            <img id="index_13" src="images/hoved_vindue_bund.gif" width="673" height="15" alt="" />
        </div>
        <div id="bund_">
            <img id="bund" src="images/bund.gif" width="878" height="50" alt="" />
        </div>
        <div id="skygge_">
            <img id="skygge" src="images/skygge.gif" width="958" height="91" alt="" />
        </div>
    </div>
</div>
</body>
</html>
Avatar billede kalp Novice
02. august 2007 - 19:02 #1
sætte <div style="width:auto">
Avatar billede kalp Novice
02. august 2007 - 19:04 #2
du skal selvfølgelig bare tilføje

width:auto ;

til den rigtige del i din css.
Avatar billede jwulff Nybegynder
02. august 2007 - 19:06 #3
Det er højden det er galt med.
Avatar billede kalp Novice
02. august 2007 - 19:07 #4
du kan gøre det samme med height selvfølgelig
Avatar billede kalp Novice
02. august 2007 - 19:07 #5
height:auto
Avatar billede jwulff Nybegynder
02. august 2007 - 19:29 #6
Hej igen,

Okay, det virker. Men problemet er at #bund, #skygge og #hoved_vindue_bund skal følge med. Hvordan fikser man lige den?
Avatar billede kalp Novice
02. august 2007 - 19:35 #7
kan man se din kode live et sted?
så jeg kan se problemet
Avatar billede jwulff Nybegynder
02. august 2007 - 19:43 #8
Nej desværre, har ikke lige en webserver her.

Se der hvor der står "indhold<br><br>" hvis du fortsætter med at skrive

fx indhold<br><br>indhold<br><br>indhold<br><br>

Så vil hoved-vindue_ udvide sig ned af, men hoved_vindue_bund vil stadig stå fast. Hvis hoved-vindue_ udvider sig højere end den er først skal "top" i #bund også ændre sig, så den rykker nedad.

#bund_ {
    position:absolute;
    left:41px;
    top:684px;
    width:878px;
    height:50px;
}
Avatar billede kalp Novice
02. august 2007 - 19:47 #9
det har noget at gøre med den her
position:absolute;


prøv at skifte den ud med en af disse
position:relative;
    position:fixed;
    position:inherit;
    position:static;

eller prøv helt at fjerne den!

men er usikker på nogle af dem virker.
Avatar billede jwulff Nybegynder
02. august 2007 - 19:55 #10
Fjerner jeg det rykker den helt op på skærmen.

Den starter på den rigtige plads med relative og absolute, men bevæger sig ikke. Ingen af de andre virker.
Avatar billede kalp Novice
02. august 2007 - 19:58 #11
okay.. jeg tror til denne sidste del af opgaven du skal vente på, at en anden kigger forbi og som har leget mere med det end jeg:)
Avatar billede jwulff Nybegynder
02. august 2007 - 19:59 #12
kan man ikke på en måde sætte minimun top, og inherit den sammen med en anden div boks, så hvis højden i den ene ændre sig påvirker det top i den anden. :)
Avatar billede jwulff Nybegynder
02. august 2007 - 21:57 #13
tror lige jeg simplificere spørgsmålet...
Avatar billede jwulff Nybegynder
02. august 2007 - 22:00 #14
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