Avatar billede tras Juniormester
16. maj 2006 - 13:27 Der er 4 kommentarer og
1 løsning

Min hjemmeside gider ikke blive 100% height

Hej min hjemme side gider ikke bruge hele højten og jeg har sat 100% height ind alle steder jeg kunne komme i tanke om. men til igen nytte er der ikke nogle som kan få den til at "pumpe sig op"

<html>
    <head>
        <title>TEST</title>
        <style type="text/css">
            a:active, a:focus, a:link, a:visited {color: #ddcc88;text-decoration: none; }
            a:hover {color: #003300;text-decoration: none;}
            .style2 {color: #000000}
    </style>
        <meta name='description' content='This is a test page for my guild!'>
        <meta name='keywords' content='test, wow, world of warcraft, guild, clan'>
    </head>
    <body bgcolor='#000000' text='#cccccc' bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
        <table align='center' width='100%' cellspacing='0' cellpadding='0'>
            <tr>
                <td>
                    <table width='100%' cellspacing='0' cellpadding='0'>
                        <tr>
                            <td style='padding:0px;'>
                                <table width='100%' cellspacing='0' cellpadding='0' >
                                    <tr>
                                        <td>TOP PIC</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <table width='100%' cellspacing='0' cellpadding='0'>
                        <tr>
                            <td bgcolor='#283f3c' style='border-top:1px #677e7b solid;border-bottom:1px #677e7b solid;'>
                                <a href='#'>Home</a> |
                                <a href='#'>Forum</a> |
                                <a href='#'>Guild Members</a> |
                                <a href='#'>Gallery</a> |
                                <a href='#'>Search</a>
                            </td>
                            <td style='border-top:1px #677e7b solid;border-bottom:1px #677e7b solid;' bgcolor='#283f3c' align='right'>
                                DATE
                            </td>
                        </tr>
                    </table>
                    <table width='100%' cellspacing='0' cellpadding='0'>
                        <tr>
                            <td width='170' valign='top' bgcolor='#485f5c'>
                                <table width='100%' cellpadding='0' cellspacing='0' style='border-right:1px #3c3c3c solid;'>
                                    <tr>
                                        <td background="images/bbb.jpg">Navigation</td>
                                    </tr>
                                    <td bgcolor='#485f5c'>
                                        <img src='images/arrow.gif'> <a href='#'>Home</a><br>
                                        <img src='images/arrow.gif'> <a href='#'>Forum</a><br>
                                        <img src='images/arrow.gif'> <a href='#'>Guild Members</a><br>
                                        <img src='images/arrow.gif'> <a href='#'>Gallery</a><br>
                                        <img src='images/arrow.gif'> <a href='#'>Contact Us</a><br>
                                        <img src='images/arrow.gif'> <a href='#'>Search</a>
                                    </td>
                                </table>
                                <table width='100%' cellpadding='0' cellspacing='0'>
                                    <tr>
                                        <td background="images/bbb.jpg">Users Online</td>
                                    </tr>
                                    <tr>
                                        <td bgcolor='#485f5c'>
                                            <img src='images/arrow.gif'> Guests Online: X <br>
                                            <img src='images/arrow.gif'> Members Online: X <br>
                                            <br>
                                            <img src='images/arrow.gif'> Registered Members: X <br>
                                            <img src='images/arrow.gif'> Newest Member: <a href='#'>X</a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td bgcolor="#081f1c" height="100%" width="8px"></td>
                            <td valign='top'>
                                <table cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td width="100%" bgcolor="#081f1c" height="8px"></td>
                                        </tr>
                                </table>
                                    <table bgcolor="#283f3c" cellspacing="0" cellpadding="0" width="100%">
                                        <tr>
                                            <td background="images/bb.jpg">Forum</td>
                                        </tr>
                                    </table>
                                    <table style="border-right:1px #485f5c solid;border-left:1px #485f5c solid;border-bottom:1px #485f5c solid;" bgcolor="#283f3c" cellspacing="3" cellpadding="0" width="100%">
                                        <tr>
                                            <td style="border:1px #485f5c solid;">&nbsp;</td>
                                        </tr>
                                    </table>
                                    <table cellspacing="0" cellpadding="0" width="100%">
                                        <tr bgcolor="#081f1c">
                                            <td bgcolor="#081f1c" height="8"></td>
                                        </tr>
                                    </table>
                                    <table style="border-right:1px #485f5c solid;border-left:1px #485f5c solid;border-top:1px #485f5c solid;" bgcolor="#283f3c" cellspacing="0" cellpadding="0" width="100%">
                                        <tr>
                                            <td background="images/bb.jpg">News</td>
                                        </tr>
                                    </table>
                                <table style="border-right:1px #485f5c solid;border-left:1px #485f5c solid;border-bottom:1px #485f5c solid;" bgcolor="#283f3c" cellspacing="3" cellpadding="0" width="100%">
                                    <tr>
                                        <td>
                                            <table cellspacing="0" cellpadding="0" width="100%">
                                                <tr>
                                                    <td colspan="3">
                                                        <table bgcolor="#182f2c" style="border:1px #485f5c solid;" cellspacing="0" cellpadding="0" width="100%">
                                                            <tr>
                                                                <td ><strong>Name</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td style="border-top:1px #485f5c solid;border-bottom:1px #485f5c solid;">&nbsp;</td>
                                                            </tr>
                                                            <tr>
                                                                <td align="right"><img src="images/arrow.gif" /><a href="#">Postedname</a> on November 07 2005 xx:xx:xx &middot; <a href="#"><img border="0" src="images/printer.gif" /></a></td>
                                                            </tr>
                                                        </table>
                                                        <div><img height="5" src="images/blank.gif" width="1" /></div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <table bgcolor="#182f2c" style="border:1px #485f5c solid;" cellspacing="0" cellpadding="0" width="100%">
                                                            <tr>
                                                                <td><strong>Name</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td style="border-top:1px #485f5c solid;border-bottom:1px #485f5c solid;">Contents</td>
                                                            </tr>
                                                            <tr>
                                                                <td align="right"><img src="images/arrow.gif" /><a href="#">Postedname</a> on November 07 2005 xx:xx:xx &middot; <a href="#"><img border="0" src="images/printer.gif" /></a></td>
                                                            </tr>
                                                        </table>
                                                        <div><img height="5" alt="" src="images/blank.gif" width="1" /></div>
                                                        <table bgcolor="#182f2c" style="border:1px #485f5c solid;" cellspacing="0" cellpadding="0" width="100%">
                                                            <tr>
                                                                <td><strong>Name</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td style="border-top:1px #485f5c solid;border-bottom:1px #485f5c solid;">Contents</td>
                                                            </tr>
                                                            <tr>
                                                                <td align="right"><img src="images/arrow.gif" /><a href="#">Postedname</a> on November 07 2005 xx:xx:xx &middot; <a href="#"><img border="0" src="images/printer.gif" /></a></td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td><img height="1" src="images/blank.gif" width="5" /></td>
                                                    <td>
                                                        <table bgcolor="#182f2c" style="border:1px #485f5c solid;" cellspacing="0" cellpadding="0" width="100%">
                                                            <tr>
                                                                <td><strong>Name</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td style="border-top:1px #485f5c solid;border-bottom:1px #485f5c solid;">Contents</td>
                                                            </tr>
                                                            <tr>
                                                                <td align="right"><img src="images/arrow.gif" /><a href="#">Postedname</a> on November 07 2005 xx:xx:xx &middot; <a href="#"><img border="0" src="images/printer.gif" /></a></td>
                                                            </tr>
                                                        </table>
                                                        <div><img height="5" src="images/blank.gif" width="1" /></div>
                                                        <table bgcolor="#182f2c" style="border:1px #485f5c solid;" cellspacing="0" cellpadding="0" width="100%">
                                                            <tr>
                                                                <td><strong>Name</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td style="border-top:1px #485f5c solid;border-bottom:1px #485f5c solid;">Contents</td>
                                                            </tr>
                                                            <tr>
                                                                <td align="right"><img src="images/arrow.gif" /><a href="#">Postedname</a> on November 07 2005 xx:xx:xx &middot; <a href="#"><img border="0" src="images/printer.gif" /></a></td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                                <table cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td width="100%" bgcolor="#081f1c" height="8px"></td>
                                    </tr>
                                </table>
                                <table height="100%" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td width="100%" bgcolor="#081f1c" height="8px"></td>
                                    </tr>
                                </table>
                            </td>
                            <td bgcolor="#081f1c" width="8px"></td>
                            <td bgcolor='#485f5c' width='170' valign='top'>
                                <table width='100%' cellpadding='0' cellspacing='0'>
                                    <tr>
                                        <td background="images/bbb.jpg">Login</td>
                                    </tr>
                                        <td>
                                            <div align='center'>
                                            <form name='loginform' method='post' action='news.php'>
                                            Username<br>
                                            <input type='text' name='user_name' class='textbox' style='width:100px'><br>
                                            Password<br>
                                            <input type='password' name='user_pass' class='textbox' style='width:100px'><br>
                                            <input type='checkbox' name='remember_me' value='y' title='Remember Me' style='vertical-align:middle;'>
                                            <input type='submit' name='login' value='Login' class='button'><br>
                                            </form>
                                            <br>
                                            Not a member yet?<br><a href='#'>Click here</a> to register.<br><br>
                                            Forgotten your password?<br>Request a new one <a href='#'>here</a>.
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <table cellpadding='0' cellspacing='0' width='100%'>
                        <tr>
                            <td style="border-top:1px #485f5c solid;border-bottom:1px #485f5c solid;" bgcolor="#283f3c">
                                <center>Copyright &copy; 2005 WebHostEU</center>
                            </td>
                        </tr>
                    </table>
                    <table bgcolor='#485f5c' cellpadding='0' cellspacing='0' width='100%'>
                        <tr>
                            <td align='center'>
                                BOTTOM
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>
Avatar billede fennec Nybegynder
16. maj 2006 - 13:33 #1
Du mangler den på body:

<body style="height:100%" ...
Avatar billede fennec Nybegynder
16. maj 2006 - 13:35 #2
og på den efterfølgende table:

<body style="height:100%" ...
  <table style="height:100%" ...
Avatar billede olebole Juniormester
16. maj 2006 - 15:54 #3
<ole>

For det første skal du bruge en fuld DTD (DocType Definition) ... f.eks:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
... osv - osv ...

Ellers kan IE ikke tolke CSS.

"jeg har sat 100% height ind alle steder jeg kunne komme i tanke om"
- så burde du få din fantasi frisket grundigt op ... du har sat det to (2) steder!  ;D

Dette bør stå i din head:

<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>

Dernæst findes der ikke en height-attribut på et table-element ... højden skal sættes med styles.

Ydermere beregnes en relativ/procentuel højde udfra det omkransende elements højde, som altså eksplicit skal være sat.

- og så duer dette jo ikke:

<div style="height:400px">
    <div style="height:100%">blabla</div>
    <div style="height:100%">blabla</div>
</div>

- da begge de inderste div så bliver 400px høje - og dermed presser det yderste til at blive 800px højt  ;o)

/mvh
</bole>
Avatar billede wever Nybegynder
17. maj 2006 - 12:45 #4
Det er desværre blevet lidt mere besværligt at lave højden om til 100%, men det her burde hjælpe: http://www.quirksmode.org/css/100percheight.html

Ellers søg på http://www.google.com/search?hl=en&lr=&q=css+height+100%25
Avatar billede olebole Juniormester
17. maj 2006 - 18:55 #5
- og så er det jo allerede blevet ret tydeligt forklaret i tråden  :)
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