Statistik  Mitglieder gesamt: 69336 Mitglieder online: 0 Gäste online: 2 mehr...
Anzeige
| Thread: Unerklärlicher Fehler (CSS|HTML|PHP)
 08.09.2009 21:15 Uhr
|
|
|
|
|
Hallo,
ich habe mehrere Div Boxen in Links eingeschlossen. Wenn ich ein Hintergrundbild per style="..." einbinde funktioniert das auch soweit, solange ich den Dateinamen nicht automatisch generiere. Dann funktioniert der Link bei der Letzten Div Box nicht.
HIer der Link: http://joman92.ath.cx/mount
Und hier der Code:  php: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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Laufwerke: <?php echo date("d.m.Y H:i",filectime('disk.txt'));?>
</title>
<style type="text/css">
a
{
text-decoration : none;
color : #000000;
}
div.partition
{
background-color : #BFBFBF;
float : left;
height : 30px;
border : 1px solid blue;
margin : 1px;
overflow : hidden;
text-align : center;
padding-top : 8px;
}
div.box
{
position : absolute;
top : 0px;
left : 0px;
display : none;
width : 110px;
height : 117px;
padding-left : 25px;
padding-right : 25px;
padding-top : 15px;
background-image : url('tooltip.png');
float : left;
font-size : 11px;
}
div.close
{
position : absolute;
right : 10px;
top : 10px;
}
</style>
<script language="javascript1.2" type="text/javascript"><!--
// find out if ie runs in quirks mode
//
var docEl = (
typeof document.compatMode != "undefined" &&
document.compatMode != "BackCompat"
)? "documentElement" : "body";
var xPos;
var yPos;
// register event
// capture it for nc 4x (ok it's a dino)
//
function init_mousemove() {
if(document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = dpl_mouse_pos;
}
function dpl_mouse_pos(e) {
// position where mousemove fired
//
xPos = e? e.pageX : window.event.x;
yPos = e? e.pageY : window.event.y;
// for ie add scroll position
//
if (document.all && !document.captureEvents) {
xPos += document[docEl].scrollLeft;
yPos += document[docEl].scrollTop;
}
// display position
//
//document.feld.ausg.value = "Left = " + xPos + " : Top = " + yPos;
// for the dino pass event
//
if (document.layers) routeEvent(e);
}
function display(opt,drive,partition){
if(opt)
{
document.getElementById("box").style.top = yPos;
document.getElementById("box").style.left = xPos;
var http = createRequestObject();
http.open('get', 'box.php?drive='+drive+'&partition='+partition);
http.onreadystatechange = function() {handleResponse(http);}
http.send(null);
document.getElementById("box").style.display = "block";
}
else
{
document.getElementById("box").style.display = "none";
}
}
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
function handleResponse(http) {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
function mount(drive)
{
mountpoint = prompt("Bitte geben Sie einen Mountpoint an:", "/mnt/"+drive);
var http = createRequestObject();
http.open('get', 'ajax_mount.php?drive='+drive+'&mount='+mountpoint);
http.onreadystatechange = function() {mountResult(http)}
http.send(null);
document.getElementById("box").style.display = "none";
}
function umount(drive)
{
var http = createRequestObject();
http.open('get', 'ajax_mount.php?drive='+drive);
http.onreadystatechange = function() {mountResult(http)}
http.send(null);
document.getElementById("box").style.display = "none";
}
function mountResult(http) {
if(http.readyState == 4){
alert(http.responseText);
}
}
--></script>
</head>
<body onload="init_mousemove()">
<h1>Laufwerke</h1><!--<form style="position:fixed" name="feld"><input type="text" name="ausg"></form>-->
<div class="box" id="box">Fehler</div>
<table>
<?php
include('mount_func.php');
$disk=file_get_contents('disk.txt');
$disk=get_drives($disk);
for($a=1;$a<count($disk);$a++)
{
echo '<tr><td>';
echo get_device('Name',$disk[$a]);
echo ' '.round_size(get_device('Size',$disk[$a]));
echo "\n";
echo '</td></tr>';
echo '<tr><td>';
echo '<div style="background-color: #ABABAB; width: 1200px; height: 40px; padding: 5px;">'."\n";
$partitions=get_device('Partition',$disk[$a]);
$size=1200-(count($partitions)*2);
$multi=$size/(get_device('Size',$disk[$a]));
for ($b=0;$b<count($partitions);$b++)
{
$width = round(get_partition('Size',$partitions[$b])*$multi-2);
$name = get_partition('Name',$partitions[$b]);
$filled = round(get_partition('Used',$name)*$multi);
$image = 'image_'.$width.'_'.$filled.'.png';
echo '<a href="javascript:display(true,'.$a.','.$b.')" title="'.$name.' ('.round_size(get_partition('Size',$partitions[$b])).')">';
echo '<div style="width: '.$width.'px; background-image: url('.$image.');" class="partition">'.get_partition('Name',$partitions[$b]).' ('.round_size(get_partition('Size',$partitions[$b])).')</div>';
echo '</a>'."\n";
}
echo '</div>';
echo '</td></tr>';
echo '<tr><td> </td></tr>';
}
$partitions=(get_device('Partition',$disk[1]));
get_partition('Name',$partitions[7]);
get_partition('Size',$partitions[7]);
?>
</table>
<?php ?>
</body>
</html> |
Der Entsprechende Teil beginnt bei Zeile 177 (for Schleife)
Edit:// also wenn ich $width und $filled durch natürliche Zahlen ersetze geht es.
2 mal bearbeitet |
|
08.09.2009 21:32 Uhr
|
|
|
|
|
Zitat:
ich habe mehrere Div Boxen in Links eingeschlossen
An dieser Stelle können wir schon aufhören.
Innerhalb von Links dürfen keine Div-Boxen sein laut Spezifikation.
Mach den Code mal valide, dann reden wir über etwaige Styling-Probleme gerne weiter.
LG, bmk.
1 mal bearbeitet bmk: 08.09.2009, 21:32 Uhr |
|
08.09.2009 21:35 Uhr
|
|
|
|
|
Hast du einen Vorschlag wie ich das dann stattdessen lösen kann?
(Ich habe den Code mal umgestellt, damit du siehst, wie ich es gerne hätte)
Edit:// Habs mit onclick gelöst
Edit2:// Wie bekomme ich diese Hand da hin? Wie sie bei einem Link normalerweise ist?
2 mal bearbeitet |
|
08.09.2009 22:04 Uhr
|
|
|
|
|
___________________________
o
L_
OL
This is Schäuble.
Copy Schäuble into your signature.
To help him on his way to Überwachungsstaat.
|
|
08.09.2009 22:06 Uhr
|
|
|
|
|
Danke 
Wenn mir jetzt noch jemand erklären kann, warum das Positionsscipt nicht funktioniert, wenn ich den Doctype auf XHTML Strict setze?
|
|
09.09.2009 00:34 Uhr
|
|
|
|
|
Hi,
meinst du damit das hier? Also nicht dass ich jetzt im Code was übersehen hab.
Hm...
- <!-- --> hast du bestimmt schon entfernt
- bei <form> fehlt method="post" oder method="get"
- weiß nicht ob die Angabe von action="" (Zieladresse) pflicht ist, glaube aber schon
- <input type="text" name="ausg"> hier fehlt der Backslash am Schluss für XHTML
Also hier mein Vorschlag: HTML:1
2
3
| <form action="" method="post" style="position:fixed" name="feld">
<input type="text" name="ausg" />
</form> |
Mit freundlichen Grüßen,
Alex .
1 mal bearbeitet ___________________________
:)
|
|
09.09.2009 14:26 Uhr
|
|
|
|
|
Nein, das meinte ich nicht. (Weiß auch nicht mehr, was dieses Formular bringen sollte^^)
Wenn du auf ein Div-Element Klickst, wird dort ein Tooltip angezeigt, und zwar genau da, wo du hin geklickt hast.
Wenn ich jetzt die Doctype Definition am Anfang des Codes einsetze, erscheint das Tooltip immer links oben in der Ecke.
|
|
09.09.2009 15:53 Uhr
|
|
|
|
|
Hallo
Du hattest vorhin etwas erwähnt, dass was nicht mehr funktioniert, wenn du den DOCTYPE auf strict setzt.
Wieso strict? Zum Angeben?
DOCTYPEs
Transitional wäre denke ich passender ;)
@offtopic
Ein Forenpost, von einem etwas anderen User - hab mich halb totgelacht, als ich das gelesen hatte ^^ (es geht um weed)
LG
___________________________
Auf cybton.com ist echt immer Verlass
|
|
09.09.2009 17:09 Uhr
|
|
|
|
|
Mit Transitional geht es auch net: http://joman92.ath.cx/mount
Die Box erscheint dann nicht mehr am Mauszeiger 
Diese beiden Zeilen scheinen nicht richtig ausgeführt zu werden: javascript:1
2
| document.getElementById("box").style.top = yPos;
document.getElementById("box").style.left = xPos; |
1 mal bearbeitet |
|
09.09.2009 22:16 Uhr
|
|
|
|
|
Ich habe jetzt schon den ganzen Tag über versucht, auf diese Seite zu kommen.
Erfolglos ....
Aber was mir sofort auffällt ist,
Zitat von CSS4You:
Die Angaben left, right, top, bottom legen die Position eines Elements fest. Voraussetzung dafür ist die Angabe der Positionsart mit absolute, relative oder fixed. Hast du es denn in etwa so? CSS:1
2
3
4
5
6
| #box
{
height: 200px;
position: absolute;
width: 500px;
} |
LG
//EDIT-1
Achja ... speicherst du in dem Javascript auch in der Variable "yPos" auch schön am Ende noch "px"? Weil das sehe ich momentan nicht ...
3 mal bearbeitet ___________________________
Auf cybton.com ist echt immer Verlass
|
|
|
nach oben
