Avatar billede lraj Nybegynder
06. september 2010 - 09:25 Der er 3 kommentarer

Css design fortsætter 100%

Hej eksperter.

Jeg er normalt vant til at benytte mig af tables til mine designs. Det er dog et krav i dette tilfælde at jeg gør det i CSS med id's. Min problematik ligger i at jeg gerne vil have sitet til at fortsætte 100%.. altså så det følger hele vejen ned - også hvis der kun er én linie tekst. Jeg har prøvet at google lidt, men uden held - og de gamle metoder i tables virker umiddelbart ikke. Her er hvad jeg midlertidigt er nået frem til (som ikke virker)

<style type="text/css">
<!--

#Table_01 {
    position:absolute;
    top:0px;
    width:1000px;
    height:100%;
    left:10%;
}

#index-01_ {
    background-image:url("images/index_01.png");
    background-repeat:repeat-y;
    position:absolute;
    left:0px;
    top:0px;
    width:40px;
    height:100%;
}

#index-02_ {
    background-image:url("images/index_02.png");
    position:absolute;
    left:40px;
    top:0px;
    width:918px;
    height:178px;
}

#index-03_ {
    background-image:url("images/index_03.png");
    background-repeat:repeat-y;
    position:absolute;
    left:958px;
    top:0px;
    width:42px;
    height:100%;
}

#index-04_ {
    background-color:#ffc047;
    position:absolute;
    left:40px;
    top:178px;
    width:132px;
    height:100%;
}

#index-05_ {
    background-image:url("images/index_05.png");
    background-repeat:repeat-y;
    position:absolute;
    left:172px;
    top:178px;
    width:21px;
    height:100%;
}

#index-06_ {
    background-color:#fab228;
    position:absolute;
    left:193px;
    top:178px;
    width:765px;
    height:100%;
}

-->
</style>

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

<div id="Table_01">
    <div id="index-01_" style="height:100%">Her er min skygge til venstre (skal fortsætte 100%)
       
    </div>
    <div id="index-02_">Her er mit topbanner
       
    </div>
    <div id="index-03_">Her er min skygge til højre (skal fortsætte 100%)
       
    </div>
    <div id="index-04_">
        Her skal min menu være
    </div>
    <div id="index-05_">Midtspalte, skal fortsætte i 100%
       
    </div>
    <div id="index-06_">
        her skal min tekst være
    </div>
</div>
Avatar billede lraj Nybegynder
06. september 2010 - 09:26 #1
Tekst og menu skal selvfølgelig også fortsætte 100%
Avatar billede Bamma Nybegynder
06. september 2010 - 12:35 #2
prøv at lave en linie med,
html,body { height:100% }

og måske endda ogsår have min-height inde i den
Avatar billede jokkejensen Novice
08. september 2010 - 16:39 #3
fjern index 1 og 3, og lig som baggrund på #Table_1 i png, 1px højt, og lad det repeate ned.

Brug desuden google -> clearfix på #Table_1

Læs så en af de sidste artikler om emnet, 100% height. Ex : http://www.eksperten.dk/guide/1369

/J
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

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