[HTML/CSS] Tabel 100% hoogte van browser venster.. [+nested] - Softwareontwikkeling

maandag 10 maart 2003 21:47

Acties:

Topicstarter

Heb met de search de volgende thread gevonden die mij info die ik al kende verschafte: [rml][ HTML/CSS] Tabel 100% hoogte van browser venster..[/rml]

Wat bij mij nou het geval is: als er nested tables zijn, krijg ik het effect dat de pagina in Opera heel erg overstreched: hoe groot je scherm ook is: hij zet er extra space in en je krijg voor nix een scroll bar...

Iemand suggesties?

Whoo-ah.

maandag 10 maart 2003 22:05

Acties:

Verwijderd

Zonder source kunnen we je moeilijk helpen natuurlijk

Je hebt op je pagina waarschijnlijk iets gedaan als

code:

---
| kopje hoogte x pixels |
---------
| td met hoogte 100% |
---------

bij elkaar opgeteld krijg je dan 100% + x pixels, en die x is nou precies dat stukje wat 'overblijft'

Wat je dus vergeet is dan een pagina ook hoger kan zijn dan 100%

dinsdag 11 maart 2003 00:16

Acties:

gavro

Topicstarter

Oh damn... sorry hier mijn htmletje... of ik ben kippig of tjah... weird

Als ik gewoon kippig ben, mijn excuses, maar ik heb vandaag teveel naar dit schermpie gestaard

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    height: 100%;
}
table {
    height: 100%;
}

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

</head>

<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
  <table width="776" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr> 
      <td height="100" style="BACKGROUND-POSITION: top right" width="8" valign="top" background="images/spacer_left.gif"></td>
      <td height="100" width="760" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="100">
          <param name="movie" value="images/top.swf">
          <param name=quality value=high>
          <embed src="images/top.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="760" height="100"></embed> 
        </object></td>
      <td height="100" style="BACKGROUND-POSITION: top left" width="8" valign="top" background="images/spacer_right.gif"></td>
    </tr>
    <tr> 
      <td height="100" width="776" colspan="3" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="776" height="100">
          <param name="movie" value="images/inter.swf">
          <param name=quality value=high>
          <embed src="images/inter.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="776" height="100"></embed> 
        </object></td>
    </tr>
    <tr> 
      <td width="8" valign="top" background="images/spacer_left.gif" style="BACKGROUND-POSITION: top right" id="container"></td>
      <td valign="top" bgcolor="#E2E2E2" id="container">
        <table width="760" border="0" cellpadding="0" cellspacing="0" bgcolor="#E2E2E2">
          <tr>
            <td width="2" bgcolor="#FFFFFF"></td>
            <td width="1" bgcolor="#000000"></td>
            <td width="20"></td>
            <td width="90" valign="top" background="images/3d_balk_rest.gif" style="BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: repeat-y">
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="90" height="400">
                <param name="movie" value="images/balk.swf">
                <param name=quality value=high>
                <embed src="images/balk.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="90" height="400"></embed>
              </object></td>
            <td width="644" valign="top"></td>
            <td width="1" bgcolor="#000000"></td>
            <td width="2" bgcolor="#FFFFFF"></td>
          </tr>
        </table></td>
      <td width="8" valign="top" background="/images/spacer_right.gif" style="BACKGROUND-POSITION: top left" id="container"></td>
    </tr>
  </table>
</body>
</html>

edit: jaja ik weet het, ik moet mn css wat meer gebruiken, bloated code

[ Voor 25% gewijzigd door gavro op 11-03-2003 00:17 ]

Whoo-ah.

dinsdag 11 maart 2003 12:00

Acties:

gavro

Topicstarter

Wat ie nu dus volgens mij doet: hij pakt de <td> met id=container als volledige 100% zonder de atrek van 2 rijen erboven, dus je krijgt idd die 100% + 2 keer 100px....

Als oplossing lijkt mij om die laatste row ook weer in een tabel te pleuren ?
Of is er nog een betere oplossing ?

edit: ja fool, je hebt idd gelijk, maar ook gelijk een oplossing?

[ Voor 13% gewijzigd door gavro op 11-03-2003 12:04 ]

Whoo-ah.

donderdag 13 maart 2003 11:26

Acties:

gavro

Topicstarter

Verwijderd schreef op 10 maart 2003 @ 22:05:
code:
1
2
3
4
5
---
| kopje hoogte x pixels |
---------
| td met hoogte 100% |
---------

Niemand die hier een oplossing voor weet? Alleen opera beschouwt die td met 100% als 100% voor heel het scherm, verder pakken mozilla/ie het wel als 100% van de rest (dus met aftrek van de kop van 200 pix).

Plz?

Whoo-ah.

donderdag 13 maart 2003 11:51

Acties:

Willem

html 100%, body 100%?
margin? padding?

welke combinaties van bovenstaande heb je nog niet geprobeerd?

Motor (of auto) onderhoud bijhouden

donderdag 13 maart 2003 12:03

Acties:

gavro

Topicstarter

body staat al op 100%, html op100& heeft geen invloed, margin bij body & container hebben geen goed effect, padding levert alleen extra lege ruimte op....

Whoo-ah.

donderdag 13 maart 2003 12:33

Acties:

Willem

Zet anders eens wat online..

Motor (of auto) onderhoud bijhouden

donderdag 13 maart 2003 12:44

Acties:

Verwijderd

gavro_g schreef op 13 March 2003 @ 12:03:
...html op100& heeft geen invloed...

dat is niet waar. vergelijk

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type"
     content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {
    border: 1px solid blue;
    height: 100%;
}
body {
    border: 1px solid red;
    height: 100%;
}
</style>
</head>

<body>


</body>
</html>

maar eens met

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type"
     content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {
    border: 1px solid blue;
}
body {
    border: 1px solid red;
    height: 100%;
}
</style>
</head>

<body>


</body>
</html>

Als je de twee voorbeelden in MSIE bekijkt zul je zien dat ze hetzelfde resultaat geven, in Mozilla blijft de body echter minimale hoogte wanneer je de hoogte van het html element niet op 100% zet

[ Voor 15% gewijzigd door Verwijderd op 13-03-2003 12:45 ]

donderdag 13 maart 2003 12:54

Acties:

gavro

Topicstarter

mja ik bedoelde bij mij heet die html css code geen invloed, staat er namelijk wel bij

maarum: www.hostingco.nl/index3.php & www.hostingco.nl/index5.php

het feit dat mozilla het wel goed pak vind ik vreemd, me loves teh operah, maar dit kan ik niet hebben

Whoo-ah.