Mouse Over Text To Display Image On A Fixed Location

Hi I used this exemple from this thread but now I want to use that in conjunction with [URL=“http://css-tricks.com/examples/ScrollingSidebar/css.php”]this functionnality or something very similar.I dont know a thing about javascript,I’m soso with html but so far doing well(been 5 years I didnt do any).I tried using those togheter and the sidebarscrolling desactivate the mouse over functionnality.My whole stuff is inside a table so it might also be part of the problem but everything worked fine before I try to add sidebarscrolling…My project is a list in a table which each element in the list show the picture of it on mouse over in the bottom right corner.Thing is the list is long and I need to scroll down a lot…make the picture stay at the top of the page ,therefore cant see it when mouse overing the element of list that are further down.I can provide what I have of codes but everything is in test mode ,I mostly only need a fix to that(I mean there will be probably some other error there and there,and such,but you dont need to tell me what to clean up ,unless you want to :slight_smile: )

Hi,

We will need to see what you have got so far to offer specific help I’m afraid. :slight_smile:

If the issue is that you have too many items in your list then a simpler alternative would be to let the image move down with the list items rather than placed in the bottom corner. You could probably do this by using top:auto for the top position but it does depend on what else is going on.

It may be awkward to make a “fixed positioned image” with that structure and you may need a mainly scripted solution rather than the simpler css demo above.

Okay here’s the code on the test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="Pokémon TCG Manager">
<link rel="stylesheet" href="C:\\Users\\Red9\\Desktop\\Card Pokédex\\rollover.css" />



<style type="text/css">
	
    	* { margin: 0; padding: 0; }
        #page-wrap { width: 600px; margin: 15px auto; position: relative; }
        #sidebar ul { background: #eee; padding: 10px; }
        #main { left: 50%; }
        #sidebar { background: none; background-color: lime; position: fixed; right: 10px; top: 180px; }

    </style>
    
    <!--[if IE 6]>
	   <style type="text/css">
	       html, body { height: 100%; overflow: auto; }
	       #sidebar { position: absolute; }
	       #page-wrap { margin-top: -5px; }
	       #ie6-wrap { position: relative; height: 100%; overflow: auto; width: 100%; }
	   </style>
    <![endif]-->
    
    <!--[if IE 7]>
	   <style type="text/css">
	       #sidebar { margin-top: -10px;  }
	       #page-wrap { margin-top: -5px; }
	   </style>
    <![endif]-->



<style type="text/css">

* {
margin: 0;
padding: 0;
}

Body {
background-image:url('C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\bg\\bw.jpg');
}

table 
{ 
background-color: #FFFFFF;
font-family: Arial,sans-serif;
color: #000000;
font-size: 12pt;
}

table, tr, th, td 
{ 
border: 1px solid #000000;
border-collapse: collapse;
}

.row0 td 
{ 
background-color: #FFFFFF;
}

.row1 td 
{ 
background-color: #C0C0C0;
}

</style>

<title>Black & White - List</title>

</head>

<body background="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\bg\\bw.jpg">
<center>

<img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\Symbols\\BW.png">
<img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	itles\\BW.png">
<img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\Symbols\\BW.png">
<br><br><br>


<p class="image-holder" id="sidebar"></p>
<ul id="over" class="links">

<table id="main" width="auto" align="center">
<thead>
<tr>
<th width="50px">#</th><th width="100px">Card</th><th width="50px" align="center">Type</th><th width="50px">Rarity</th><th width="100px">Quantity</th>
</tr></thead><tbody>
<tr class="row0"><td><center>1/114</td><td><center> <li><a> Snivy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\1-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>4
</td>
<tr class="row1"><td><center>2/114</td><td><center> <li><a> Snivy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>3/114</td><td><center><li><a> Servine <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\3-servine.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>4/114</td><td><center><li><a> Servine <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\4-servine.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>5/114</td><td><center><li><a> Serperior <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\5-serperior.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row1"><td><center>6/114</td><td><center><li><a> <nobr>Serperior<img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\powers\\ability.png" height="60%"></nobr>  <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\6-serperior.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row0"><td><center>7/114</td><td><center><li><a> Pansage <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>8/114</td><td><center><li><a> Simisage <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>9/114</td><td><center><li><a> Petilil <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>10/114</td><td><center><li><a> Lilligant <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row0"><td><center>11/114</td><td><center><li><a> Maractus <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>12/114</td><td><center><li><a> Maractus <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row0"><td><center>13/114</td><td><center><li><a> Deerling <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>14/114</td><td><center><li><a> Sawsbuck <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row0"><td><center>15/114</td><td><center><li><a> Tepig <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>16/114</td><td><center><li><a> Tepig <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>17/114</td><td><center><li><a> Pignite <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>18/114</td><td><center><li><a> Pignite <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>19/114</td><td><center><li><a> Emboar <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row1"><td><center>20/114</td><td><center><li><a> <nobr>Emboar<img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\powers\\ability.png" height="60%"></nobr><span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row0"><td><center>21/114</td><td><center><li><a> Pansear <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>22/114</td><td><center><li><a> Simisear <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>23/114</td><td><center><li><a> Darumaka <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>24/114</td><td><center><li><a> Darumaka <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>25/114</td><td><center><li><a> Darmantian <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>26/114</td><td><center><li><a> Reshiram <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row0"><td><center>27/114</td><td><center><li><a> Oshawott <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>28/114</td><td><center><li><a> Oshawott <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>29/114</td><td><center><li><a> Dewott <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>30/114</td><td><center><li><a> Dewott <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>31/114</td><td><center><li><a> Samurott <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row1"><td><center>32/114</td><td><center><li><a> Samurott <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row0"><td><center>33/114</td><td><center><li><a> Panpour <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>34/114</td><td><center><li><a> Simipour <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>35/114</td><td><center><li><a> Basculin <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>36/114</td><td><center><li><a> Ducklett <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>37/114</td><td><center><li><a> Swanna <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>38/114</td><td><center><li><a> Alomomola <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>39/114</td><td><center><li><a> Alomomola <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>40/114</td><td><center><li><a> Blitzle <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>41/114</td><td><center><li><a> Blitzle <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>42/114</td><td><center><li><a> Zebstrika <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>43/114</td><td><center><li><a> Zebstrika <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>44/114</td><td><center><li><a> Joltik <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>45/114</td><td><center><li><a> Joltik <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>46/114</td><td><center><li><a> Galvantula <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row0"><td><center>47/114</td><td><center><li><a> Zekrom <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row1"><td><center>48/114</td><td><center><li><a> Munna <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>49/114</td><td><center><li><a> Musharna <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>50/114</td><td><center><li><a> Woobat <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>51/114</td><td><center><li><a> Swoobat <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>52/114</td><td><center><li><a> Venipede <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>53/114</td><td><center><li><a> Whirlipede <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>54/114</td><td><center><li><a> Scolipede <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row0"><td><center>55/114</td><td><center><li><a> Solosis <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>56/114</td><td><center><li><a> Duosion <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>57/114</td><td><center><li><a> Reuniclus <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row1"><td><center>58/114</td><td><center><li><a> Timburr <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Fighting.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>59/114</td><td><center><li><a> Timburr <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Fighting.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>60/114</td><td><center><li><a> Gurdurr <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Fighting.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>61/114</td><td><center><li><a> Throh <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Fighting.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>62/114</td><td><center><li><a> Sawk <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Fighting.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row0"><td><center>63/114</td><td><center><li><a> Sandile <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Fighting.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>64/114</td><td><center><li><a> Krokorok <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Fighting.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>65/114</td><td><center><li><a> Krookodile <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Fighting.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row1"><td><center>66/114</td><td><center><li><a> Purrloin <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\darkness.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>67/114</td><td><center><li><a> Liepard <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\darkness.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>68/114</td><td><center><li><a> Scraggy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\darkness.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>69/114</td><td><center><li><a> Scrafty <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\darkness.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>70/114</td><td><center><li><a> Zorua <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\darkness.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>71/114</td><td><center><li><a> Zoroark <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\darkness.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row1"><td><center>72/114</td><td><center><li><a> Vullaby <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\darkness.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>73/114</td><td><center><li><a> Mandibuzz <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\darkness.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>74/114</td><td><center><li><a> Klink <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\metal.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>75/114</td><td><center><li><a> Klang <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\metal.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>76/114</td><td><center><li><a> Klinklang <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\metal.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare_Holo.png"></td><td><center>1
</td>
<tr class="row0"><td><center>77/114</td><td><center><li><a> Patrat <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>78/114</td><td><center><li><a> Patrat <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>79/114</td><td><center><li><a> Watchog <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>80/114</td><td><center><li><a> Lillipup <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>81/114</td><td><center><li><a> Lillipup <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>82/114</td><td><center><li><a> Herdier <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>83/114</td><td><center><li><a> Stoutland <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>84/114</td><td><center><li><a> Pidove <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>85/114</td><td><center><li><a> Tranquill <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>86/114</td><td><center><li><a> Unfezant <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row0"><td><center>87/114</td><td><center><li><a> Audino <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>88/114</td><td><center><li><a> Minccino <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>89/114</td><td><center><li><a> Cinccino <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>90/114</td><td><center><li><a> Bouffalant <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>91/114</td><td><center><li><a> Bouffalant <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\colorless.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center>92/114</td><td><center><li><a> Energy Retrieval <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>93/114</td><td><center><li><a> Energy Search <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>94/114</td><td><center><li><a> Energy Switch <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>95/114</td><td><center><li><a> Full Heal <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>96/114</td><td><center><li><a> PlusPower <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>97/114</td><td><center><li><a> Poké Ball <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>98/114</td><td><center><li><a> Pokédex <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>99/114</td><td><center><li><a> Pokémon Communication <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>100/114</td><td><center><li><a> Potion <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>101/114</td><td><center><li><a> Professor Juniper <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>102/114</td><td><center><li><a> Revive <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>103/114</td><td><center><li><a> Super Scoop Up <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row1"><td><center>104/114</td><td><center><li><a> Switch <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Trainer</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\uncommon.png"></td><td><center>1
</td>
<tr class="row0"><td><center>105/114</td><td><center><li><a> <img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Grass.png"> Energy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Energy</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>106/114</td><td><center><li><a> <img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"> Energy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Energy</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>107/114</td><td><center><li><a> <img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Water.png"> Energy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Energy</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>108/114</td><td><center><li><a> <img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"> Energy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Energy</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>109/114</td><td><center><li><a> <img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Psychic.png"> Energy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Energy</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>110/114</td><td><center><li><a> <img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\Fighting.png"> Energy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Energy</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>111/114</td><td><center><li><a> <img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\darkness.png"> Energy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Energy</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row1"><td><center>112/114</td><td><center><li><a> <img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\metal.png"> Energy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center>Energy</td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\common.png"></td><td><center>1
</td>
<tr class="row0"><td><center>113/114</td><td><center><li><a> Reshiram <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\fire.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\SuperRare_Holo.png"></td><td><center>1
</td>
<tr class="row1"><td><center>114/114</td><td><center><li><a> Zekrom <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\SuperRare_Holo.png"></td><td><center>1
</td>
<tr class="row0"><td><center>115/114</td><td><center><li><a> Pikachu <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\2-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\	ypes\\20px\\lightning.png"></td><td><center><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\icons\\rarity\\Ultra_Rare.png"></td><td><center>1
</td>
<tr class="row1"><td><center><b>Total</b></td><td><center></td><td><center></td><td><center></td><td><center><b>118</b>
</td></tr>
</tbody></table>

</ul>




<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
	var sfEls = document.getElementById("over").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			//first remove all existing classes of .over
			for (var j=0; j<sfEls.length; j++){
				sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\\\b"), "");
			}
				this.className+=" over";// now add class
		}
	}
}
// addLoadEvent 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(startList);
//--><!]]>
</script>

