html - Overlaying groups of elements with css -
i'm trying have text flow across screen in front of matrix background. when try it, marquee pushes matrix background down, , leaves annoying black space. trying put matrix (div columns) reach top of page, behind marquee. have tried experimenting css absolute positioning, must doing wrong... here's code far.
<html> <head> <hta:application applicationname="matrix" version="1.0.0.0" author="someone" border="none" innerborder="no" caption="no" sysmenu="no" maximizebutton="no" minimizebutton="no" icon="no" scroll="no" scrollflat="yes" singleinstance="yes" windowstate="maximize" showintaskbar="no" contextmenu="no" selection="no"/> <title>matrix © 2017</title> <style type="text/css"> body{ background-color: black; color: darkslategray; font-size: 20px; } div{ width: 20px; float: left; } </style> <font color="#ff0000" size="+3"><marquee>marquee text here</marquee></font> <script language="vbscript"> public n, itimerid, mytitle, colnum, carset redim m(1,1) redim speccar(64) speccar(0)="‰" speccar(1)="ƒ" : speccar(11)="ω" : speccar(21)="λ" : speccar(31)="φ" speccar(2)="γ" : speccar(12)="α" : speccar(22)="μ" : speccar(32)="ψ" speccar(3)="δ" : speccar(13)="β" : speccar(23)="ν" : speccar(33)="ω" speccar(4)="θ" : speccar(14)="δ" : speccar(24)="ξ" : speccar(34)="™" speccar(5)="λ" : speccar(15)="ε" : speccar(25)="π" : speccar(35)="←" speccar(6)="ξ" : speccar(16)="ζ" : speccar(26)="ρ" : speccar(36)="↑" speccar(7)="π" : speccar(17)="η" : speccar(27)="ς" : speccar(37)="→" speccar(8)="σ" : speccar(19)="ι" : speccar(29)="τ" : speccar(39)="↔" speccar(10)="ψ" : speccar(20)="κ" : speccar(30)="υ": speccar(40)="√" speccar(41)="∞" : speccar(46)="∴" : speccar(51)="≥" : speccar(56)="♣" speccar(42)="∠" : speccar(47)="≈" : speccar(52)="⊕" : speccar(57)="♥" speccar(43)="∩" : speccar(48)="≠" : speccar(53)="⊥" : speccar(58)="♦" speccar(44)="∪" : speccar(49)="≡" : speccar(54)="◊" : speccar(59)="œ" speccar(45)="∫" : speccar(50)="≤" : speccar(55)="♠" : speccar(60)="†" speccar(61)="†": speccar(62)="€" : speccar(63)="œ" : speccar(64)="š" sub window_onload() n=48 colnum=100 carset=1 redim m(colnum,1) ' set random number first character ' written on screen each column ' (div). useful avoid ' column start @ same place i=1 colnum randomize '---this formula doesn't accept variables m(i,0) = int(n*rnd) '--- m(i,0) contains number of character written t="" '--- fill column white space for j=1 n t = t & " <br>" next m(i,1) = t '--- m(i,1) contains html of column next itimerid = window.setinterval("progress", 300) end sub sub progress for i=1 colnum l = split(m(i,1), "<br>") '--- split each character in column cpos = m(i,0) '--- position of character written on screen @ time '--- write random ascii or character array randomize if int(carset)=1 l(cpos) = "<span style=""color:greenyellow"">" & chr( 32 + int(223*rnd) ) & "</span>" carset = carset +0.25 elseif int(carset)=2 l(cpos) = "<span style=""color:greenyellow"">" & speccar( int(64*rnd) ) & "</span>" carset = 1 end if '--- scale down dark previous characters y=-1 for j = cpos-1 cpos-11 step -1 tempj = j if j < 0 '--- when start top, darken characters @ bottom j = ubound(l) +j +1 end if y=y+1 select case y case 0 color="lawngreen" case 1 color="lawngreen" case 2 color="limegreen" case 3 color="limegreen" case 4 color="forestgreen" case 5 color="forestgreen" case 6 color="green" case 7 color="green" case 8 color="darkgreen" case 9 color="darkgreen" case 10 color="" end select clj = l(j) if instr(1, clj, "<span", 1)>0 '--- isolate character span tag clj = left(clj, instrrev(clj, "<") -1) clj = mid(clj, instr(clj, ">") +1) end if if color <> "" '--- set span color style if necessary l(j) = "<span style=""color:" & color & """>" & clj & "</span>" else l(j) = clj end if j = tempj next t = join(l, "<br>") m(i,1) = t '--- m(i,1) contains html of column cpos = cpos +1 if cpos > ubound(l) cpos = 0 end if m(i,0) = cpos '--- m(i,0) contains number of character written id("col" & i).innerhtml = t '--- show result column on screen next end sub sub exitmatrix window.clearinterval(itimerid) '---you must clear intervals before leaving window.close end sub function id(o) set id = document.getelementbyid(o) end function </script> </head> <body> <div id="col1"></div><div id="col26"></div><div id="col51"></div><div id="col76"></div> <div id="col2"></div><div id="col27"></div><div id="col52"></div><div id="col77"></div> <div id="col3"></div><div id="col28"></div><div id="col53"></div><div id="col78"></div> <div id="col4"></div><div id="col29"></div><div id="col54"></div><div id="col79"></div> <div id="col5"></div><div id="col30"></div><div id="col55"></div><div id="col80"></div> <div id="col6"></div><div id="col31"></div><div id="col56"></div><div id="col81"></div> <div id="col7"></div><div id="col32"></div><div id="col57"></div><div id="col82"></div> <div id="col8"></div><div id="col33"></div><div id="col58"></div><div id="col83"></div> <div id="col9"></div><div id="col34"></div><div id="col59"></div><div id="col84"></div> <div id="col10"></div><div id="col35"></div><div id="col60"></div><div id="col85"></div> <div id="col11"></div><div id="col36"></div><div id="col61"></div><div id="col86"></div> <div id="col12"></div><div id="col37"></div><div id="col62"></div><div id="col87"></div> <div id="col13"></div><div id="col38"></div><div id="col63"></div><div id="col88"></div> <div id="col14"></div><div id="col39"></div><div id="col64"></div><div id="col89"></div> <div id="col15"></div><div id="col40"></div><div id="col65"></div><div id="col90"></div> <div id="col16"></div><div id="col41"></div><div id="col66"></div><div id="col91"></div> <div id="col17"></div><div id="col42"></div><div id="col67"></div><div id="col92"></div> <div id="col18"></div><div id="col43"></div><div id="col68"></div><div id="col93"></div> <div id="col19"></div><div id="col44"></div><div id="col69"></div><div id="col94"></div> <div id="col20"></div><div id="col45"></div><div id="col70"></div><div id="col95"></div> <div id="col21"></div><div id="col46"></div><div id="col71"></div><div id="col96"></div> <div id="col22"></div><div id="col47"></div><div id="col72"></div><div id="col97"></div> <div id="col23"></div><div id="col48"></div><div id="col73"></div><div id="col98"></div> <div id="col24"></div><div id="col49"></div><div id="col74"></div><div id="col99"></div> <div id="col25"></div><div id="col50"></div><div id="col75"></div><div id="col100"></div> <embed src="don.mp3" autostart="true" loop="true"> </body> </html>
you correct using position: absolute. add code css:
marquee { position: absolute; } as stated in comments, old code. maquee inside tag has been depricated decade or more. luck....
body{ background-color: black; color: darkslategray; font-size: 20px; } div{ width: 20px; float: left; } marquee { position: absolute; }<html> <head> <hta:application applicationname="matrix" version="1.0.0.0" author="someone" border="none" innerborder="no" caption="no" sysmenu="no" maximizebutton="no" minimizebutton="no" icon="no" scroll="no" scrollflat="yes" singleinstance="yes" windowstate="maximize" showintaskbar="no" contextmenu="no" selection="no"/> <title>matrix © 2017</title> <font color="#ff0000" size="+3"><marquee>marquee text here</marquee></font> <script language="vbscript"> public n, itimerid, mytitle, colnum, carset redim m(1,1) redim speccar(64) speccar(0)="‰" speccar(1)="ƒ" : speccar(11)="ω" : speccar(21)="λ" : speccar(31)="φ" speccar(2)="γ" : speccar(12)="α" : speccar(22)="μ" : speccar(32)="ψ" speccar(3)="δ" : speccar(13)="β" : speccar(23)="ν" : speccar(33)="ω" speccar(4)="θ" : speccar(14)="δ" : speccar(24)="ξ" : speccar(34)="™" speccar(5)="λ" : speccar(15)="ε" : speccar(25)="π" : speccar(35)="←" speccar(6)="ξ" : speccar(16)="ζ" : speccar(26)="ρ" : speccar(36)="↑" speccar(7)="π" : speccar(17)="η" : speccar(27)="ς" : speccar(37)="→" speccar(8)="σ" : speccar(19)="ι" : speccar(29)="τ" : speccar(39)="↔" speccar(10)="ψ" : speccar(20)="κ" : speccar(30)="υ": speccar(40)="√" speccar(41)="∞" : speccar(46)="∴" : speccar(51)="≥" : speccar(56)="♣" speccar(42)="∠" : speccar(47)="≈" : speccar(52)="⊕" : speccar(57)="♥" speccar(43)="∩" : speccar(48)="≠" : speccar(53)="⊥" : speccar(58)="♦" speccar(44)="∪" : speccar(49)="≡" : speccar(54)="◊" : speccar(59)="œ" speccar(45)="∫" : speccar(50)="≤" : speccar(55)="♠" : speccar(60)="†" speccar(61)="†": speccar(62)="€" : speccar(63)="œ" : speccar(64)="š" sub window_onload() n=48 colnum=100 carset=1 redim m(colnum,1) ' set random number first character ' written on screen each column ' (div). useful avoid ' column start @ same place i=1 colnum randomize '---this formula doesn't accept variables m(i,0) = int(n*rnd) '--- m(i,0) contains number of character written t="" '--- fill column white space for j=1 n t = t & " <br>" next m(i,1) = t '--- m(i,1) contains html of column next itimerid = window.setinterval("progress", 300) end sub sub progress for i=1 colnum l = split(m(i,1), "<br>") '--- split each character in column cpos = m(i,0) '--- position of character written on screen @ time '--- write random ascii or character array randomize if int(carset)=1 l(cpos) = "<span style=""color:greenyellow"">" & chr( 32 + int(223*rnd) ) & "</span>" carset = carset +0.25 elseif int(carset)=2 l(cpos) = "<span style=""color:greenyellow"">" & speccar( int(64*rnd) ) & "</span>" carset = 1 end if '--- scale down dark previous characters y=-1 for j = cpos-1 cpos-11 step -1 tempj = j if j < 0 '--- when start top, darken characters @ bottom j = ubound(l) +j +1 end if y=y+1 select case y case 0 color="lawngreen" case 1 color="lawngreen" case 2 color="limegreen" case 3 color="limegreen" case 4 color="forestgreen" case 5 color="forestgreen" case 6 color="green" case 7 color="green" case 8 color="darkgreen" case 9 color="darkgreen" case 10 color="" end select clj = l(j) if instr(1, clj, "<span", 1)>0 '--- isolate character span tag clj = left(clj, instrrev(clj, "<") -1) clj = mid(clj, instr(clj, ">") +1) end if if color <> "" '--- set span color style if necessary l(j) = "<span style=""color:" & color & """>" & clj & "</span>" else l(j) = clj end if j = tempj next t = join(l, "<br>") m(i,1) = t '--- m(i,1) contains html of column cpos = cpos +1 if cpos > ubound(l) cpos = 0 end if m(i,0) = cpos '--- m(i,0) contains number of character written id("col" & i).innerhtml = t '--- show result column on screen next end sub sub exitmatrix window.clearinterval(itimerid) '---you must clear intervals before leaving window.close end sub function id(o) set id = document.getelementbyid(o) end function </script> </head> <body> <div id="col1"></div><div id="col26"></div><div id="col51"></div><div id="col76"></div> <div id="col2"></div><div id="col27"></div><div id="col52"></div><div id="col77"></div> <div id="col3"></div><div id="col28"></div><div id="col53"></div><div id="col78"></div> <div id="col4"></div><div id="col29"></div><div id="col54"></div><div id="col79"></div> <div id="col5"></div><div id="col30"></div><div id="col55"></div><div id="col80"></div> <div id="col6"></div><div id="col31"></div><div id="col56"></div><div id="col81"></div> <div id="col7"></div><div id="col32"></div><div id="col57"></div><div id="col82"></div> <div id="col8"></div><div id="col33"></div><div id="col58"></div><div id="col83"></div> <div id="col9"></div><div id="col34"></div><div id="col59"></div><div id="col84"></div> <div id="col10"></div><div id="col35"></div><div id="col60"></div><div id="col85"></div> <div id="col11"></div><div id="col36"></div><div id="col61"></div><div id="col86"></div> <div id="col12"></div><div id="col37"></div><div id="col62"></div><div id="col87"></div> <div id="col13"></div><div id="col38"></div><div id="col63"></div><div id="col88"></div> <div id="col14"></div><div id="col39"></div><div id="col64"></div><div id="col89"></div> <div id="col15"></div><div id="col40"></div><div id="col65"></div><div id="col90"></div> <div id="col16"></div><div id="col41"></div><div id="col66"></div><div id="col91"></div> <div id="col17"></div><div id="col42"></div><div id="col67"></div><div id="col92"></div> <div id="col18"></div><div id="col43"></div><div id="col68"></div><div id="col93"></div> <div id="col19"></div><div id="col44"></div><div id="col69"></div><div id="col94"></div> <div id="col20"></div><div id="col45"></div><div id="col70"></div><div id="col95"></div> <div id="col21"></div><div id="col46"></div><div id="col71"></div><div id="col96"></div> <div id="col22"></div><div id="col47"></div><div id="col72"></div><div id="col97"></div> <div id="col23"></div><div id="col48"></div><div id="col73"></div><div id="col98"></div> <div id="col24"></div><div id="col49"></div><div id="col74"></div><div id="col99"></div> <div id="col25"></div><div id="col50"></div><div id="col75"></div><div id="col100"></div> <embed src="don.mp3" autostart="true" loop="true"> </body> </html>
Comments
Post a Comment