Web Analytics Made Easy -
StatCounter CSS Absolute Positioning - CodingForum

Announcement

Collapse
No announcement yet.

CSS Absolute Positioning

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Absolute Positioning

    Hello All,

    I've been trying to make a JS-based music player. It uses a table to hold album art, and another div to hold code to embed the selected song.

    I'm trying to put the table at the top left with 1px margin, and the embed div, as in the code, 400px from the top, and 1px from the right. However, when I view what I have below, the embed div is 'behind' the table. Here is my code, thanks.

    1212jtraceur

    Code:
    <html>
       <head>
    
          <title>
             Joseph's Music
          </title>
    
          <script type = "text/javascript">
    
             defaultInfo = 'Hover to see a description, click to hear the song.';
    
             emeryInfo = 'Walls - Emery - The Weak\'s End';
             emeryMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Walls-Emery-The_Weaks_End.mp3';
    
             darudeInfo = 'Sandstorm - Darude - Before The Storm';
             darudeMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Sandstorm-Darude-Before_The_Storm.mp3';
    
             dalerMehndiInfo = 'Tunak Tunak Tun - Daler Mehndi - Tunak Tunak Tun';
             dalerMehndiMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Tunak_Tunak_Tun-Daler_Mehndi-Tunak_Tunak_Tun.mp3';
    
             weirdAlInfo = 'Albuquerque - Weird Al Yankovic - Running With Scissors';
             weirdAlMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Albuquerque-Weird_Al_Yankovic-Running_With_Scissors.mp3';
    
             btaInfo = 'One Man Parade - Becoming The Archetype - Terminate Damnation';
             btaMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/One_Man_Parade-Becoming_The_Archetype-Terminate_Damnation.mp3';
    
             dtrInfo = 'My Darkness - Destroy The Runner - Saints';
             dtrMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/My_Darkness-Destroy_The_Runner-Saints.mp3';
    
             demonHunterInfo = 'Undying - Demon Hunter - The Triptych';
             demonHunterMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Undying-Demon_Hunter-The_Triptych.mp3';
    
             hilInfo = 'China White - He Is Legend - I Am Hollywood';
             hilMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/China_White-He_Is_Legend-I_Am_Hollywood.mp3';
    
             project86Info = 'Sincerely, Ichabod - Project 86 - And The Rest Will Follow';
             project86MusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Sincerely_Ichabod-Project_86-And_The_Rest_Will_Follow.mp3';
    
             showbreadInfo = 'Mouth Like A Magazine - Showbread - No Sir, Nihilism Is Not Practical';
             showbreadMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Mouth_Like_A_Magazine-Showbread-No_Sir_Nihilism_Is_Not_Practical.mp3';
    
             tccInfo = 'The Coldest Heart - The Classic Crime - Albatross';
             tccMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/The_Coldest_Heart-The_Classic_Crime-Albatross.mp3';
    
             underOathInfo = 'Writing On The Walls - UnderOath - Define The Great Line';
             underOathMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Writing_On_The_Walls-UnderOath-Define_The_Great_Line.mp3';
    
             function showInfo(info)
             {
                document.getElementById('description').innerHTML = info;
             }
    
             function playMusic(music_url)
             {
                document.getElementById('musicPlayer').innerHTML = '<embed src = "' + music_url + '" width = "400" autostart = "true" />';
             }
          </script>
    
          <style type = "text/css">
    
             body
             {
                cursor: crosshair;
             }
    
             table#albumArt
             {
                position: absolute;
                top: 1px;
                left: 1px;
             }
    
             td
             {
                border: 5px;
                border: 5px solid black;
             }
    
             img
             {
               cursor: pointer;
    		   height: 90px;
    		   width: 90px;
             }
    
             div
             {
                #musicPlayer
                {
                   position: absolute;
                   top: 400px;
                   left: 1px;
                }
             }
          </style>
       </head>
    
       <body onload = "showInfo(defaultInfo);">
    
          <div id = "musicPlayer"></div>
    
          <table id = "albumArt" cellSpacing = "0">
             <caption id = "description" align = "top"></caption>
    
             <tr id = "row1">
    
                <td id = "emeryCell">
                   <img id = "emeryImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Emery-TheWeaksEnd.jpg" onmouseover = "showInfo(emeryInfo)"
    								onclick = "playMusic(emeryMusicURL)" onmouseout = "showInfo(defaultInfo)"/>
                </td>
    
                <td id = "darudeCell">
                    <img id = "darudeImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Darude-Before_The_Storm.jpg" onmouseover = "showInfo(darudeInfo)"
                    onclick = "playMusic(darudeMusicURL)" onmouseout = "showInfo(defaultInfo)" />
                </td>
    
                <td id = "dalerMehndiCell">
                	<img id = "dalerMehndiImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Daler_Mehndi-Tunak_Tunak_Tun.jpg" onmouseover = "showInfo(dalerMehndiInfo)"
                  onclick = "playMusic(dalerMehndiMusicURL)" onmouseout = "showInfo(defaultInfo)" />
                </td>
    
                <td id = "weirdAlCell">
                	<img id = "weirdAlImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Weird_Al_Yankovic-Running_With_Scissors.jpg" onmouseover = "showInfo(weirdAlInfo)"
                  onclick = "playMusic(weirdAlMusicURL)" onmouseout = "showInfo(defaultInfo)" />
                </td>
    
             	</tr>
    
             	<tr id = "row2">
    
             		<td id = "btaCell">
             			<img id = "btaImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Becoming_The_Archetype-Terminate_Damnation.jpg" onmouseover = "showInfo(btaInfo)"
             			onclick = "playMusic(btaMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             		<td id = "dtrCell">
             			<img id = "dtrImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Destroy_The_Runner-Saints.jpg"
             			onmouseover = "showInfo(dtrInfo)" onclick = "playMusic(dtrMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             		<td id = "demonHunterCell">
             			<img id = "demonHunterImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Demon_Hunter-The_Triptych.jpg" onmouseover = "showInfo(demonHunterInfo)"
             			onclick = "playMusic(demonHunterMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             		<td id = "hilCell">
             			<img id = "hilImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/He_Is_Legend-I_Am_Hollywood.jpg" onmouseover = "showInfo(hilInfo)"
             			onclick = "playMusic(hilMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             	</tr>
    
             	<tr id = "row3">
    
             		<td id = "project86Cell">
             			<img id = "project86Image" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Project_86-And_The_Rest_Will_Follow.jpg" onmouseover = "showInfo(project86Info)"
             			onclick = "playMusic(project86MusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
                <td id = "showbreadCell">
             			<img id = "showbreadImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Showbread-No_Sir_Nihilism_Is_Not_Practical.jpg" onmouseover = "showInfo(showbreadInfo)"
             			onclick = "playMusic(showbreadMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             		<td id = "tccCell">
             			<img id = "tccImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/The_Classic_Crime-Albatross.gif"
             			onmouseover = "showInfo(tccInfo)" onclick = "playMusic(tccMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             		<td id = "underOathCell">
             			<img id = "UnderOathImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/UnderOath-Define_The_Great_Line.jpg" onmouseover = "showInfo(underOathInfo)"
             			onclick = "playMusic(underOathMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             	</tr>
    
          </table>
          
       </body>
    </html>
    Last edited by 1212jtraceur; Oct 7, 2006, 08:53 PM.

  • #2
    update: After reading a bit more about CSS, I decided to float the 2 divs. However, it still doesn't work. My current code is below.

    Code:
    <html>
       <head>
    
          <title>
             Joseph's Music
          </title>
    
          <script type = "text/javascript">
    
             defaultInfo = 'Hover to see a description, click to hear the song.';
    
             emeryInfo = 'Walls - Emery - The Weak\'s End';
             emeryMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Walls-Emery-The_Weaks_End.mp3';
    
             darudeInfo = 'Sandstorm - Darude - Before The Storm';
             darudeMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Sandstorm-Darude-Before_The_Storm.mp3';
    
             dalerMehndiInfo = 'Tunak Tunak Tun - Daler Mehndi - Tunak Tunak Tun';
             dalerMehndiMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Tunak_Tunak_Tun-Daler_Mehndi-Tunak_Tunak_Tun.mp3';
    
             weirdAlInfo = 'Albuquerque - Weird Al Yankovic - Running With Scissors';
             weirdAlMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Albuquerque-Weird_Al_Yankovic-Running_With_Scissors.mp3';
    
             btaInfo = 'One Man Parade - Becoming The Archetype - Terminate Damnation';
             btaMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/One_Man_Parade-Becoming_The_Archetype-Terminate_Damnation.mp3';
    
             dtrInfo = 'My Darkness - Destroy The Runner - Saints';
             dtrMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/My_Darkness-Destroy_The_Runner-Saints.mp3';
    
             demonHunterInfo = 'Undying - Demon Hunter - The Triptych';
             demonHunterMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Undying-Demon_Hunter-The_Triptych.mp3';
    
             hilInfo = 'China White - He Is Legend - I Am Hollywood';
             hilMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/China_White-He_Is_Legend-I_Am_Hollywood.mp3';
    
             project86Info = 'Sincerely, Ichabod - Project 86 - And The Rest Will Follow';
             project86MusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Sincerely_Ichabod-Project_86-And_The_Rest_Will_Follow.mp3';
    
             showbreadInfo = 'Mouth Like A Magazine - Showbread - No Sir, Nihilism Is Not Practical';
             showbreadMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Mouth_Like_A_Magazine-Showbread-No_Sir_Nihilism_Is_Not_Practical.mp3';
    
             tccInfo = 'The Coldest Heart - The Classic Crime - Albatross';
             tccMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/The_Coldest_Heart-The_Classic_Crime-Albatross.mp3';
    
             underOathInfo = 'Writing On The Walls - UnderOath - Define The Great Line';
             underOathMusicURL = 'http://www.mydatabus.com/2z/tznvy.pbz/1212jtraceur/Writing_On_The_Walls-UnderOath-Define_The_Great_Line.mp3';
    
             function showInfo(info)
             {
                document.getElementById('description').innerHTML = info;
             }
    
             function playMusic(music_url)
             {
                document.getElementById('musicPlayer').innerHTML = '<embed src = "' + music_url + '" autostart = "true" />';
             }
          </script>
    
          <style type = "text/css">
    
             body
             {
    		margin: 0px;
    		padding: 0px;
                    cursor: crosshair;
             }
    
             table#albumArt
             {
            	float: left;
             }
    
             td
             {
                border: 5px;
                border: 5px solid #000000;
             }
    
             img
             {
               cursor: pointer;
    		   height: 90px;
    		   width: 90px;
             }
    
             div
             {
                #musicPlayer
                {
                   float: right;
                }
             }
          </style>
       </head>
    
       <body onload = "showInfo(defaultInfo);">
    
          <div id = "musicPlayer"></div>
    
          <table id = "albumArt" cellSpacing = "0">
             <caption id = "description" align = "bottom"></caption>
    
             <tr id = "row1">
    
                <td id = "emeryCell">
                   <img id = "emeryImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Emery-TheWeaksEnd.jpg" onmouseover = "showInfo(emeryInfo)"
    								onclick = "playMusic(emeryMusicURL)" onmouseout = "showInfo(defaultInfo)"/>
                </td>
    
                <td id = "darudeCell">
                    <img id = "darudeImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Darude-Before_The_Storm.jpg" onmouseover = "showInfo(darudeInfo)"
                    onclick = "playMusic(darudeMusicURL)" onmouseout = "showInfo(defaultInfo)" />
                </td>
    
                <td id = "dalerMehndiCell">
                	<img id = "dalerMehndiImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Daler_Mehndi-Tunak_Tunak_Tun.jpg" onmouseover = "showInfo(dalerMehndiInfo)"
                  onclick = "playMusic(dalerMehndiMusicURL)" onmouseout = "showInfo(defaultInfo)" />
                </td>
    
                <td id = "weirdAlCell">
                	<img id = "weirdAlImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Weird_Al_Yankovic-Running_With_Scissors.jpg" onmouseover = "showInfo(weirdAlInfo)"
                  onclick = "playMusic(weirdAlMusicURL)" onmouseout = "showInfo(defaultInfo)" />
                </td>
    
             	</tr>
    
             	<tr id = "row2">
    
             		<td id = "btaCell">
             			<img id = "btaImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Becoming_The_Archetype-Terminate_Damnation.jpg" onmouseover = "showInfo(btaInfo)"
             			onclick = "playMusic(btaMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             		<td id = "dtrCell">
             			<img id = "dtrImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Destroy_The_Runner-Saints.jpg"
             			onmouseover = "showInfo(dtrInfo)" onclick = "playMusic(dtrMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             		<td id = "demonHunterCell">
             			<img id = "demonHunterImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Demon_Hunter-The_Triptych.jpg" onmouseover = "showInfo(demonHunterInfo)"
             			onclick = "playMusic(demonHunterMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             		<td id = "hilCell">
             			<img id = "hilImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/He_Is_Legend-I_Am_Hollywood.jpg" onmouseover = "showInfo(hilInfo)"
             			onclick = "playMusic(hilMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             	</tr>
    
             	<tr id = "row3">
    
             		<td id = "project86Cell">
             			<img id = "project86Image" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Project_86-And_The_Rest_Will_Follow.jpg" onmouseover = "showInfo(project86Info)"
             			onclick = "playMusic(project86MusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
                <td id = "showbreadCell">
             			<img id = "showbreadImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/Showbread-No_Sir_Nihilism_Is_Not_Practical.jpg" onmouseover = "showInfo(showbreadInfo)"
             			onclick = "playMusic(showbreadMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             		<td id = "tccCell">
             			<img id = "tccImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/The_Classic_Crime-Albatross.gif"
             			onmouseover = "showInfo(tccInfo)" onclick = "playMusic(tccMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             		<td id = "underOathCell">
             			<img id = "UnderOathImage" src = "http://www.mydatabus.com/2e/tznvy.pbz/1212jtraceur/UnderOath-Define_The_Great_Line.jpg" onmouseover = "showInfo(underOathInfo)"
             			onclick = "playMusic(underOathMusicURL)" onmouseout = "showInfo(defaultInfo)" />
             		</td>
    
             	</tr>
    
          </table>
          
       </body>
    </html>

    Comment

    Working...
    X