</body></html>

And the Css stylesheet I’m using :



Body {
background-image:url('C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\bg\\bw.jpg');
}
a img {
	display:block;
	border:none;
}
.outer {
	width:960px;
	margin:auto;
	border:1px dotted #000;
	padding:10px 10px 20px;
	position:relative;/* stacking context*/
	overflow:auto;
}
.image-holder {
	float:right;
	margin:0px 10px 10px 10px;
	width:300px;
	height:500px;
	background:none;
	border:none;
	padding:3px;
	position:relative;
	z-index:1;
	display:inline;
}
ul.links {
	list-style:none;
	margin:0 0px;
	padding:0;
	border:none;
	border-bottom:none;
	width:auto;
}
.links li {
	width:auto;
	background:none;
	color:#fff;
	border-bottom:none;
}
.links li a {
	display:block;
	width:auto;
	padding:5px;
	background:none;
	color:#000;
	text-decoration:none;
}
.links li a span, .links li a b {
	position:absolute;
	right:24px;
	top:-999em;
	width:300px;
	height:500px;
	z-index:2;
}
.links li a span img {
	display:block;
	margin:0 0 5px
}
.links li a:hover, .links li.over a {
	background:lime;
	color:#000;
	visibility:visible;
}
.links li a:hover span, .links li.over a span { top:100px; }
.links li a:hover b, .links li.over a b {
	top:200px;
	left:50px;
	height:auto;
}
h1 {
	text-align:center;
	margin:1em 0;
}

