[css] 100% TD - Softwareontwikkeling

dinsdag 27 september 2005 22:52

Acties:

Topicstarter

Ik denk dat ik helemaal gek aan het worden ben ofzo, ik loop nu al 1.5 uur te kloten met een design waarbij InternetExplorer de hoogte van mijn TD niet accepteert terwijl de hoogte van mijn table en body ook 100% zijn. O gij alwetende tweakers, degene die de oplossing heeft zal ik persoonlijk heilig verklaren.

Hier een voorbeeld van het probleem uit mijn design

code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body,html { margin:0px; padding 0px; height: 100%; }
</style>
</head>
<body>
<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr >
    <td height="100" bgcolor="#999966">Dit moet 100 pixels zijn </td>
  </tr>
  <tr style="height: auto; overflow-x: auto; overflow-y:none;">
    <td bgcolor="#996666">Dit moet stretchen tot 100% </td>
  </tr>
</table>
</body>
</html>

[ Voor 44% gewijzigd door oogapp0ltje op 27-09-2005 23:40 ]

| To acknowledge what is known as known and what is not known as known is knowledge. |

dinsdag 27 september 2005 23:05

Acties:

Fuzzillogic

Cool

Je moet de height van de body ook 100% geven.

Maar zoals altijd, is IE een PITA. Ook met hoogtes van tabelcellen kun je er niet op vertrouwen. Vaak rekt IE de cellen "evenredig" uit, en niet alleen de cellen waarvan je geen hoogte hebt opgegeven.

En ik weet niet wat je met die tabel van plan bent, maar het is 'not done' om je layout met tabellen te maken. Daarvoor hebben we, ondanks IE, CSS

dinsdag 27 september 2005 23:07

Acties:

danslo

in je head:
<style type="text/css">
body,html { height: 100% }
</style>

