Avatar billede lasseq Nybegynder
14. oktober 2007 - 16:50 Der er 7 kommentarer og
1 løsning

Hjælp til CSS-layout

Hej,

Jeg vil gerne have lavet et layout der passer til følgende opstilling:

********************************
*    *      TOP          *    *
*    **********************    *
*    *    *              *    *
*    *    *              *    *
*    *    *              *    *
*    *    *    MAIN      *    *
*    *    *              *    *
*    *    *              *    *
*    *    *              *    *
********************************

Håber skitsen er nogenlunde forståelig.

Ønsket er, at jeg gerne vil have en centreret design, højde 100%.
Menuen til venstre for MAIN skal også være 100%-bannerets højde. MAIN skal være det eneste sted hvor der kan scrolles, dvs. MENU, BANNER og evt en FOOTER vil altid være synlig.

Jeg har surfet rundt for finde andre med lignende problemstilling, men der har ikke givet noget resultat.

Mit problem er ikke at lave en centreret side med 100% i højde, men at gøre MAIN til den eneste side med scroll - jeg har prøvet det, og det ser ikke godt ud.

Har nogen en reference med en behandling af dette problem?
Ellers kan jeg poste mit eget CSS-forsøg...

På forhånd tak :)
Avatar billede lasseq Nybegynder
14. oktober 2007 - 16:52 #1
Jeg ser nu, at min skitse her ikke ser særlig illustrativ ud.
Som eksempel kan siden http://www.soren-ervig.com/dk/default.htm repræsentere ideen (her benytter eksemplet dog frames).
Avatar billede w13 Novice
14. oktober 2007 - 17:09 #2
Kan vi se det, du har lavet i CSS, som ikke virkede rigtigt?

For at give main en scroll har du vel brug overflow:auto? Eller er main et IFrame?
Avatar billede lasseq Nybegynder
14. oktober 2007 - 17:30 #3
Jeg skal se, om jeg kan få det fundet frem til senere i aften.
Main er ikke et Iframe, men forestilles at være en div-container ligesom de andre elementer (= "alt på samme side").
Avatar billede w13 Novice
14. oktober 2007 - 17:39 #4
Ok. Det skulle i hvert fald kunne klares med en style="overflow:auto" på main.
Avatar billede lasseq Nybegynder
14. oktober 2007 - 21:43 #5
Hej igen

Jeg har nu fået fundet frem til layoutet:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titel</title>
<style type="text/css">
body {
    text-align:center;
    margin:0px;
    padding:0px;
    height:100%;
    background-color:#CCCCCC;
}
html {
    height:100%;
}
div#container {
    width:700px;
    height:100%;
    margin:0px auto 0px;
    text-align:left;
    padding:0px;
    border-right:1px solid #333;
    border-left:1px solid #333;
    background-color:#ffffff;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:13px;
    position:relative;
}
div#hoved {
    position:relative;
    width:100%;
    margin:0px;
    padding:0px;
    height:90px;
    background-color:blue;
}
html>body div#container {
    width:570px;
    min-height:100%;
}
div#main {
    line-height:140%;
    margin-bottom:20px;
    height:auto;
}
#indhold {
    margin-left:150px;
    background-color:#FF0000;
}
#venstremenu {
    float:left;
    width:150px;
    background-color:#00FF00;
}
#footer{
    width:100%;
    background-color:#FFFF00;

}


/** Fonte **/
#indhold h1 {
    font-size:13pt;
    text-decoration:underline;
}
#indhold h2 {
    font-size:11pt;
    margin-bottom:-15px;
    background-color:#CCCCCC;
}

</style>
</head>
<body>
<div id="container">
  <div id="hoved">Hoved</div>
  <div id="main">
    <div id="venstremenu">Menu</div>
    <div id="indhold">Indhold</div>
  </div>
  <div id="footer">Footer</div>
</div>
</body>
</html>


Jeg har markeret felterne med stærke farver, for bedre at kunne at kunne referere til dem. Problemet er her følgende:
- Div venstremenu og Div indhold udnytter ikke 100% højde.
- Footeren stilles (dermed) ikke nederst.

Måske skulle vi starte dér for at kunne gøre scroll:auto muligt på Div indhold?
Avatar billede lasseq Nybegynder
21. oktober 2007 - 20:46 #6
Er der ingen der har et bud på at komme videre?
Avatar billede w13 Novice
24. november 2007 - 11:59 #7
Tror, du må lukke her.
Avatar billede lasseq Nybegynder
24. november 2007 - 13:30 #8
OK
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