Info:
Reason as why Im using table is because I use a program to generate the list,and then use notepad++ replace function to change everything I need to replace.
Question 1
I just thought of it,but still prefer to use what I asked first ,but If what I’m trying to achieve is not possible they way I am currently trying to do it,would it work if I make my table inside a small div with overflow y, my image holder wouldnt not be insideand the whole page wouldnt be scrolled down at all…? I just want to display my picture in the same screen as the element I mouseover.
Question 2
And on a additionnal note, is it possible to make an input field where I could “search” element in my list and it would act like an anchor link within the page itself?(Like instead of clicking the anchor link I type in the input field “Fire” and it automatically scroll down to it…a bit “like” ctrl+F and find next without the whole finding stuff, and if I type “dfkjghkdfgh” it would simply do nothing because its not in the page )
Sorry for those additionnal question ahah I’m just so taken into this project

Edit: If the picture could appear near the element I over a bit like a caption would be fine too, in fact would be even better , but I couldnt find that so I went and used this one instead.

My whole stuff is inside a table so it might also be part of the problem

Mozilla browsers have a lovely 13-year-old positioning bug that hits tables and I’ve personally had trouble even with non-table elements with positioning who are inside a table. But you could avoid Firefox etc for now for testing.

You should not go any further with trying to get this popup thing going until you’ve cleaned up your HTML. I don’t even mean the table. I mean the unclosed center tags and list items not directly within lists and the such.


<td><center> <li><a> Snivy <span><img src="C:\\Users\\Red9\\Desktop\\Card Pokédex\\images\\cards\\bw\\bw\\1-snivy.jpg" width="300" height="500" alt="example image" /></span></a></li> </td>