(ben er laatst dus ook achter gekomen dat je html ook 100% moet maken

dinsdag 27 september 2005 23:10

Acties:

Borizz

Het zit hem waarschijnlijk in de html height 100% ja. Maar waarom gebruik je tabellen voor je opmaak? Hetzelfde resultaat is met behulp van CSS ook wel te bereiken. Tabellen zijn bedoelt om data in weer te geven niet om een pagina op te maken.

If I can't fix it, it ain't broken.

dinsdag 27 september 2005 23:16

Acties:

oogapp0ltje

Topicstarter

euhm... dat heb ik al in mn body tag staan (zie de broncode in mn eerste bericht).... daar zit het probleem dus helaas niet.....

[ Voor 23% gewijzigd door oogapp0ltje op 27-09-2005 23:17 ]

| To acknowledge what is known as known and what is not known as known is knowledge. |

dinsdag 27 september 2005 23:20

Acties:

danslo

Ravenof schreef op dinsdag 27 september 2005 @ 23:16:
euhm... dat heb ik al in mn body tag staan (zie de broncode in mn eerste bericht).... daar zit het probleem dus helaas niet.....

Ehh ja en in je broncode staat niks over html op 100%

dinsdag 27 september 2005 23:22

Acties:

Borizz

het html element is iets anders dan het body element

?

edit: cls was me net voor

[ Voor 23% gewijzigd door Borizz op 27-09-2005 23:22 ]

If I can't fix it, it ain't broken.

dinsdag 27 september 2005 23:28

Acties:

danslo

En zoiezo:
http://www.google.nl/sear...&btnG=Google+zoeken&meta=

Alleen al zoeken op: table height 100% krijg ik bij de 1e hit al een "problem". Tja..

dinsdag 27 september 2005 23:28

Acties:

oogapp0ltje

Topicstarter

Gelijk hebben jullie

Maar t werkt helaas nogsteeds niet

*KLIK*

ps. code boven nu aangepast.

| To acknowledge what is known as known and what is not known as known is knowledge. |

dinsdag 27 september 2005 23:29

Acties:

oogapp0ltje

Topicstarter

cls schreef op dinsdag 27 september 2005 @ 23:28:
En zoiezo:
http://www.google.nl/sear...&btnG=Google+zoeken&meta=

Alleen al zoeken op: table height 100% krijg ik bij de 1e hit al een "problem". Tja..

Mja... been there... done that.

| To acknowledge what is known as known and what is not known as known is knowledge. |

dinsdag 27 september 2005 23:31

Acties:

danslo

Dat komt door padding, en margin, probeer dit:

html,body
{
margin: 0px;
padding: 0px;
height: 100%
}

Ravenof schreef op dinsdag 27 september 2005 @ 23:29:
[...]

Mja... been there... done that.

Blijkbaar niet goed genoeg want als je op die eerste hit HELEMAAL naar beneden scrolled krijg je deze werkende oplossing

[ Voor 54% gewijzigd door danslo op 27-09-2005 23:31 ]

dinsdag 27 september 2005 23:40

Acties:

oogapp0ltje

Topicstarter

cls schreef op dinsdag 27 september 2005 @ 23:31:
Dat komt door padding, en margin, probeer dit:

html,body
{
margin: 0px;
padding: 0px;
height: 100%
}

[...]

Blijkbaar niet goed genoeg want als je op die eerste hit HELEMAAL naar beneden scrolled krijg je deze werkende oplossing

als je naar beneden scrollt krijg je idd dat stukje tekst te zien.... maar helaas geen werkende oplossing....

wederom *KLIK*

T probleem lijkt erg simpel... maar is het dus niet in IE

| To acknowledge what is known as known and what is not known as known is knowledge. |

dinsdag 27 september 2005 23:47

Acties:

Borizz

Misschien toch maar CSS gebruiken ipv tabellen?

HTML:

<!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>Untitled Document</title>
<style type="text/css">
    body,html { height: 100%; margin: 0; }
    #container { height: 100%; background-color: #996666; position: relative;}
    #header { height: 100px; background-color: #999966; position: absolute; width: 100%; top: 0; left: 0;}
    #content { margin-top: 100px; }
</style>
</head>
<body>
    <div id="container">
        <div id="header">
            Dit moet 100 pixels zijn
        </div>
        <div id="content">
            Dit moet stretchen tot 100%
        </div>
    </div>
</body>
</html>

If I can't fix it, it ain't broken.

dinsdag 27 september 2005 23:50

Acties:

danslo

Borizz schreef op dinsdag 27 september 2005 @ 23:47:
Misschien toch maar CSS gebruiken ipv tabellen?

HTML:

<!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>Untitled Document</title>
<style type="text/css">
    body,html { height: 100%; margin: 0; }
    #container { height: 100%; background-color: #996666; position: relative;}
    #header { height: 100px; background-color: #999966; position: absolute; width: 100%; top: 0; left: 0;}
    #content { margin-top: 100px; }
</style>
</head>
<body>
    <div id="container">
        <div id="header">
            Dit moet 100 pixels zijn
        </div>
        <div id="content">
            Dit moet stretchen tot 100%
        </div>
    </div>
</body>
</html>

Zit ik een hele tijd na te denken hoe ik dit met TABLES zou kunnen doen, lukte me het niet, wilde net hetzelfde als jou gaan posten

Nu ben jij eerder. Anyways, ik duik mn bedje in.

@TS: Ik raad je idd aan om div's met css te gebruiken, en dus geen frontpage/dreamweaver, wat je ook gebruikt atm

(Door untitled document en die automatische meta tag

)

woensdag 28 september 2005 00:00

Acties:

oogapp0ltje

Topicstarter

cls schreef op dinsdag 27 september 2005 @ 23:50:
[...]

Zit ik een hele tijd na te denken hoe ik dit met TABLES zou kunnen doen, lukte me het niet, wilde net hetzelfde als jou gaan posten Nu ben jij eerder. Anyways, ik duik mn bedje in.

@TS: Ik raad je idd aan om div's met css te gebruiken, en dus geen frontpage/dreamweaver, wat je ook gebruikt atm (Door untitled document en die automatische meta tag )

"Zit ik een hele tijd na te denken hoe ik dit met TABLES zou kunnen doen, lukte me het niet, wilde net hetzelfde als jou gaan posten"... mja... wat onhebbelijk he dat een ander wel een goed antwoord heeft

Persoonlijk, en waarschijnlijk velen met mij, hebben niets tegen het gebruik van dreamweaver voor het bewerken van designs (wat overigens niet valt te vergelijken met frontpage). Maar wel knap van je dat het was opgevallen dat ik het nog geen naampje heb gegeven en er 'Unitled document' staat.

Overigens kan je in Dreamweaver gewoon met CSS2 werken zoals in het voorbeeld van Borizz

[ Voor 11% gewijzigd door oogapp0ltje op 28-09-2005 00:05 ]

| To acknowledge what is known as known and what is not known as known is knowledge. |

woensdag 28 september 2005 00:01

Acties:

oogapp0ltje

Topicstarter

Borizz schreef op dinsdag 27 september 2005 @ 23:47:
Misschien toch maar CSS gebruiken ipv tabellen?

HTML:

<!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>Untitled Document</title>
<style type="text/css">
    body,html { height: 100%; margin: 0; }
    #container { height: 100%; background-color: #996666; position: relative;}
    #header { height: 100px; background-color: #999966; position: absolute; width: 100%; top: 0; left: 0;}
    #content { margin-top: 100px; }
</style>
</head>
<body>
    <div id="container">
        <div id="header">
            Dit moet 100 pixels zijn
        </div>
        <div id="content">
            Dit moet stretchen tot 100%
        </div>
    </div>
</body>
</html>

thanxxx... k ga het eens uitproberen hiermee.

| To acknowledge what is known as known and what is not known as known is knowledge. |

woensdag 28 september 2005 00:01

Acties:

disjfa

cls schreef op dinsdag 27 september 2005 @ 23:50:
[...]
@TS: Ik raad je idd aan om div's met css te gebruiken, en dus geen frontpage/dreamweaver, wat je ook gebruikt atm (Door untitled document en die automatische meta tag )

Ik dacht altijd dat html uit meer besond dan divs alleen.

Verder is het voorbeeld ook niet bepaald netjes. Als je dan gewoon op de body een achtergrond kleur zet en een header div met een andere achtergrond kleur geeft en de content gewoon compleet geen css opgeeft kom je op precies hetzelfde resultaat met 90% minder css en html.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 28 september 2005 00:07

Acties:

oogapp0ltje

Topicstarter

Toch blijft het wel merkwaardig dat IE zoiets simpels als dit niet doet, browsers als Firefox en Opera weergeven het design wel goed. Het lijkt me dat IE een afwijkende implementatie van W3C HTML gebruikt.

| To acknowledge what is known as known and what is not known as known is knowledge. |

woensdag 28 september 2005 00:08

Acties:

danslo

disjfa schreef op woensdag 28 september 2005 @ 00:01:
[...]

Ik dacht altijd dat html uit meer besond dan divs alleen.

Verder is het voorbeeld ook niet bepaald netjes. Als je dan gewoon op de body een achtergrond kleur zet en een header div met een andere achtergrond kleur geeft en de content gewoon compleet geen css opgeeft kom je op precies hetzelfde resultaat met 90% minder css en html.

Tuurlijk wel, maar je begrijpt me wel (hoop ik), ipv tables dus divs gebruiken

Ravenof schreef op woensdag 28 september 2005 @ 00:00:
[...]

"Zit ik een hele tijd na te denken hoe ik dit met TABLES zou kunnen doen, lukte me het niet, wilde net hetzelfde als jou gaan posten"... mja... wat onhebbelijk he dat een ander wel een goed antwoord heeft

Persoonlijk, en waarschijnlijk velen met mij, hebben niets tegen het gebruik van dreamweaver voor het bewerken van designs (wat overigens niet valt te vergelijken met frontpage). Maar wel knap van je dat het was opgevallen dat ik het nog geen naampje heb gegeven en er 'Unitled document' staat. Overigens kan je in Dreamweaver gewoon met CSS2 werken zoals in het voorbeeld van Borizz

Ik doelde meer op het wysiwyg gedeelte van die editors

[ Voor 43% gewijzigd door danslo op 28-09-2005 00:10 ]

woensdag 28 september 2005 00:15

Acties:

oogapp0ltje

Topicstarter

cls schreef op woensdag 28 september 2005 @ 00:08:
[...]

Tuurlijk wel, maar je begrijpt me wel (hoop ik), ipv tables dus divs gebruiken

[...]

Ik doelde meer op het wysiwyg gedeelte van die editors

omg. ben je nu nogsteeds wakker?
mja... met oogkleppen op denkt je direct aan WYSIWYG natuurlijk als ik pure html code post, maar in de context van mijn beginpost, mijn vraag en dit topic was mijn stelling twee posts naarboven gericht op TABLES en geen divjes. In de context van deze stelling had ik graag willen weten waarom MS afwijkt van W3C, maar met dergelijke posts als bovenstaande komt de discussie niet veel verder ben ik bang.

[ Voor 5% gewijzigd door oogapp0ltje op 28-09-2005 00:17 ]

| To acknowledge what is known as known and what is not known as known is knowledge. |

woensdag 28 september 2005 00:18

Acties:

disjfa

cls schreef op woensdag 28 september 2005 @ 00:08:
[...]
Tuurlijk wel, maar je begrijpt me wel (hoop ik), ipv tables dus divs gebruiken

Als je dat zo zegt kan je net zo goed tables gebruiken. Je kan elk topic hier nalezen dat er normaal met html omgegaan kan worden. Div`s zijn maar 1 soort tag. Er zijn veel meer tags om te gebruiken anders hadden ze html wel werken met divs genoemd.

Zoek maar een keer op semantiek.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 28 september 2005 00:21

Acties:

danslo

Ravenof schreef op woensdag 28 september 2005 @ 00:15:
[...]

omg. ben je nu nogsteeds wakker?
mja... met oogkleppen op denkt je direct aan WYSIWYG natuurlijk als ik pure html code post, maar in de context van mijn beginpost, mijn vraag en dit topic was mijn stelling twee posts naarboven gericht op TABLES en geen divjes. In de context van deze stelling had ik graag willen weten waarom MS afwijkt van W3C, maar met dergelijke posts als bovenstaande komt de discussie niet veel verder ben ik bang.

Nee ik dacht aan WYSIWYG toen ik zag dat ie met Dreamweaver was gebakken

Klopt blijkbaar niet dus, mijn excuses.

@ Boven mij, agreed

En nu ga ik écht slapen.

woensdag 28 september 2005 01:10

Acties:

RAZORDUDE

aka MARAUD3R

Je geeft de <tr> een height waarde moet dat niet in de <td> staan?

[ www.coredamage.com ] - [ Z mod (W40k:DOW) ]

woensdag 28 september 2005 01:19

Acties:

equationunequal

RAZORDUDE schreef op woensdag 28 september 2005 @ 01:10:
Je geeft de <tr> een height waarde moet dat niet in de <td> staan?

Yep. Daarnaast is height depricated en is het handiger om alles met CSS te stylen, maar dat is hierboven al opgemerkt...

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

woensdag 28 september 2005 02:06

Acties:

Calamor

Met de nieuwe IE zelf het wel gaan want die gaan ze wel naar de standaart maken. En dan zullen heel wat websites die IE only zijn er niet meer uit zien. Maar het is wel gek ja dat het alleen maar 50% 50% doen.

woensdag 28 september 2005 09:36

Acties:

crisp

Devver

Pixelated

Als je desondanks toch een pixel-precieze layout in tables wilt maken kijk dan ook eens naar de CSS property table-layout
Bij het standaard table-model zijn height en width van cellen slechts richtlijnen voor de browser.

[ Voor 3% gewijzigd door crisp op 28-09-2005 09:36 ]

Intentionally left blank

Pagina: 1

Reageer