Forums

JohnMotylJr

Howdy yall. Im working on a project which requires me to make a navigational table with a drop down list (as well a table). I guess the logic is to just use some onmouseover and it should go from hidden to visible. The guestion im having is with my positioning. I cant seem to line them up correctly.
The CSS:

<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1 { color: #039 }
table { background-color: aqua; border-style: solid; border-width: thin; border-color:
black }
a.noDecor { text-decoration: none; color: black }
table.noShow {visibility:hidden; position:absolute }
</style>

The HTML:

<body>
<h1>Sporting News</h1>
<table width="400" height="28">
<tr>
	<td width="100" height="20" onmouseover="document.getElementById('nfl').style.visibility='visible';"
	onmouseout="document.getElementById('nfl').style.visibility='hidden';">
	<a href="" class="noDecor">Football</a><br />
    

   	<td width="100" onmouseover="document.getElementById('mlb').style.visibility='visible';"
		onmouseout="document.getElementById('mlb').style.visibility='hidden';">
        <a href="" class="noDecor">Basebell</a><br />
           
	<td width="100" onmouseover="document.getElementById('nba').style.visibility='visible';"
			onmouseout="document.getElementById('mlb').style.visibility='hidden';">
            <a href="" class="noDecor">Basketball</a><br />     
    	
	<td width="100" onmouseover="document.getElementById('nhl').style.visibility='visible';"
				onmouseout="document.getElementById('mlb').style.visibility='hidden';">
    			<a href="" class="noDecor">Hockey</a><br />
                
      	<table class="noShow" id="nfl" width="110">
		<tr><td><a href="http://www.nfl.com/">NFL.com</a></td></tr&gt;
		<tr><td><a href="http://sports.espn.go.com/nfl/index">ESPN</a></td></tr&gt;
		<tr><td><a href="http://sports.yahoo.com/nfl;_ylt=AsRakGSbKIS7qaEoSsk90ls5nYcB"&gt;
        Yahoo!Sports</a></td></tr>
		</table>

    		
        
 		<table class="noShow" id="mlb" width"100">
  		<tr><td><a href="http://www.nfl.com/">MLB</a></td></tr&gt;
		<tr><td><a href="http://sports.espn.go.com/nfl/index">MLB</a></td></tr&gt;
		<tr><td><a href="http://sports.yahoo.com/nfl;_ylt=AsRakGSbKIS7qaEoSsk90ls5nYcB"&gt;
        MLB</a></td></tr>
        </table>

  		<table class="noShow" id="nba" width="90" align="left">
		<tr><td><a href="http://www.nfl.com/">NBA</a></td></tr&gt;
		<tr><td><a href="http://sports.espn.go.com/nfl/index">NBA</a></td></tr&gt;
		<tr><td><a href="http://sports.yahoo.com/nfl;_ylt=AsRakGSbKIS7qaEoSsk90ls5nYcB"&gt;
        NBA</a></td></tr>
        </table>

    
		<table class="noShow" id="nhl" width="80">
		<tr><td><a href="http://www.nfl.com/">NHL</a></td></tr&gt;
		<tr><td><a href="http://sports.espn.go.com/nfl/index">NHL</a></td></tr&gt;
		<tr><td><a href="http://sports.yahoo.com/nfl;_ylt=AsRakGSbKIS7qaEoSsk90ls5nYcB"&gt;
        NHL</a></td></tr>
        </table>
  </tr>
        
            
</table>
</body>

Im sure this is something old and possibly discussed plenty long ago. Im new to this forum and cant really seem to locate anything here or google (i dont think im searching for the right thing is all).

Thank you in advance for any help or insight you bring to me.

EDIT: Just had to move tables inside of other tables..
FIXED html:

<body>

<fieldset><legend><h1>Sporting News</h1></legend>
<table width="400" height="28">
<tr>
	<td width="100" height="20" onmouseover="document.getElementById('nfl').style.visibility='visible';"
	onmouseout="document.getElementById('nfl').style.visibility='hidden';">
	<a href="" class="noDecor">Football</a><br />
                
      	<table class="noShow" id="nfl" width="110">
		<tr><td><a href="http://www.nfl.com/">NFL.com</a></td></tr&gt;
		<tr><td><a href="http://sports.espn.go.com/nfl/index">ESPN</a></td></tr&gt;
		<tr><td><a href="http://sports.yahoo.com/nfl;_ylt=AsRakGSbKIS7qaEoSsk90ls5nYcB"&gt;
        Yahoo!Sports</a></td></tr>
		</table>
    

   	<td width="100" onmouseover="document.getElementById('mlb').style.visibility='visible';"
		onmouseout="document.getElementById('mlb').style.visibility='hidden';">
        <a href="" class="noDecor">Basebell</a><br />

    		
        
 		<table class="noShow" id="mlb" width"100">
  		<tr><td><a href="http://www.nfl.com/">MLB.com</a></td></tr&gt;
		<tr><td><a href="http://sports.espn.go.com/nfl/index">ESPN</a></td></tr&gt;
		<tr><td><a href="http://sports.yahoo.com/nfl;_ylt=AsRakGSbKIS7qaEoSsk90ls5nYcB"&gt;
        Yahoo!Sports</a></td></tr>
        </table>
                   
	<td width="100" onmouseover="document.getElementById('nba').style.visibility='visible';"
			onmouseout="document.getElementById('nba').style.visibility='hidden';">
            <a href="" class="noDecor">Basketball</a><br />     


  		<table class="noShow" id="nba" width="90" align="left">
		<tr><td><a href="http://www.nfl.com/">NBA.com</a></td></tr&gt;
		<tr><td><a href="http://sports.espn.go.com/nfl/index">ESPN</a></td></tr&gt;
		<tr><td><a href="http://sports.yahoo.com/nfl;_ylt=AsRakGSbKIS7qaEoSsk90ls5nYcB"&gt;
        Yahoo!Sports</a></td></tr>
        </table>
            	
	<td width="100" onmouseover="document.getElementById('nhl').style.visibility='visible';"
				onmouseout="document.getElementById('nhl').style.visibility='hidden';">
    			<a href="" class="noDecor">Hockey</a><br />

    
		<table class="noShow" id="nhl" width="80">
		<tr><td><a href="http://www.nfl.com/">NHL.com</a></td></tr&gt;
		<tr><td><a href="http://sports.espn.go.com/nfl/index">ESPN</a></td></tr&gt;
		<tr><td><a href="http://sports.yahoo.com/nfl;_ylt=AsRakGSbKIS7qaEoSsk90ls5nYcB"&gt;
        Yahoo!Sports</a></td></tr>
        </table>
  </tr>
        
            
</table>
</fieldset>
</body>

treehouse : what would you like to learn today?

Forums

[SOLVED] New to the site and new to css positioning. A little lost..