This kind of thing isn’t HTML, it’s random soup. So let the validator (validator.w3.org) and an HTML guide somewhere show you where to fix that code before doing anything with CSS. I personally believe it would be way easier to write the code (at least for testing) yourself rather than letting a machine generate misformed tables, which you will fight at every step.

Also be aware CSS is case-sensitive: because your HTML body tag is called “body” (which is correct), in CSS you should not refer to it as “Body”. These are small things but annoying to you because one browser might think Body is okay while another will ignore it, and then you wonder what’s wrong.

And on a additionnal note, is it possible to make an input field where I could “search” element in my list and it would act like an anchor link within the page itself?

Like a select dropdown? I think it’s possible inside a form with a get request whose action is “#anchorID”, however it would be considered an abuse of form elements (I’m thinking from an accessibility point of view). But people have done it (forms as menus).

You want the table part/rest of page to be able to scroll like normal, while the sidebar part shows the image and remains fixed on the page? You can do all the page layout you want with CSS but I’m pretty sure that Javascript would be the best way to handle the image-showing-on-event part.

This kind of thing isn’t HTML, it’s random soup. So let the validator (validator.w3.org) and an HTML guide somewhere show you where to fix that code before doing anything with CSS. I personally believe it would be way easier to write the code (at least for testing) yourself rather than letting a machine generate misformed tables, which you will fight at every step.

