Toon posts:

[xhtml] strict dtd en alternatief voor "onresize"

Pagina: 1
Acties:

donderdag 20 maart 2003 00:51

Acties:
  • slager
  • Registratie: November 2000
  • Laatst online: 22:49

slager

Topicstarter
Ik ben een beetje aan het hobby'en met een site en wil deze xhtml strict hebben.

Ik wil de volledige hoogte van de pagina benutten. Dit heeft als gevolg dat als het browservenster geresized wordt, dat dan de grootte van een paar div's aangepast moet worden. Dit lukt opzich met
HTML:
1

<body onload="init();" onresize="init()">

In init() worden de div-hoogtes aangepast.

Alleen is die onresize volgens de strict-dtd geen attribuut van body. En voldoet de pagina op deze manier niet aan de w3c-standaard.

Ik heb gezocht met Google, en daar vond ik geen alternatief. Ook op GoT is nog geen alternatief te vinden, de enige topics die ik er over kon vinden waren XHTML validatie en [rml][ standaard] onresize event[/rml], maar hier wordt ook geen oplossing aangedragen.

Mijn vraag is nu of hier iemand een oplossing voor heeft, dus bij het resizen van het browservenster een functie aanroepen op een manier die voldoet aan de xhtml strict standaard.

donderdag 20 maart 2003 01:37

Acties:

Verwijderd

window.onresize=init;
En zo kun je allerlei attibuten en event handlers die verboden zijn in xhtml strict alsnog via javascript toevoegen. Het is alleen een beetje zinloos; waarom zou je dan uberhaupt xhtml strict bezig willen zijn vraag ik me dan altijd af.

donderdag 20 maart 2003 09:05

Acties:
  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 22-06 13:51

Clay

cookie erbij?

In xml beschrijft een "onresize" attribuut van een body node natuurlijk niets zinnigs. xhtml verbiedt ze in je html source, maar natuurlijk niet in script. Script is immers medium specifiek. Het zou bijvoorbeeld bij printen al totaal geen zin hebben.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 20 maart 2003 10:31

Acties:
  • slager
  • Registratie: November 2000
  • Laatst online: 22:49

slager

Topicstarter
Thanks, het werkt met window.onresize=init;

Dit stond btw ook wel in [rml][ standaard] onresize event[/rml], en dit heb ik gisteravond ook al geprobeerd, maar toen werkte het niet? Zal wel iets verkeerd ingetoetst hebben...

Waarom is dit btw een beetje zinloos? Omdat je opmaak eigenlijk alleen met CSS hoort te doen?

donderdag 20 maart 2003 10:39

Acties:

Verwijderd

Quasily schreef op 20 maart 2003 @ 10:31:Waarom is dit btw een beetje zinloos? Omdat je opmaak eigenlijk alleen met CSS hoort te doen?
Als je je DIV-height in % opgeeft moet je een heel eind kunnen komen. Wat probeer je precies te doen?

donderdag 20 maart 2003 10:46

Acties:
  • slager
  • Registratie: November 2000
  • Laatst online: 22:49

slager

Topicstarter
Ik probeer een paar div-jes de volledige hoogte van de pagina te geven, minus een rand van 20px; En als je de hoogte in % opgeeft, wordt die rand niet precies 20px. Maar ik zit net te bedenken dat ik misschien ook wat kan proberen met een div eromheen en een padding van 20px.

donderdag 20 maart 2003 20:35

Acties:

Verwijderd

Quasily schreef op 20 maart 2003 @ 10:46:
Ik probeer een paar div-jes de volledige hoogte van de pagina te geven, minus een rand van 20px; En als je de hoogte in % opgeeft, wordt die rand niet precies 20px. Maar ik zit net te bedenken dat ik misschien ook wat kan proberen met een div eromheen en een padding van 20px.
Daar heb ik ook niet direct een oplossing voor. Ik zal er even over nadenken.

donderdag 20 maart 2003 20:50

Acties:

Verwijderd

misschien begrijp ik het niet goed maar dit werkt voor mij:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<html>
 <head>
<title>test 100% minus 20px</title>
<style type="text/css">
html {
    height:100%;
}
body {
    height:100%;
    margin:0px;
    overflow:hidden;
}
div {
    top:20px;
    position:absolute;
    width:150px;
    left:20px;
    background-color:#ff0000;
    height:100%

}
</style>
</head>
<body>
<div></div>
</body>
</html>

donderdag 20 maart 2003 20:59

Acties:

Verwijderd

voeg maar eens een xhtml strict dtd toe ;)

donderdag 20 maart 2003 21:35

Acties:

Verwijderd

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
<title>test 100% minus 20px</title>
<style type="text/css">
html {
    height:100%;
}
body {
    height:100%;
    margin:0px;
    overflow:hidden;
}
div {
    top:20px;
    position:absolute;
    width:150px;
    left:20px;
    background-color:#ff0000;
    height:100%

}
</style>
</head>
<body>
<div></div>
</body>
</html>


werkt ook, zowel in IE 6 als in Mozilla 1.3

[ Voor 18% gewijzigd door Verwijderd op 20-03-2003 21:56 ]

donderdag 20 maart 2003 22:46

Acties:
  • slager
  • Registratie: November 2000
  • Laatst online: 22:49

slager

Topicstarter
Maar ik wil ook aan de onderkant en rechterkant een rand van 20px, en dat lukt niet op deze manier...

vrijdag 21 maart 2003 09:03

Acties:
  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 22-06 13:51

Clay

cookie erbij?

zo dan?
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>test 100% minus 20px</title>
    <style type="text/css">
    html {
        height:100%;
    }

    body {
        height:100%;
        margin:0px;     
    }

    .outsider {
        height:100%;
        padding:20px;
        -moz-box-sizing:border-box;
    }

    .insider {
        height:100%;
        width:100%;
        background:#f0f0f0;
    }
    </style>
</head>

<body>
<div class="outsider">
    <div class="insider">
    woei
    </div>
</div>

</body>
</html>

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 21 maart 2003 10:47

Acties:
  • slager
  • Registratie: November 2000
  • Laatst online: 22:49

slager

Topicstarter
Dat werkt inderdaad! Bedankt voor de moeite, ik ga dit eens in mijn pagina toepassen.

vrijdag 21 maart 2003 16:09

Acties:

Verwijderd

nice clay, was al met iets anders bezig maar dat werkt dus voor geen meter in IE (zal niet) die oplossing van jou is echter zeer relaxt
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<html>
 <head>
<title>test 100% minus 20px</title>
<style type="text/css">
html {
    height:100%;
}
body {
    height:100%;
    margin:0px;
    overflow:hidden;
}
div {
    top:20px;
    position:absolute;
    width:auto;
    left:20px;
    right:20px;
    background-color:#ff0000;
    height:auto;
    bottom:20px;

}
</style>
</head>
<body>
<div></div>
</body>
</html>

zaterdag 22 maart 2003 11:14

Acties:
  • AsBest
  • Registratie: Juli 2001
  • Laatst online: 10-05-2024

AsBest

Volgens mij kan dit nog simpeler:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      body {
        margin: 20px;
      }
      div {
        height: 100%;
        background-color: #ff0000;
      }
    </style>
  </head>
  <body>
    <div> Test
    </div>
  </body>
</html>

zaterdag 22 maart 2003 13:54

Acties:
  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 22-06 13:51

Clay

cookie erbij?

ja, maar helaas werkt dat niet in Mozilla :)

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

Pagina: 1
Reageer