LLM
11-20-2008, 09:48 AM
I'm very new to CSS and Web Development, and desperately need help.
I need help designing the following:
Thursday 11/20/2008 Friday 11/21/2008
ML | AH | JS | AP | RT ML | AH | JS | AP | RT
7:00 7:00 7:00 7:00 7:00 7:00 7:00 7:00 7:00 7:00
7:30...
8:00...
8:30 ...
The ML|AH|JS| row is dynamic, I don't know how may cells there will be. Each of these should fall directly below each day.
Then a row under each cell....
7:00
7:30
8:00
8:30
The data will expand beyond the Monitors width. All my attempts the days go across then wrap after 2 or 3 day. Also, getting strange spaces in the time grid. which throws everything off.
I've tried using the float, positioning and various other things.
@charset "utf-8";
/* CSS Document */
body,td,th {
font-family:"Lucida Sans",Arial;
font-size:12px;
}
body {
background-color:#000000;
}
table {
display:table;
/* height:100%;
width:100%;*/
}
row {
display:table-row;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 5000px;
}
.cell {
display:table-cell;
}
.machine {
display:table-cell;
width:35px;
height:20px;
/* font-size:12px;*/
text-align:center;
font-size:12px;
border-collapse:collapse;
border-left:1px;
border-top: 1px;
border-right: 1px;
}
.dowdetails {
display:table-cell;
width:35px;
height:35px;
text-align:center;
font-size:6px;
border-collapse:collapse;
border-left:1px white dotted;
border-top: 1px white dotted;
border-right: 1px white dotted;
}
.dthdr {
display:table-cell;
height:32px;
text-align:center;
background-color:#4682B4;
font-size:14px;
padding:3px;
border-style:outset;
}
.tbldtl {
display:table;
/* width:100%;
height:100%;*/
background-color:#000000;
}
.dowdtlinput {
width:35px;
height:35px;
text-align:center;
font-size:9px;
}
**************************************
<form name="core" method="post">
<div class="container">
<div class="table">
<div class="row">
<!--
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
EACH DAY
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//-->
<% for i = 1 to 7
%>
<div class="table" style="display:table-cell;">
<%
dim selecteddt
dim dow
dim loop_mach, Num_Machines, Holiday
dowoftheweek = request.querystring("d")
mo = request.querystring("m")
sf = request.querystring("s")
if mo = "" or mo = "all" Then
mo = 0
end if
if sf = "" or sf = "all" Then
sf = 0
end if
if i = 1 then
if IsDate(request.form("mydate1")) Then
selecteddt = request.form("mydate1")
else
selecteddt = Date()
end if
Else
selecteddt = FormatDateTime(DateAdd("d",1, selecteddt),vbShortDate)
End if
dim dayoftheweek
dowoftheweek = Weekday(selecteddt)
If dowoftheweek = 2 then
dowName = "Monday"
elseif dowoftheweek = 3 then
dowName = "Tuesday"
elseif dowoftheweek = 4 then
dowName = "Wednesday"
elseif dowoftheweek = 5 then
dowName = "Thursday"
elseif dowoftheweek = 6 then
dowName = "Friday"
elseif dowoftheweek = 7 then
dowName = "Saturday"
else
dowName = "Sunday"
end if
'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
'Get the machine ids (two chars) and the number of machines and the number of machines
'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
cnt = rs_m("cnt")
loop_mach = 1
Dim dtwidth
dtwidth = 35 * cnt
%>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Each Day
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//-->
<div class="row">
<div class="dthdr" style="width:<%=dtwidth%>px;"><strong><%=dowName &" "&selecteddt%></strong></div>
</div>
<!--
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
MACHINE LEGEND
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<div class="row">
<%
'LOOP thru the machines and write the id in the color it's defined as in the table
Do Until rs_m.EOF
a_machs(loop_mach) = rs_m("Name")
a_machid(loop_mach) = rs_m("Machine_ID")
%>
<div class="machine" style="padding-top:3px;background-color:#<%=rs_m("Hex_Value")%>;" id="<%=rs_m("Machine_ID")%>" onMouseOver="show(event,'<%=rs_m("Name")%>')" onMouseOut="hide('<%=rs_m("Name")%>')"> <%=rs_m("Mach_Code")%>
</div>
<%
loop_mach = loop_mach + 1
rs_m.MoveNext()
Loop
rs_m.Close()
set rs_m = nothing
%>
</div>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
GRID
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<%
loop_cnt = 1
stime = "07:00" 'Starts at 7:00 AM
etime = "7:29"
Do Until loop_cnt > 48
loop_mach = 1
%>
<div class="row">
<% Do Until loop_mach > Num_Machines
Mach_Name = a_machs(loop_mach)
Mach_ID = a_machid(loop_mach)
if not rs_dtl.eof Then
<div class="dowdetails" style="background-color:#<%=rowcolor%>;" id="t-m<% =Mach_Name %>-<% =stime %>"><input class="dowdtlinput" type="text" id="m<% =Mach_Name %>-'<%=selecteddt%>'-<% =stime %>" name="m<% =Mach_Name %>-'<%=selecteddt%>'-<% =stime %>" style="color:#FFFFFF;background-color:#<%=rs_dtl("Hex_Value")%>" value="<%=rs_dtl("Op_Initials")%>" onMouseOut="hidetm('<%=stime%>')" onMouseDown="f_showdtls('<%=Mach_ID%>','<%=selecteddt%>','<% =stime%>','<%=dayoftheweek%>','<%=Core_ID%>')"/> </div>
<% end if
loop_mach = loop_mach + 1
Loop 'End Loop for number machines
%>
</div>
<%
stime = FormatDateTime(DateAdd("n",30,selecteddt),4)
etime = FormatDateTime(DateAdd("n",30,edt),4)
selecteddt = FormatDateTime(selecteddt,2) & " "& FormatDateTime(stime,4)
edt = FormatDateTime(selecteddt,2) &" "& FormatDateTime(etime,4)
loop_cnt = loop_cnt + 1
Loop 'End Loop times
rs_dtl.Close()
set rs_dtl = nothing
%>
<!-- legend -->
<%
sql = "SELECT Distinct (select Count(m1.Machine_ID))"
rs_m.Source = sql
rs_m.Open()
Num_Machines = clng(rs_m("cnt"))
loop_mach = 1
redim a_machs(0)
redim preserve a_machs(ubound(a_machs) + Num_Machines)
a_machs(0) = 0
Do Until rs_m.EOF
a_machs(loop_mach) = rs_m("Machine_ID")
%>
<div class="machine" id="<%=rs_m("Machine_ID")%>" style="border-bottom:1px black solid;padding-top:3; background-color:#<%=rs_m("Hex_Value")%>;" onMouseOver="show(event,'<%=rs_m("Name")%>')" onMouseOut="hide('<%=rs_m("Name")%>')"><%=rs_m("Mach_Code")%>
</div>
<%
loop_mach = loop_mach + 1
rs_m.MoveNext()
Loop
rs_m.Close()
set rs_m = nothing
%>
<div class="row">
<div class="dthdr" style="width:<%=dtwidth%>px;"><strong><%=dowName &" "&FormatDateTime(selecteddt,vbShortDAte)%></strong></div>
</div>
<input type="hidden" id="framesdate" name="framesdate" value="<% =fromtherecordset %>" />
<input type="hidden" id="dayofweek" name="dayofweek" value="<% =dayoftheweek %>" />
<input type="hidden" id="framewidth" name="framewidth" value="<% =dayframewidth %>" />
<input type="hidden" id="recordthis" name="recordthis" />
<input type="hidden" id="core_id" name="core_id" value="<% =Core_ID%>" />
<input type="hidden" id="recordthis" name="recordthis" />
<input type="hidden" id="cwidth" name="cwidth" value = "<%=CW%>" />
<!--
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
END THE LOOP OF EACH DAY
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//-->
</div>
<%
next
%>
</div>
</div>
</form>
I need help designing the following:
Thursday 11/20/2008 Friday 11/21/2008
ML | AH | JS | AP | RT ML | AH | JS | AP | RT
7:00 7:00 7:00 7:00 7:00 7:00 7:00 7:00 7:00 7:00
7:30...
8:00...
8:30 ...
The ML|AH|JS| row is dynamic, I don't know how may cells there will be. Each of these should fall directly below each day.
Then a row under each cell....
7:00
7:30
8:00
8:30
The data will expand beyond the Monitors width. All my attempts the days go across then wrap after 2 or 3 day. Also, getting strange spaces in the time grid. which throws everything off.
I've tried using the float, positioning and various other things.
@charset "utf-8";
/* CSS Document */
body,td,th {
font-family:"Lucida Sans",Arial;
font-size:12px;
}
body {
background-color:#000000;
}
table {
display:table;
/* height:100%;
width:100%;*/
}
row {
display:table-row;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 5000px;
}
.cell {
display:table-cell;
}
.machine {
display:table-cell;
width:35px;
height:20px;
/* font-size:12px;*/
text-align:center;
font-size:12px;
border-collapse:collapse;
border-left:1px;
border-top: 1px;
border-right: 1px;
}
.dowdetails {
display:table-cell;
width:35px;
height:35px;
text-align:center;
font-size:6px;
border-collapse:collapse;
border-left:1px white dotted;
border-top: 1px white dotted;
border-right: 1px white dotted;
}
.dthdr {
display:table-cell;
height:32px;
text-align:center;
background-color:#4682B4;
font-size:14px;
padding:3px;
border-style:outset;
}
.tbldtl {
display:table;
/* width:100%;
height:100%;*/
background-color:#000000;
}
.dowdtlinput {
width:35px;
height:35px;
text-align:center;
font-size:9px;
}
**************************************
<form name="core" method="post">
<div class="container">
<div class="table">
<div class="row">
<!--
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
EACH DAY
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//-->
<% for i = 1 to 7
%>
<div class="table" style="display:table-cell;">
<%
dim selecteddt
dim dow
dim loop_mach, Num_Machines, Holiday
dowoftheweek = request.querystring("d")
mo = request.querystring("m")
sf = request.querystring("s")
if mo = "" or mo = "all" Then
mo = 0
end if
if sf = "" or sf = "all" Then
sf = 0
end if
if i = 1 then
if IsDate(request.form("mydate1")) Then
selecteddt = request.form("mydate1")
else
selecteddt = Date()
end if
Else
selecteddt = FormatDateTime(DateAdd("d",1, selecteddt),vbShortDate)
End if
dim dayoftheweek
dowoftheweek = Weekday(selecteddt)
If dowoftheweek = 2 then
dowName = "Monday"
elseif dowoftheweek = 3 then
dowName = "Tuesday"
elseif dowoftheweek = 4 then
dowName = "Wednesday"
elseif dowoftheweek = 5 then
dowName = "Thursday"
elseif dowoftheweek = 6 then
dowName = "Friday"
elseif dowoftheweek = 7 then
dowName = "Saturday"
else
dowName = "Sunday"
end if
'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
'Get the machine ids (two chars) and the number of machines and the number of machines
'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
cnt = rs_m("cnt")
loop_mach = 1
Dim dtwidth
dtwidth = 35 * cnt
%>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Each Day
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//-->
<div class="row">
<div class="dthdr" style="width:<%=dtwidth%>px;"><strong><%=dowName &" "&selecteddt%></strong></div>
</div>
<!--
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
MACHINE LEGEND
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<div class="row">
<%
'LOOP thru the machines and write the id in the color it's defined as in the table
Do Until rs_m.EOF
a_machs(loop_mach) = rs_m("Name")
a_machid(loop_mach) = rs_m("Machine_ID")
%>
<div class="machine" style="padding-top:3px;background-color:#<%=rs_m("Hex_Value")%>;" id="<%=rs_m("Machine_ID")%>" onMouseOver="show(event,'<%=rs_m("Name")%>')" onMouseOut="hide('<%=rs_m("Name")%>')"> <%=rs_m("Mach_Code")%>
</div>
<%
loop_mach = loop_mach + 1
rs_m.MoveNext()
Loop
rs_m.Close()
set rs_m = nothing
%>
</div>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
GRID
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<%
loop_cnt = 1
stime = "07:00" 'Starts at 7:00 AM
etime = "7:29"
Do Until loop_cnt > 48
loop_mach = 1
%>
<div class="row">
<% Do Until loop_mach > Num_Machines
Mach_Name = a_machs(loop_mach)
Mach_ID = a_machid(loop_mach)
if not rs_dtl.eof Then
<div class="dowdetails" style="background-color:#<%=rowcolor%>;" id="t-m<% =Mach_Name %>-<% =stime %>"><input class="dowdtlinput" type="text" id="m<% =Mach_Name %>-'<%=selecteddt%>'-<% =stime %>" name="m<% =Mach_Name %>-'<%=selecteddt%>'-<% =stime %>" style="color:#FFFFFF;background-color:#<%=rs_dtl("Hex_Value")%>" value="<%=rs_dtl("Op_Initials")%>" onMouseOut="hidetm('<%=stime%>')" onMouseDown="f_showdtls('<%=Mach_ID%>','<%=selecteddt%>','<% =stime%>','<%=dayoftheweek%>','<%=Core_ID%>')"/> </div>
<% end if
loop_mach = loop_mach + 1
Loop 'End Loop for number machines
%>
</div>
<%
stime = FormatDateTime(DateAdd("n",30,selecteddt),4)
etime = FormatDateTime(DateAdd("n",30,edt),4)
selecteddt = FormatDateTime(selecteddt,2) & " "& FormatDateTime(stime,4)
edt = FormatDateTime(selecteddt,2) &" "& FormatDateTime(etime,4)
loop_cnt = loop_cnt + 1
Loop 'End Loop times
rs_dtl.Close()
set rs_dtl = nothing
%>
<!-- legend -->
<%
sql = "SELECT Distinct (select Count(m1.Machine_ID))"
rs_m.Source = sql
rs_m.Open()
Num_Machines = clng(rs_m("cnt"))
loop_mach = 1
redim a_machs(0)
redim preserve a_machs(ubound(a_machs) + Num_Machines)
a_machs(0) = 0
Do Until rs_m.EOF
a_machs(loop_mach) = rs_m("Machine_ID")
%>
<div class="machine" id="<%=rs_m("Machine_ID")%>" style="border-bottom:1px black solid;padding-top:3; background-color:#<%=rs_m("Hex_Value")%>;" onMouseOver="show(event,'<%=rs_m("Name")%>')" onMouseOut="hide('<%=rs_m("Name")%>')"><%=rs_m("Mach_Code")%>
</div>
<%
loop_mach = loop_mach + 1
rs_m.MoveNext()
Loop
rs_m.Close()
set rs_m = nothing
%>
<div class="row">
<div class="dthdr" style="width:<%=dtwidth%>px;"><strong><%=dowName &" "&FormatDateTime(selecteddt,vbShortDAte)%></strong></div>
</div>
<input type="hidden" id="framesdate" name="framesdate" value="<% =fromtherecordset %>" />
<input type="hidden" id="dayofweek" name="dayofweek" value="<% =dayoftheweek %>" />
<input type="hidden" id="framewidth" name="framewidth" value="<% =dayframewidth %>" />
<input type="hidden" id="recordthis" name="recordthis" />
<input type="hidden" id="core_id" name="core_id" value="<% =Core_ID%>" />
<input type="hidden" id="recordthis" name="recordthis" />
<input type="hidden" id="cwidth" name="cwidth" value = "<%=CW%>" />
<!--
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
END THE LOOP OF EACH DAY
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//-->
</div>
<%
next
%>
</div>
</div>
</form>