Avatar billede cskaade Nybegynder
28. juli 2003 - 13:19 Der er 10 kommentarer og
1 løsning

Sidelayout uden brug af tabeller

Jeg har efter at have læst denne artikel http://www.html.dk/artikler/00043/ bleven inspireret til at prøve at lave side layout uden brug af tabeller men med hjælp af CSS det er også gået meget godt, men jeg kan ikke få siden til at fylde hele browser vinduet i højden, hvordan får jeg den til det, og min menu skal også fylde mere end browser højden hvis indhold siden gør jeg bruger følgende kode.

cskaade

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test side</title>
<style type="text/css">
Body    {
    margin:15px;
    background-image: url("images/bodybag.jpg");
    font-color: #000000;   
    font-size: 13px;
    font-family: Verdana, arial;
    }
       
#main      {
width: 750px;
}

#menu      {
position:relative;
    float : left;
            width: 150px;
            height: 550px;
            background-image: url("images/streg.jpg");
            border-width: 1px;   
    border-style: solid ;
    border-color: #818181;
            }
       
#indhold    {
    position:relative;
    width: 600;
    height: 550px;
            float : left;
            background-image: url("images/bgtd.jpg");
            border-width: 1px;   
    border-style: solid ;   
    border-color: #818181;
            }
</style>
</head>
<center>
<div id="main">
    <div id="menu">
    Menu
    </div>

    <div id="indhold" align=left>
    <h2>Forsiden</h2>
    Dette er forsiden
  </div>
</div>
</center>
</body>
</html>
Avatar billede Slettet bruger
28. juli 2003 - 13:25 #1
prøv at bruge % istedet for px når du laver width og height.
Avatar billede cskaade Nybegynder
28. juli 2003 - 13:33 #2
Jeg skal kun have den til at bruge hele browser vinduet i højden og ikke i bredden men når jeg retter det til height: 100%; under menu og indhold så bruger den ikke hele browser vinduet men kun det som der er tekst til.
Avatar billede lordhead Nybegynder
28. juli 2003 - 13:49 #3
body { margin:0px;" }
Avatar billede je79ayps Novice
28. juli 2003 - 13:58 #4
height er noget bøvlet noget med CSS og jeg tror næsten ikke, at det kan laves uden at der kommer nogle andre ting i vejen.

*dog kan du bruge at sætte height: 100% under body - det kan hjælpe dig lidt på vej.*
Avatar billede cskaade Nybegynder
28. juli 2003 - 14:16 #5
Jeg fandt også ud af at det var noget svært noget at gøre i mens jeg søgt løsning på mit problem det var der for jeg prøve her for at se om der ikke skulle være nogle af alle disse kloge mennesker der kunne hjælpe mig så lad os se om der ikke skulle være nogle som kunne det.
Avatar billede je79ayps Novice
28. juli 2003 - 14:20 #6
Prøvede du med højden i body?

*måske du skulle overveje at sætte nogle kommaer og punktummer i din tekst - det gør det lidt lettere at læse.*
Avatar billede cskaade Nybegynder
28. juli 2003 - 14:41 #7
Ja jeg prøve at sætte højden i body men det virkede ikke.
Avatar billede nstenberg Nybegynder
28. juli 2003 - 15:01 #8
Lige en reminder: Hvis du ikke har testet din side i Mozilla (evt. Mozilla Firebird » http://texturizer.net/firebird/) så bør du gøre det, eftersom Internet Explorer har nogle problemer med padding, margin og width, som den viser ukorrekt.
Avatar billede je79ayps Novice
28. juli 2003 - 15:04 #9
Du skal også sætte det samme på dit div element.

Som nstenberg også nævner så har IE problemer med beregning af bredden, men nedenstående kan afhjælpe dette:

    voice-family: "\"}\"";
    voice-family: inherit;
    width: 90px;
    height: 40px;
Avatar billede lklingenberg Nybegynder
06. august 2003 - 15:24 #10
Lige en reminder... hvis man laver fx en menu et bestemt antal pixels bred kan der opstå problemer, hvis man i browseren sætter tekststørrelsen op (som synshæmmede gør det). Man kan med fordele anvende em i stedet (sakset fra et eksisterende css):

#title {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 108px;
    background: url(etBillede.gif) transparent repeat-x top left;
    color: black;
}

#menu {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 10em;
    padding-top: 110px;
    padding-bottom: 50px;
    padding-left: 5px;
    padding-right: 10px;
    background-color: #E0E7E2 /*menu*/;
    border-right: solid 1px #325D3D /*logo*/;
    border-bottom: solid 1px #325D3D /*logo*/;
    color: black;
}


#contents {
    padding-left: 0px;
    padding-top: 145px;
    margin-left: 14em;
    background-color: white;
    color: black;
}
Avatar billede joshin Nybegynder
18. august 2003 - 11:20 #11
En lille detalje (som har drillet mig):
Hvis du skal fylde hele højden af vinduet skal både MTHM og BODY have height: 100%
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