Søg
Avatar billede casper_skovgaard Nybegynder
26. oktober 2004 - 14:56 Der er 9 kommentarer og
1 løsning

Fra frameset/table til css

Jeg har en opgave som meget nemt kan laves i et frameset eller en tabel, men hvis det er muligt vil jeg helst bruge div-tags og css.

Resultatet skal være en side med en header boks og en content boks. Header'en skal være 100% bred og en fast højde, mens content boksen skal fylde resten. Dvs. til samme er højden på de 2 bokse 100%. Hvis content fylder mere end der kan vises på skærmen skal der vises en scrollbar i content boksen, headeren skal altid kunne ses.

Jeg har lavet følgende eksempel, som skulle kunne give en ide om hvad det er jeg vil:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body style="margin: 0px;">
<div style="width: 100%; height: 100%; background-color: green;">
    <div id="OuterMenuBox" style="width: 100%; height: 64px; text-align: center; background-color: #33424B;">
        <div id="InnerMenuBox" style="width:767px; height: 100%; text-align: left; margin: 0 auto;">
            header
        </div>
    </div>
    <div id="OuterContentBox" style="width: 100%; height: 100%; text-align: center; overflow: auto;">
        <div id="InnerContentBox" style="width:767px; height: 100%; text-align: left; margin: 0 auto;">
            <div style="height:1200px; border:1px solid red;">content</div>
        </div>
    </div>
</div>
</body>
</html>

Problemet med eksemplet er at jeg ikke ved hvad højden på content boksen skal være, derfor fylder den for meget.
Avatar billede thb Nybegynder
26. oktober 2004 - 15:17 #1
<style>
HTML {
height: 100%;
padding: 0px;
margin: 0px;
}
#header {
position: absolute;
width: 100%;
height: 64px;
top: 0px;
left: 0px;
}

#main {
height: 100%;
width: 100%;
}
</style>

<div id="header">
Header indhold
</div>

<div id="main">
<gennemsigtigt element med højde på 64px>
Indhold
</div>

Det skulle kunne klare problemet.

Thomas
Avatar billede casper_skovgaard Nybegynder
26. oktober 2004 - 15:20 #2
Men så bliver det øverste af scrolbaren skjult, hvilket ikke er optimalt :)
Avatar billede thb Nybegynder
26. oktober 2004 - 15:25 #3
Jeg havde ikke lige tænkt over det med scroll baren... Men jeg tror så ikke at det kan lykkedes.

Thomas
Avatar billede casper_skovgaard Nybegynder
26. oktober 2004 - 15:28 #4
Tak for hjælpen alligevel :O)  Jeg lader lige spørgsmålet stå åbent lidt endnu, det kunne jo være....
Avatar billede thb Nybegynder
26. oktober 2004 - 15:32 #5
Du kan jo bare tage bruge af den normale scrollbar...

Thomas
Avatar billede thb Nybegynder
26. oktober 2004 - 15:35 #6
Så kan du jo bare gøre sådan er..

<html>
<head>

<style>
    HTML,Body {
        height: 100%;
        padding: 0px;
        margin: 0px;
        font-family: verdana;
    }
    #header {
        position: absolute;
        width: 100%;
        height: 64px;
        top: 0px;
        left: 0px;
        background-color: #c0c0c0;
    }
   
    #main {
        height: 100%;
        width: 100%;
        background-color: #DDDDDD;   
    }
</style>
</head>
<body>

<div id="header">
    Header indhold
</div>

<div id="main">
    <img src="" style="height:59;width:1px;">
    <br/>
    <div style="padding:10px;">
        Tekst
    </div>
</div>


</body>
</html>
Avatar billede casper_skovgaard Nybegynder
26. oktober 2004 - 15:35 #7
ja men designet er bestemt fra anden side, så øverste boks skal altid kunne ses.
Avatar billede thb Nybegynder
26. oktober 2004 - 16:11 #8
Her er måske noget du kan bruge...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<style type="text/css">

body {
    margin: 0px;
    padding:0 10px 0 28px;
    border:0; height:100%;
    overflow-y:auto;
    background-color: #c0c0c0;
    font-family: verdana;
}

#menu {
    display:block;
    top:0px;
    left:0px;
    height:64px;
    width:100%;
    position:fixed;
    padding:10px;
    background-color: #DDDDDD;
}

* html #menu {position:absolute;}

#main {
    height:100%;
}

</style>
<!--[if IE 6]>
  <style type="text/css">
  /*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
  /*]]>*/
  </style>
<![endif]-->
</head>

<body>

<div id="menu">
TOP MENU
</div>

<div id="main">
    <img src="" style="height:85px;width:1px;" alt=""/>
    <br/>
    Tekst

</div>

</body>
</html>
Avatar billede casper_skovgaard Nybegynder
27. oktober 2004 - 08:50 #9
Det virker jo fint :) Jeg fatter godt nok ikke meget af koden, men bare det virker.

Tak for hjælpen, og smid lige et svar.
Avatar billede thb Nybegynder
27. oktober 2004 - 11:36 #10
Super... Takker på forhånd for point. :D

Thomas
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 19:46 Skift fra Microsoft365 til Microsoft 2024 Af 1Dorte i Office & Kontorpakker
18/0816:51 Links m.m. virker ikke Af Kjeld Aage Christiansen i PC
18/0811:04 Outlookproblem Af g91 i E-mail programmer
18/0809:21 Firefox - Bøvl med idelig genbekræftelse af identitet Af andershl i Browsere
17/0815:14 Sætte billeder ind i google sheets ark ud fra elev nummer Af lurup i Excel
White papers
Flere white papers »