The reason why I used the generator is that I have over 100 page of table code and data to make and this generator allows me to modify the data inside all those page in a matter of a few minute.The whole generated page has passed the w3c validating.Its my own coding that has error.Thats the output of the generator :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="generator" content="Pokémon TCG Manager">
<style type="text/css">body, table { background-color: #FFFFFF;background-image: none; font-family: Arial,sans-serif;color: #000000; font-size: 10pt;}table, tr, th, td { border: 1px solid #000000; border-collapse: collapse }.row0 td { background-color: #FFFFFF;}.row1 td { background-color: #C0C0C0;}</style>
<title>Black & White - List</title></head><body>
<h1>Black & White - List</h1>
2013-06-10 02:56:53
<p>
Generated by Pokémon Trading Card Manager (<a href="http://birdiesoft.dk" target="_blank">http://birdiesoft.dk</a>)
<p>
115 cards in set. Own 115.
<table width="100%"><thead><tr><th>#</th><th>Card</th><th>Type</th><th>Rarity</th>
<th>Number</th>
<th>Reverse Holo</th>
<th>Condition</th>
</tr></thead><tbody>
<tr class="row0"><td>1/114</td><td>Snivy</td><td>Grass</td><td>&#9679;</td><td>4
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row1"><td>2/114</td><td>Snivy</td><td>Grass</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row0"><td>3/114</td><td>Servine</td><td>Grass</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row1"><td>4/114</td><td>Servine</td><td>Grass</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row0"><td>5/114</td><td>Serperior</td><td>Grass</td><td>*H</td><td>1
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row1"><td>6/114</td><td>Serperior</td><td>Grass</td><td>*H</td><td>1
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row0"><td>7/114</td><td>Pansage</td><td>Grass</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>8/114</td><td>Simisage</td><td>Grass</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>9/114</td><td>Petilil</td><td>Grass</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>10/114</td><td>Lilligant</td><td>Grass</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>11/114</td><td>Maractus</td><td>Grass</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>12/114</td><td>Maractus</td><td>Grass</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>13/114</td><td>Deerling</td><td>Grass</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>14/114</td><td>Sawsbuck</td><td>Grass</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>15/114</td><td>Tepig</td><td>Fire</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>16/114</td><td>Tepig</td><td>Fire</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>17/114</td><td>Pignite</td><td>Fire</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>18/114</td><td>Pignite</td><td>Fire</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>19/114</td><td>Emboar</td><td>Fire</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>20/114</td><td>Emboar</td><td>Fire</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>21/114</td><td>Pansear</td><td>Fire</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>22/114</td><td>Simisear</td><td>Fire</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>23/114</td><td>Darumaka</td><td>Fire</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>24/114</td><td>Darumaka</td><td>Fire</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>25/114</td><td>Darmantian</td><td>Fire</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>26/114</td><td>Reshiram</td><td>Fire</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>27/114</td><td>Oshawott</td><td>Water</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>28/114</td><td>Oshawott</td><td>Water</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>29/114</td><td>Dewott</td><td>Water</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>30/114</td><td>Dewott</td><td>Water</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>31/114</td><td>Samurott</td><td>Water</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>32/114</td><td>Samurott</td><td>Water</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>33/114</td><td>Panpour</td><td>Water</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>34/114</td><td>Simipour</td><td>Water</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>35/114</td><td>Basculin</td><td>Water</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>36/114</td><td>Ducklett</td><td>Water</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>37/114</td><td>Swanna</td><td>Water</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>38/114</td><td>Alomomola</td><td>Water</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>39/114</td><td>Alomomola</td><td>Water</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>40/114</td><td>Blitzle</td><td>Electric</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>41/114</td><td>Blitzle</td><td>Electric</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>42/114</td><td>Zebstrika</td><td>Electric</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>43/114</td><td>Zebstrika</td><td>Electric</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>44/114</td><td>Joltik</td><td>Electric</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>45/114</td><td>Joltik</td><td>Electric</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>46/114</td><td>Galvantula</td><td>Electric</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>47/114</td><td>Zekrom</td><td>Electric</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>48/114</td><td>Munna</td><td>Psychic</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>49/114</td><td>Musharna</td><td>Psychic</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>50/114</td><td>Woobat</td><td>Psychic</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>51/114</td><td>Swoobat</td><td>Psychic</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>52/114</td><td>Venipede</td><td>Psychic</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>53/114</td><td>Whirlipede</td><td>Psychic</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>54/114</td><td>Scolipede</td><td>Psychic</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>55/114</td><td>Solosis</td><td>Psychic</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>56/114</td><td>Duosion</td><td>Psychic</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>57/114</td><td>Reuniclus</td><td>Psychic</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>58/114</td><td>Timburr</td><td>Fighting</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>59/114</td><td>Timburr</td><td>Fighting</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>60/114</td><td>Gurdurr</td><td>Fighting</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>61/114</td><td>Throh</td><td>Fighting</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>62/114</td><td>Sawk</td><td>Fighting</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>63/114</td><td>Sandile</td><td>Fighting</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>64/114</td><td>Krokorok</td><td>Fighting</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>65/114</td><td>Krookodile</td><td>Fighting</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>66/114</td><td>Purrloin</td><td>Dark</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>67/114</td><td>Liepard</td><td>Dark</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>68/114</td><td>Scraggy</td><td>Dark</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>69/114</td><td>Scrafty</td><td>Dark</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>70/114</td><td>Zorua</td><td>Dark</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>71/114</td><td>Zoroark</td><td>Dark</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>72/114</td><td>Vullaby</td><td>Dark</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>73/114</td><td>Mandibuzz</td><td>Dark</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>74/114</td><td>Klink</td><td>Metal</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>75/114</td><td>Klang</td><td>Metal</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>76/114</td><td>Klinklang</td><td>Metal</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>77/114</td><td>Patrat</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>78/114</td><td>Patrat</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>79/114</td><td>Watchog</td><td>Colorless</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>80/114</td><td>Lillipup</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>81/114</td><td>Lillipup</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>82/114</td><td>Herdier</td><td>Colorless</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>83/114</td><td>Stoutland</td><td>Colorless</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>84/114</td><td>Pidove</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>85/114</td><td>Tranquill</td><td>Colorless</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>86/114</td><td>Unfezant</td><td>Colorless</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>87/114</td><td>Audino</td><td>Colorless</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>88/114</td><td>Minccino</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>89/114</td><td>Cinccino</td><td>Colorless</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>90/114</td><td>Bouffalant</td><td>Colorless</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>91/114</td><td>Bouffalant</td><td>Colorless</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>92/114</td><td>Energy Retrieval</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>93/114</td><td>Energy Search</td><td>Trainer</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>94/114</td><td>Energy Switch</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>95/114</td><td>Full Heal</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>96/114</td><td>PlusPower</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>97/114</td><td>Poké Ball</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>98/114</td><td>Pokédex</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>99/114</td><td>Pokémon Communication</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>100/114</td><td>Potion</td><td>Trainer</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>101/114</td><td>Professor Juniper</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>102/114</td><td>Revive</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>103/114</td><td>Super Scoop Up</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>104/114</td><td>Switch</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>105/114</td><td>Grass Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>106/114</td><td>Fire Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>107/114</td><td>Water Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>108/114</td><td>Lightning Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>109/114</td><td>Psychic Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>110/114</td><td>Fighting Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>111/114</td><td>Darkness Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>112/114</td><td>Metal Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>113/114</td><td>Reshiram</td><td>Fire</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>114/114</td><td>Zekrom</td><td>Electric</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>115/114</td><td>Pikachu</td><td>Electric</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td><b>Total</b></td><td></td><td></td><td></td><td><b>118</b>
</td><td>
</td><td></td></tr>
</tbody></table>
<p>
REMEMBER! 1st Editions/Rev. Holos are worth more than a "normal" card!<br>
Remember this when trading your cards!
</body></html>

Upon validating my own test page…had over 900 error.Most of which I had pasted from another document made by someone else(source code).Some code like

I want every table element below “Card” to display their respective image on mouseover.Where exactly isnt important, as long as it appear on screen at the same position relative to the browser (Example: always 20 pixel over the selected element, or always in the bottom right corner) so no matter where I’m at in the list when I over a element its display the picture so I can see it.I cannot code Javascript at all,so thats why I was trying to find a Css solution.But if you could point me to a script that is easy to place and that works with tables then I will go with javascript.But I still prefer css.

Since I had seen this example and wanted to use it,because I didnt find anything else that did that with css.I began to copy paste it inside my table where my element I needed to display their images are.Since I wanted the picture displaying on mouse over to always appear on screen, I used the fixed positioning showed in [URL=“http://css-tricks.com/examples/ScrollingSidebar/css.php”]this example.But I had no clue of how to make it work with the first functionnality.And all that in a table.If you or someone could tell me or point me to how I could achieve a mouse over text that display a picture that actually is always visible(when I’m overing a element of course) where I am at.A bit like this list of film [URL=“http://www.dpstream.net/film.html”]there where a description and the cover appear when overing the titles.(They obviously use javascript,but I feel something similar can be done with css)
The validator doesnt seem to like when I use <li> tag inside the table when the <ul> is outside of it.

Like a select dropdown? I think it’s possible inside a form with a get request whose action is “#anchorID”, however it would be considered an abuse of form elements (I’m thinking from an accessibility point of view). But people have done it (forms as menus).

Not really,what I had in mind might not even be possible.An text input field where what I type will “redirect” me within the same page to what I typed if its anchored.Example:
I type in “Energy Retrieval” it does the same thing if I clicked an <a href=“#Energy Retrieval”>Energy Retrieval</a>,going directly to this <a name=“Energy Retrieval”> as I type it correclty.It would seems like a search box,and seems acting like it,inside the same page without having to actually use a real search form (like google) and wait to be redirected to result in another page.I want it simple to use so my friends will use it instead of doing Ctrl+F.Thats an optionnal thing anyways My primary goal is the stuff mentionned above.

Somehow I found my solution for the images to be fixed.I was not place the position:fixed; bit of code at the right class.I was puting it into image-holder…

Another Functionnality I would like to have is a way to update my data in the table with input box where I could enter the new value and it would update it as I hit submit at the end.
Like I have
| # | Card |Quantity|Update Qty |
| 1/114| Snivy| 2 | input field here|
at the footer have a submit button in the Update Qty column. So if I input 4 and submit it refresh the page with the new value.
Can I do that locally or I need to use a plugin/script on a server?PHP?Javascrip?
I need that so it would be more convenient to update it instead of opening each file in a text editor

This kind of thing isn’t HTML, it’s random soup. So let the validator (validator.w3.org) and an HTML guide somewhere show you where to fix that code before doing anything with CSS. I personally believe it would be way easier to write the code (at least for testing) yourself rather than letting a machine generate misformed tables, which you will fight at every step.

The reason why I used the generator is that I have over 100 page of table code and data to make and this generator allows me to modify the data inside all those page in a matter of a few minute.The whole generated page has passed the w3c validating.Its my own coding that has error.Thats the output of the generator :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="generator" content="Pokémon TCG Manager">
<style type="text/css">body, table { background-color: #FFFFFF;background-image: none; font-family: Arial,sans-serif;color: #000000; font-size: 10pt;}table, tr, th, td { border: 1px solid #000000; border-collapse: collapse }.row0 td { background-color: #FFFFFF;}.row1 td { background-color: #C0C0C0;}</style>
<title>Black & White - List</title></head><body>
<h1>Black & White - List</h1>
2013-06-10 02:56:53
<p>
Generated by Pokémon Trading Card Manager (<a href="http://birdiesoft.dk" target="_blank">http://birdiesoft.dk</a>)
<p>
115 cards in set. Own 115.
<table width="100%"><thead><tr><th>#</th><th>Card</th><th>Type</th><th>Rarity</th>
<th>Number</th>
<th>Reverse Holo</th>
<th>Condition</th>
</tr></thead><tbody>
<tr class="row0"><td>1/114</td><td>Snivy</td><td>Grass</td><td>&#9679;</td><td>4
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row1"><td>2/114</td><td>Snivy</td><td>Grass</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row0"><td>3/114</td><td>Servine</td><td>Grass</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row1"><td>4/114</td><td>Servine</td><td>Grass</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row0"><td>5/114</td><td>Serperior</td><td>Grass</td><td>*H</td><td>1
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row1"><td>6/114</td><td>Serperior</td><td>Grass</td><td>*H</td><td>1
</td><td>0
</td><td>Mint!</td></tr>
<tr class="row0"><td>7/114</td><td>Pansage</td><td>Grass</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>8/114</td><td>Simisage</td><td>Grass</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>9/114</td><td>Petilil</td><td>Grass</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>10/114</td><td>Lilligant</td><td>Grass</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>11/114</td><td>Maractus</td><td>Grass</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>12/114</td><td>Maractus</td><td>Grass</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>13/114</td><td>Deerling</td><td>Grass</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>14/114</td><td>Sawsbuck</td><td>Grass</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>15/114</td><td>Tepig</td><td>Fire</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>16/114</td><td>Tepig</td><td>Fire</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>17/114</td><td>Pignite</td><td>Fire</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>18/114</td><td>Pignite</td><td>Fire</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>19/114</td><td>Emboar</td><td>Fire</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>20/114</td><td>Emboar</td><td>Fire</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>21/114</td><td>Pansear</td><td>Fire</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>22/114</td><td>Simisear</td><td>Fire</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>23/114</td><td>Darumaka</td><td>Fire</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>24/114</td><td>Darumaka</td><td>Fire</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>25/114</td><td>Darmantian</td><td>Fire</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>26/114</td><td>Reshiram</td><td>Fire</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>27/114</td><td>Oshawott</td><td>Water</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>28/114</td><td>Oshawott</td><td>Water</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>29/114</td><td>Dewott</td><td>Water</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>30/114</td><td>Dewott</td><td>Water</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>31/114</td><td>Samurott</td><td>Water</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>32/114</td><td>Samurott</td><td>Water</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>33/114</td><td>Panpour</td><td>Water</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>34/114</td><td>Simipour</td><td>Water</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>35/114</td><td>Basculin</td><td>Water</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>36/114</td><td>Ducklett</td><td>Water</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>37/114</td><td>Swanna</td><td>Water</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>38/114</td><td>Alomomola</td><td>Water</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>39/114</td><td>Alomomola</td><td>Water</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>40/114</td><td>Blitzle</td><td>Electric</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>41/114</td><td>Blitzle</td><td>Electric</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>42/114</td><td>Zebstrika</td><td>Electric</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>43/114</td><td>Zebstrika</td><td>Electric</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>44/114</td><td>Joltik</td><td>Electric</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>45/114</td><td>Joltik</td><td>Electric</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>46/114</td><td>Galvantula</td><td>Electric</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>47/114</td><td>Zekrom</td><td>Electric</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>48/114</td><td>Munna</td><td>Psychic</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>49/114</td><td>Musharna</td><td>Psychic</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>50/114</td><td>Woobat</td><td>Psychic</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>51/114</td><td>Swoobat</td><td>Psychic</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>52/114</td><td>Venipede</td><td>Psychic</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>53/114</td><td>Whirlipede</td><td>Psychic</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>54/114</td><td>Scolipede</td><td>Psychic</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>55/114</td><td>Solosis</td><td>Psychic</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>56/114</td><td>Duosion</td><td>Psychic</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>57/114</td><td>Reuniclus</td><td>Psychic</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>58/114</td><td>Timburr</td><td>Fighting</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>59/114</td><td>Timburr</td><td>Fighting</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>60/114</td><td>Gurdurr</td><td>Fighting</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>61/114</td><td>Throh</td><td>Fighting</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>62/114</td><td>Sawk</td><td>Fighting</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>63/114</td><td>Sandile</td><td>Fighting</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>64/114</td><td>Krokorok</td><td>Fighting</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>65/114</td><td>Krookodile</td><td>Fighting</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>66/114</td><td>Purrloin</td><td>Dark</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>67/114</td><td>Liepard</td><td>Dark</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>68/114</td><td>Scraggy</td><td>Dark</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>69/114</td><td>Scrafty</td><td>Dark</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>70/114</td><td>Zorua</td><td>Dark</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>71/114</td><td>Zoroark</td><td>Dark</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>72/114</td><td>Vullaby</td><td>Dark</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>73/114</td><td>Mandibuzz</td><td>Dark</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>74/114</td><td>Klink</td><td>Metal</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>75/114</td><td>Klang</td><td>Metal</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>76/114</td><td>Klinklang</td><td>Metal</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>77/114</td><td>Patrat</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>78/114</td><td>Patrat</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>79/114</td><td>Watchog</td><td>Colorless</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>80/114</td><td>Lillipup</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>81/114</td><td>Lillipup</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>82/114</td><td>Herdier</td><td>Colorless</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>83/114</td><td>Stoutland</td><td>Colorless</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>84/114</td><td>Pidove</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>85/114</td><td>Tranquill</td><td>Colorless</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>86/114</td><td>Unfezant</td><td>Colorless</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>87/114</td><td>Audino</td><td>Colorless</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>88/114</td><td>Minccino</td><td>Colorless</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>89/114</td><td>Cinccino</td><td>Colorless</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>90/114</td><td>Bouffalant</td><td>Colorless</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>91/114</td><td>Bouffalant</td><td>Colorless</td><td>*</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>92/114</td><td>Energy Retrieval</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>93/114</td><td>Energy Search</td><td>Trainer</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>94/114</td><td>Energy Switch</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>95/114</td><td>Full Heal</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>96/114</td><td>PlusPower</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>97/114</td><td>Poké Ball</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>98/114</td><td>Pokédex</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>99/114</td><td>Pokémon Communication</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>100/114</td><td>Potion</td><td>Trainer</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>101/114</td><td>Professor Juniper</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>102/114</td><td>Revive</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>103/114</td><td>Super Scoop Up</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>104/114</td><td>Switch</td><td>Trainer</td><td>&#9830;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>105/114</td><td>Grass Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>106/114</td><td>Fire Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>107/114</td><td>Water Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>108/114</td><td>Lightning Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>109/114</td><td>Psychic Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>110/114</td><td>Fighting Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>111/114</td><td>Darkness Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>112/114</td><td>Metal Energy</td><td>Energy</td><td>&#9679;</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>113/114</td><td>Reshiram</td><td>Fire</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td>114/114</td><td>Zekrom</td><td>Electric</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row0"><td>115/114</td><td>Pikachu</td><td>Electric</td><td>*H</td><td>1
</td><td>0
</td><td>Trashed!</td></tr>
<tr class="row1"><td><b>Total</b></td><td></td><td></td><td></td><td><b>118</b>
</td><td>
</td><td></td></tr>
</tbody></table>
<p>
REMEMBER! 1st Editions/Rev. Holos are worth more than a "normal" card!<br>
Remember this when trading your cards!
</body></html>

Upon validating my own test page…had over 900 error.Most of which I had pasted from another document made by someone else(source code).Some code ended like <link rel=“stylesheet” type=“text/css” href=“theme.css” /> that /> the validator didnt like this.But somehow I found that on many page source.

I want every table element below “Card” to display their respective image on mouseover.Where exactly isnt important, as long as it appear on screen at the same position relative to the browser (Example: always 20 pixel over the selected element, or always in the bottom right corner) so no matter where I’m at in the list when I over a element its display the picture so I can see it.I cannot code Javascript at all,so thats why I was trying to find a Css solution.But if you could point me to a script that is easy to place and that works with tables then I will go with javascript.But I still prefer css.

Since I had seen this example and wanted to use it,because I didnt find anything else that did that with css.I began to copy paste it inside my table where my element I needed to display their images are.Since I wanted the picture displaying on mouse over to always appear on screen, I used the fixed positioning showed in [URL=“http://css-tricks.com/examples/ScrollingSidebar/css.php”]this example.But I had no clue of how to make it work with the first functionnality.And all that in a table.If you or someone could tell me or point me to how I could achieve a mouse over text that display a picture that actually is always visible(when I’m overing a element of course) where I am at.A bit like this list of film [URL=“http://www.dpstream.net/film.html”]there where a description and the cover appear when overing the titles.(They obviously use javascript,but I feel something similar can be done with css)
The validator doesnt seem to like when I use <li> tag inside the table when the <ul> is outside of it.

Like a select dropdown? I think it’s possible inside a form with a get request whose action is “#anchorID”, however it would be considered an abuse of form elements (I’m thinking from an accessibility point of view). But people have done it (forms as menus).

Not really,what I had in mind might not even be possible.An text input field where what I type will “redirect” me within the same page to what I typed if its anchored.Example:
I type in “Energy Retrieval” it does the same thing if I clicked an <a href=“#Energy Retrieval”>Energy Retrieval</a>,going directly to this <a name=“Energy Retrieval”> as I type it correclty.It would seems like a search box,and seems acting like it,inside the same page without having to actually use a real search form (like google) and wait to be redirected to result in another page.I want it simple to use so my friends will use it instead of doing Ctrl+F.Thats an optionnal thing anyways My primary goal is the stuff mentionned above.

Somehow I found my solution for the images to be fixed.I was not place the position:fixed; bit of code at the right class.I was puting it into image-holder…

Another Functionnality I would like to have is a way to update my data in the table with input box where I could enter the new value and it would update it as I hit submit at the end.
Like I have
| # | Card |Quantity|Update Qty |
| 1/114| Snivy| 2 | input field here|
at the footer have a submit button in the Update Qty column. So if I input 4 and submit it refresh the page with the new value.
Can I do that locally or I need to use a plugin/script on a server?PHP?Javascrip?
I need that so it would be more convenient to update it instead of opening each file in a text editor

Hi,

I’ve updated my example to use a fixed positioned image and can be seen here:

http://www.pmob.co.uk/temp/gallery-hover-stay3.htm

I’ve also put it in a table for testing and the result can be seen here:

http://www.pmob.co.uk/temp/gallery-hover-stay4.htm

The above are only rough and do rely on the images being the same size in order to center in the viewport. Fixed positioned elements are useless when they reach out of the viewport so you should probably create a media query based on the height that sets the image to absolute instead of fixed at screen heights smaller than the image height.

1 Like

Thanks a lot for your time.I had found what was wrong:

Somehow I found my solution for the images to be fixed.I was not placing the position:fixed; bit of code at the right class.I was puting it into image-holder…

,but now if anyone else is trying to do that he will be able to find a good exemple.Your is way simpler and without error.I still use the one with list tag,but I think that make the W3C validator angry since I have them inside a table.But since it work I will keep it as I have it now.

Can someone point me/tell me where or how I could achieve this below

Another Functionnality I would like to have is a way to update my data in the table with input box where I could enter the new value and it would update it as I hit submit at the end.
Like I have that table for exemple
|—#—|-Card–|-Quantity-|-Update Qty----|
|-1/114-|-Snivy-|----2-----|-input field here-|
|-2/114-|-Snivy-|----2-----|-input field here-|
|-footer-|-------|----------|-----submit-----|
at the footer have a submit button in the end of Update Qty column. So if I input 4 in the input field at row 1 and submit it refresh the page with the 1/114 card Snivy quantity showing “4” instead of the old value “2”.
Can I do that locally or I need to use a plugin/script on a server?PHP?Javascrip?
I need that so it would be more convenient to update it instead of opening each file in a text editor

I’m sure this can be done in PHP or javascript…but can it be done in HTML ?Probably not…but I would prefer using javascript over php.I’m making this whole project offline for the time being.

Hi,

As this is basically a new topic I think its better you should post a new thread with all the relevant details in the relevant forum rather than tacking onto this old thread. Post in either the Javascript forum or the PHP forum (not both) but it probably seems more like a PHP question if you are using a database to store and retrieve these values.