Søg
Avatar billede sunero Nybegynder
11. februar 2005 - 12:19 Der er 10 kommentarer og
1 løsning

Horizontal centreret og vertical 100% box

Hejsa

Jeg har tre boxe, hoved, menu og indhold.

#hoved{
    position: absolute;
    top: 0px;
        left:50%;
    width:600px;
        margin-left:-300px;    
    height: 100px;
    background-color:#FFFFFF;
}

#menu{
    position:absolute;
    top: 101px;
    height: 20px;
    left:50%;
    width:600px;
    margin-left:-300px;
    background-color:#FFFFFF;
}

#indhold{
    position:absolute;
    top: 122px;
        left:50%;
    width:580px;
    margin-left:-300px;    
    padding:10px 10px 10px 10px;
    background-color: #ffffff;
}

Disse 3 er alle centreret horisontalt. Mit problem er at indholds-laget stopper når teksten i laget stopper.

Jeg vil gerne have et 600px bred hvidt felt hele vejen ned til bunden af siden.

Hvordan gøres det i CSS ? skal jeg oprette et nyt layer udenom de eksisterende? eller skal jeg bruge en tabel?
Avatar billede sbm Nybegynder
11. februar 2005 - 12:25 #1
Prøv at smide et komplet eksempel, som kan smides direkte i en .htm fil og testes. Jeg vil TRO at du er nødt til at sætte højde for body, for ellers vil nogle browsere automatisk trække body op, så den kun lige smyger rundt om indholdet.
Avatar billede sunero Nybegynder
11. februar 2005 - 12:37 #2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Legis - Forside</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="legis.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    margin: 0px;
    padding: 0px;
    background-color: #cccccc;
}

#pagecell{
    position:absolute;
    top: 0px;
    left:50%;
    width:600px;
    margin-left:-300px;    
    background-color: #ffffff;
    height: 100%;
   
}
#hoved{
    position: absolute;
    top: 0px;
    left:50%;
    width:600px;
    margin-left:-300px;    
    height: 100px;
    background-color:#FFFFFF;
}

#menu{
    position:absolute;
    top: 101px;
    height: 20px;
    left:50%;
    width:600px;
    margin-left:-300px;
    background-color:#FFFFFF;
}

#content{
    position:absolute;
    top: 122px;
    left:50%;
    width:580px;
    margin-left:-300px;    
    padding:10px 10px 10px 10px;
    background-color: #ffffff;
}

-->
</style>
</head>
<body>
    <div id="pagecell">
        <div id="hove">
            Hoved
        </div>
        <div id="menu">
            Menu
        </div>
        <div id="content">
            Bla bla 
        </div>
    </div>
</body>
</html>
Avatar billede sunero Nybegynder
11. februar 2005 - 12:39 #3
Ups. det er sådan det ser ud :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Forside</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    margin: 0px;
    padding: 0px;
    background-color: #cccccc;
}

#pagecell{
    position:absolute;
    top: 0px;
    left:50%;
    width:600px;
    margin-left:-300px;    
    background-color: #ffffff;
    height: 100%;
   
}
#hoved{
    position: absolute;
    top: 0px;
    left:50%;
    width:600px;
    margin-left:-300px;    
    height: 100px;
    background-color:#FFFFFF;
}

#menu{
    position:absolute;
    top: 101px;
    height: 20px;
    left:50%;
    width:600px;
    margin-left:-300px;
    background-color:#FFFFFF;
}

#content{
    position:absolute;
    top: 122px;
    left:50%;
    width:580px;
    margin-left:-300px;    
    padding:10px 10px 10px 10px;
    background-color: #ffffff;
}

-->
</style>
</head>
<body>
    <div id="pagecell">
        <div id="hoved">
            Hoved
        </div>
        <div id="menu">
            Menu
        </div>
        <div id="content">
            Bla bla 
        </div>
    </div>
</body>
</html>
Avatar billede sbm Nybegynder
11. februar 2005 - 12:46 #4
Tilføj
          height : 100%;
i din body style


body{
    height : 100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    margin: 0px;
    padding: 0px;
    background-color: #cccccc;
}
Avatar billede sbm Nybegynder
11. februar 2005 - 12:48 #5
Et par rettelser mere.... Hele doc ser således ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Forside</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{
    height : 100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    margin: 0px;
    padding: 0px;
    background-color: #cccccc;
}

#pagecell{
    position:absolute;
    top: 0px;
    left:50%;
    width:600px;
    margin-left:-300px;   
    background-color: #cccccc;
    height: 100%;
 
}
#hoved{
    position: absolute;
    top: 0px;
    left:50%;
    width:600px;
    margin-left:-300px;   
    height: 100px;
    background-color:#FFFFFF;
}

#menu{
    position:absolute;
    top: 101px;
    height: 20px;
    left:50%;
    width:600px;
    margin-left:-300px;
    background-color:#FFFFFF;
}

#content{
    position:absolute;
    top: 122px;
    left:50%;
    width:580px;
    margin-left:-300px;   
    padding:10px 10px 10px 10px;
    background-color: #ffffff;
    height : 100%;
}

-->
</style>
</head>
<body>
    <div id="pagecell">
        <div id="hoved">
            Hoved
        </div>
        <div id="menu">
            Menu
        </div>
        <div id="content">
            Bla bla
        </div>
    </div>
</body>
</html>
Avatar billede sunero Nybegynder
11. februar 2005 - 13:00 #6
height 100% i body style var det der skulle til.

Så vidt jeg kan se har du sat height 100% i content laget. Dette bevirkede at jeg fik en scrollbar i højre side af min browser, hvilket jeg derfor har undladt.

Lige et tillægsspørsmål :

Er det muligt at lave en footer der altid står i bunden af skærmen selvom content laget ikke er fyld ud. Og hvis contnent laget fylder mere end én side efter denne ?
Avatar billede roenving Novice
11. februar 2005 - 13:10 #7
Med den doctype, skal du også sætte height på html-elementet, hvis det skal virke i alle browsere !-)

html,body{
  osv...
Avatar billede sunero Nybegynder
22. februar 2005 - 08:55 #8
Læg lige et svar sbm og roenving, så i kan få jeres points.
Avatar billede sbm Nybegynder
22. februar 2005 - 10:22 #9
ok :-)
Avatar billede sbm Nybegynder
22. februar 2005 - 10:33 #10
Hmmm? Skulle roenving ikke også lægge svar?

Du må sige til hvis du vil have del i kagen, roenving.
Avatar billede roenving Novice
22. februar 2005 - 15:58 #11
Jeg tror li'e, jeg overlever, els tak !-)
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 dag 12:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
I går 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
White papers
Flere white papers »