Ik probeer kladblok na te bouwen in een browser en loop daarbij op 2 style-puntjes vast.
De eerste is een probleem met de hoogte en breedte die ik op 100% wil hebben
In Mozilla (Firebird 0.7) doet ie beide fout (rekt ze te ver uit)
en in IE (5.0) rekt ie 'm alleen vertikaal te ver uit.
Het tweede probleem is dat in Mozilla het menu (File, Edit, etc.) en de textarea naast elkaar komen te staan, ipv onder elkaar.
Screenshotjes:
Mozilla:
IE:
Ik komt (volgens mij) doordat die textarea op 100% staat en dat ie die op schermgrootte wil uitrekken waardoor wat er om heen staat buiten de schermgrootte valt. Nou ben ik al aardig wat aan stoeien geweest me die stylesheet, maar het wordt er dan eigenlijk alleen maar erger op. De enige oplossing die ik kon bedenken was alles absoluut definieren, maar dat vind ik eigenlijk niet zo mooi. En bovendien werkt dat niet als je de grootte van het scherm aanpast. Dus ik zoek naar een 'relatieve' oplossing.
(btw, de naam (in die blauwe balk) komt uiteindelijk nog in de balk van de browser te staan
)
De eerste is een probleem met de hoogte en breedte die ik op 100% wil hebben
In Mozilla (Firebird 0.7) doet ie beide fout (rekt ze te ver uit)
en in IE (5.0) rekt ie 'm alleen vertikaal te ver uit.
Het tweede probleem is dat in Mozilla het menu (File, Edit, etc.) en de textarea naast elkaar komen te staan, ipv onder elkaar.
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title></title> <link href="/notepad.css" rel="stylesheet" type="text/css"> <script language="javaScript" type="text/javascript" src="/notepad.js"></script> </head> <body onLoad="det_input_value();"> <div id="FileMenu"> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);" onClick="nieuw();">New</div> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);" onClick="openen();">Open</div> <div class="menuNode"><i>Save</i></div> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);" onClick="bewaren_als();">Save As</div> <hr> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Print</div> <hr> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Close</div> </div> <div id="EditMenu"> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Cut</div> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Copy</div> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Paste</div> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Remove</div> <hr> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Search</div> <hr> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Select All</div> </div> <div id="ToolsMenu"> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);" onClick="changeFont();">Font Type</div> </div> <div id="HelpMenu"> <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Info</div> </div> <form action="/np.php" method="post" name="NotepadFrm" id="NotepadForm" style="margin: 0px;"> <div id="outerEdge"> <div id="header"> Naamloos - Kladblok </div> <div id="menu"> <div id="File" onMouseOver="highlight('File');" onMouseOut="lowlight('File');" onClick="show_menu('File');">File</div> <div id="Edit" onMouseOver="highlight('Edit');" onMouseOut="lowlight('Edit');" onClick="show_menu('Edit');">Edit</div> <div id="Tools" onMouseOver="highlight('Tools');" onMouseOut="lowlight('Tools');" onClick="show_menu('Tools');">Format</div> <div id="Help" onMouseOver="highlight('Help');" onMouseOut="lowlight('Help');" onClick="show_menu('Help');">Help</div> </div> <textarea id="input" name="Body" onFocus="hide_menu('active');"></textarea> </div> <input type="hidden" name="Subject" value=""> </form> </body> </html> |
Cascading Stylesheet:
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| body { margin: 0px; padding: 0px; font-family: verdana, arial; font-size: 8pt; color: black; letter-spacing: -1px; } #outerEdge { width: 100%; height: 100%; border-left: 1px solid #DDD; border-top: 1px solid #DDD; border-right: 1px solid #AAA; border-bottom: 1px solid #AAA; background-color: #CCC; padding: 2px; } #header { width: 100%; padding: 3px 20px; background-color: darkblue; color: white; font-weight: bold; } #menu { width: 100%; padding: 3px 6px 4px; } #input { width: 100%; height: 100%; background-color: white; padding: 1px; font-family: fixedsys, lucida console; } #File, #Edit, #Tools, #Help { width: 60px; float: left; border: 1px solid #CCC; cursor: default; } #FileMenu, #EditMenu, #ToolsMenu, #HelpMenu { display: none; position: absolute; top: 41px; width: 100px; padding: 1px; border-left: 2px solid #EEE; border-top: 2px solid #EEE; border-right: 2px solid #333; border-bottom: 2px solid #333; background-color: #CCC; } #FileMenu { left: 8px; } #EditMenu { left: 68px; } #ToolsMenu { left: 128px; } #HelpMenu { left: 188px; } .menuNode { padding: 3px 10px; } /* values for notepad.open.php */ #openFileTable { width: 100%; border: 2px solid #000; } #openFileTable TD { padding: 1px 3px 1px; font-size: 8pt; font-family: ms sans serif, verdana, arial; letter-spacing: 0px; } .openFileTableMenuTD { font-size: 9pt; font-weight: bold; background-color: #CCC; border-left: 2px solid #EEE; border-top: 2px solid #EEE; border-right: 2px solid #000; border-bottom: 2px solid #000; } |
Screenshotjes:
Mozilla:

IE:

Ik komt (volgens mij) doordat die textarea op 100% staat en dat ie die op schermgrootte wil uitrekken waardoor wat er om heen staat buiten de schermgrootte valt. Nou ben ik al aardig wat aan stoeien geweest me die stylesheet, maar het wordt er dan eigenlijk alleen maar erger op. De enige oplossing die ik kon bedenken was alles absoluut definieren, maar dat vind ik eigenlijk niet zo mooi. En bovendien werkt dat niet als je de grootte van het scherm aanpast. Dus ik zoek naar een 'relatieve' oplossing.
(btw, de naam (in die blauwe balk) komt uiteindelijk nog in de balk van de browser te staan