SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mouse Over Text To Display Image On A Fixed Location

    First of all, great forum for me so far, one of the best support for CSS!

    I have few links on the left side and a default image on the right. When I mouse over any of the links on the left, a image would be displayed(Fixed position on the right). The image will only be changed when I mouse over another link and not on mouse out. This is the website of the mouse over example that I would like to achieve. Any help rendered is much appreciated.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    If you are familiar with HTML and CSS, you can just look 'under the hood' and see all the code that's used for that gallery. Have you been able to make a tart with that? If so, you can show us what you have so far and we can help you with any issues.

    Here's a similar example (except with thumbnail images):

    http://www.visibilityinherit.com/cod...h2-example.php
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you are familiar with HTML and CSS, you can just look 'under the hood' and see all the code that's used for that gallery. Have you been able to make a tart with that? If so, you can show us what you have so far and we can help you with any issues.

    Here's a similar example (except with thumbnail images):

    http://www.visibilityinherit.com/cod...h2-example.php
    These are the codes that I have so far currently.

    What I would like to have is, upon loading of the website, there will be a default image(which is the first image for the left link). When I mouseover another link, the image will change but will remain the same even when mouse is not hover over link and will only change again when mouseover another link.

    This is the trial work on the website I have done so far.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .popup {
    	zoom:1.0;
    	position:relative;
    	text-decoration:none;
    }
    .popup span {
    	position:fixed;
    	top:170px;
    	left:500px;
    	width:350px;
    	padding:10px;
    	border:10px solid #000;
    	border-radius:10px;
    	left:-999em;
    	z-index:990;
            
    }
    .popup:hover {visibility:visible}
    .popup:hover span {left:350px;}
    * html .popup span {position:absolute;}
    </style>
    </head>
    
    <body>
    
    <p><a class="popup" href="#">Ship 1<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_2.jpg"></span></a> </p>
    
    <p><a class="popup" href="#">Ship 2<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_3.jpg"></span></a> </p>
    
    </body>
    </html>

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by stormy
    The image will only be changed when I mouse over another link and not on mouse out.
    This requires Javascript. In CSS, setting something on :hover or :focus or whatever, that state is temporary. You're no longer :hovering over something when the mouse isn't sitting over the link, right?

    There is :target, which doesn't work in IE less than 9 I don't believe, which sortof does what you want: the user has to click another link to change the CSS. Seeing's how it's not cross-browser at a low level and requires your URL history to get polluted, I think Javascript is the better route.

    One thing to mention: neither the current work-in-progress, nor the original nautical site, is keyboard friendly. Web sites should not require that the user has a mouse simply to work. CSS has :focus for a reason, and Javascript also has onfocus() and onblur() to complement onmouseover() and onmouseout(). Use the keyboard versions with every mouse version, and when you need :hover or onmouseover() on something that cannot normally receive keyboard focus (anything not an anchor or form input), you can add (the illegal in HTML4 but works everywhere and is perfectly fine in HTML5) a tabindex="0" to those elements, so then with Javascript you can now haz onfocus() and onblur() events.

    A last thing to keep in mind is, the ship site and your work in progress are okay as far as distance, but don't let your distance grow much between where the user does his/her action and where the image appears. For accessibility and usability reasons, try to keep the event and the result physically close to each other.

    Code:
    .popup span {
    	position:fixed;
    Fixed is in relation to the user's monitor and not the web site. You know, it's as if you stuck a Post-It note on the user's screen: it doesn't move when the user scrolls and stuff. I don't think you meant to use that. Position: absolute generally is what you want with these kinds of things.

    It's "safer" (more stable) to make the positioned parent (the anchor) a block of some sort. Opera for example had issues with loosy goosy inlines being positioned parents, and I'm not sure if this has been fixed yet. IE of course has been notorious for similar issues. Also, for IE, we've learned we don't want to change someone's "state" (whether they're a block or not, setting display: or position: etc) on the pseudo-classes like :hover. IE is a whiny brat in that way.

    Code:
    .boatz {
      set the width you want here. This will automagically limit the width of the anchors too;
    }
    
    /*all anchors in this ul*/
    .boatz a {
    	display: block;
            width: 100%; /*this Haslayout trigger taking the place of zoom and therefore passes the validator, if it matters. Width is already naturally 100% by default anyway so we haven't changed anything except trigger Haslayout for IE*/
    	position:relative;
    	text-decoration:none;
    }
    /*all images inside boat ul*/
    .boatz img {
    	position: absolute;
            display: block; /*abso-position is already block context; you only need this line if IE is squirrely without it. Otherwise, take this line out*/
    	width:350px;
    	padding:10px;
    	border:10px solid #000;
    	border-radius:10px;
    	margin-left:-9999px; /*IE likes margins better than "left" for some reason*/
            top:170px;
            left: 0; /*but set a left and top for stability*/
    }
    
    .boatz a:hover, .boatz a:focus {
    give users some visual feedback on the anchor itself too, like underline or colour change or something;
    }
    
    .boatz a:hover img, .boatz a:focus img {
    	margin-left: 500px; /*set the image where you want it on hover/focus of anchor*/
    }
    </style>
    </head>
    
    <body>
    
    <ul class="boatz">
      <li><a id="boat1" href="#boat1">Ship 1 <img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_2.jpg"  alt="I'm on a boat!"></a></li>
      <li><a id="boat2" href="#boat2">Ship 2 <img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_3.jpg" alt="LIKE A BOSS"></a> </li>
    </ul>
    If the images aren't just fun decoration, they get an alt text that either describes the image, or "says" whatever the image says to users (the meaning/reason for the images).
    The id's/hrefs on the anchors is so that if your page is long and the anchors are not already at the top, the user will not be brought up to the top of the page (what "#" does) when they click. You can remove the id if the anchor will ultimately go somewhere instead. Some people just click on links immediately without waiting to see if something pops up.

    You can also put the images in CSS alone, which is when you'd use the span.
    The span would refer to the anchor's unique ID to each have a separate background image. If you do it this way, then the span is pre-styled as a abso-po'd block with dimensions and the background image, and all that changes on hover/focus is, again, the left or margin-left position. If you do it this way, Javascript would probably best be used to add/remove a class that sets if the span is on-screen or not. So you'd be setting the class on mouseover/onfocus and only removing it when another onmouseover/onfocus event occurs.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Stomme poes, thanks for the help so far.

    I have managed to do up a bit and would need the coding for the following. I want the image on the right to stay even after I have mouse out the link and the image will only change until I mouse over another link on the left. What additional codes would I require to perform this?

    These are my codes so far. This is my test site.

    CSS
    Code:
    .gallerycontainer{
    position: relative;
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }
    
    .thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    }
    
    .thumbnail:hover img{
    border: 1px solid blue;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    left: 230px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }
    Body
    Code:
    <div class="gallerycontainer">
    
    <a class="thumbnail" href="#thumb">Ship 1<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_2.jpg" /></span></a>
    
    <br />
    
    <a class="thumbnail" href="#thumb">Ship 2<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/AccomodationWorkBoats_3.jpg" /></span></a>
    
    </div>

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    To get this working you will need JS as Stomme has said. So that being said, many of us here in the CSS forum aren't well versed in the JS section of things.

    I'll request a move to the JS forum for you .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, much appreciated.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's an old example that shows a persistent image after you mouseover a link.

    The JS adds a class of .over to the list item when rolled over and you use that class to make the image appear rather than using hover (although the demo uses both so that it still mostly works with JS off).

    When the item is rolled over the JS first clears all previous instances of the class called .over and then just applies it to the current one only.

    It's pretty basic JS but that's where I'm at

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the example, this is what I am looking for.

    Currently I am having some positioning issue. This is what I would like to achieve. -->Link to Image.

    Link to website

    I try playing around with ".image-holder" and ".outer" but I failed to achieve what I wanted. Please be slow on me as this is the first time I am getting my hands on css stuff, thank you for the patience and understanding. If this is not the correct section, please kindly help me to move back to the CSS section.

    These are my current codes.

    CSS
    Code:
    .outer {
    width:450px;
    margin:auto;
    position:relative;/* stacking context*/
    overflow:auto;
    }
    
    .image-holder {
    float:right;
    margin:88px 10px 10px 0;
    width:300px;
    height:300px;
    background:#fffccc;
    border:1px solid #000;
    padding:3px;
    position:relative;
    z-index:1;
    display:inline;
    padding:10px 10px 20px;
    }
    ul.links {
    list-style:none;
    margin:0 20px;
    padding:0;
    width:50px;
    }
    .links li {
    width:50px;
    list-style-type: none;
    }
    .links li a {
    display:block;
    width:90px;
    padding:5px;
    text-decoration:none;
    }
    
    .links li a span, .links li a b {
    position:absolute;
    right:24px;
    top:-999em;
    width:300px;
    height:300px;
    z-index:2;
    }
    .links li a span img {
    display:block;
    margin:0 0 5px
    }
    .links li a:hover, .links li.over a {
    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;
    }
    BODY
    Code:
    <div class="outer">
    <p class="image-holder"><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/GeneralPurposeBoats_1.jpg" width="350" height="250" alt="example image" /></p>
    <ul id="over" class="links">
    <li><a href="">Link 1<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/GeneralPurposeBoats_1.jpg" width="350" height="250" alt="example image" /></span></a></li>
    <li><a href="">Link 2<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/GeneralPurposeBoats_2.jpg" width="350" height="250" alt="example image" /></span></a></li>
    <li><a href="">Link 3<span><img src="http://insurancecommissionrefund.com/testwebsite/wp-content/uploads/2012/04/GeneralPurposeBoats_3.jpg" width="350" height="250" alt="example image" /></span></a></li>
    </ul>
    </div>

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have a lot of errors on that page that you should fix Pop over the w3c html validator and get it validated before you move on with this. Don't worry we all have to start somewhere but the most important thing is to use the correct code logially and semantically.

    Regarding the rollover then here is the updated code:

    Code:
    .outer {
    	width:480px;
    	margin:auto;
    	position:relative;
    	overflow:auto;
    }
    .image-holder {
    	float:right;
    	margin:0 8px 10px 0;
    	width:350px;
    	height:250px;
    	background:#fffccc;
    	border:1px solid #000;
    	padding:3px;
    	position:relative;
    	z-index:1;
    	display:inline;
    	padding:10px 10px 10px;
    }
    ul.links {
    	list-style:none;
    	margin:0 20px;
    	padding:0;
    	width:40px;
    }
    .links li {
    	width:40px;
    	list-style-type: none;
    }
    .links li a {
    	display:block;
    	width:40px;
    	padding:5px;
    	text-decoration:none;
    }
    .links li a span, .links li a b {
    	position:absolute;
    	right:19px;
    	top:-999em;
    	width:350px;
    	height:250px;
    	z-index:2;
    	overflow:hidden
    }
    .links li a span img {
    	display:block;
    	margin:0 0 5px
    }
    .links li a:hover, .links li.over a { visibility:visible; }
    .links li a:hover span, .links li.over a span { top:11px; }
    Make sure your html is well formed as you have many missing end tags and broken and invalid structures as mentioned above.

    As an example the bottom of the page should look like this:

    Code:
    <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);
    //--><!]]&gt;
    </script> 
    <script type='text/javascript' src='http://insurancecommissionrefund.com/testwebsite/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.8.16'></script> 
    <script type='text/javascript' src='http://insurancecommissionrefund.com/testwebsite/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.8.16'></script> 
    <script type='text/javascript' src='http://insurancecommissionrefund.com/testwebsite/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js?ver=1.8.16'></script>
    </body>
    </html>

    You have two or three html and body closing tags plus odd p elements all around the place. There is no need to wrap everything in a table either.

    Also don't invent your own elements.

    Code:
    	<SideBar>General Purpose Boats</SideBar>
    There is no html element called SideBar!

    You would need to use a class instead.

    Code:
    <h3 class="SideBar">General Purpose Boats</h3>
    As the text is a heading then it should be a heading tag at the correct level (it depends on document structure so the h3 may not be the correct level depending n the rest of the page so keep it logical).

    I'm not sure why you have so much code in that page for such a simple site.

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the great help so far, I am still new and starting out.

    How do I set the alignment of the links on the left so that it is aligned together with the caption "Please select a ship to view."?

    Best Regards,
    Chris.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Like this
    Code:
    .outer{width:100%}
    ul#over{
    margin:0;
    padding:0;
    list-style:none;
    }

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works but when I mouse over the link, the picture is not displayed at the correct position.

    Is there a better way to align the picture by taking onto reference point on something?

    Currently, I am using one of this ccs is to adjust the location of the picture --> .links li a:hover span, .links li.over a span { top:254px; left: 531px; }

    If so, if I have different pages on different types of ship, I think the display of the image will change since the position is taking reference to px and if the page length is different, the positioning will be out?

    Thanks so far for bearing with a newbie like me.

    Best Regards,
    Chris.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You removed the position:relative that I had placed on .outer in my demo.

    Its the position:relative that creates the stacking context for the absolutely placed span and therefore the element will always be placed in relation to .outer (which should only contain your links and image etc).

    Put position:relative back on .outer and then change the absolute co-ordinates for the span and the whole block will move as a whole should content be placed above or below as required.

  15. #15
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You removed the position:relative that I had placed on .outer in my demo.

    Its the position:relative that creates the stacking context for the absolutely placed span and therefore the element will always be placed in relation to .outer (which should only contain your links and image etc).

    Put position:relative back on .outer and then change the absolute co-ordinates for the span and the whole block will move as a whole should content be placed above or below as required.
    Ah yes, this is precisely what I wanted, thanks!

  16. #16
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I have an enquiry that is puzzling. As of right now, when I mouse over my "Nautika Fleet" tab, a drop down box will appear. Whenever, I tried to mouse over the drop down menu link that is overlapping the links on the left, the drop down menu will automatically disappear. I hope I am explaining correctly here.

    You can take a look over here again.

    Best Regards,
    Chris

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Positioned elements gain a stacking context and assuming all things are equal than positioned elements that follow later in the html will stack on top of elements that went before. This is what is happening to your positioned menu when it meets the positioned .outer (where position:relative was added).

    To control the stacking of positioned elements you can use the z-index property (it only applies to positioned elements) and you can therefore raise the z-index of the menu so that it stays on top of other elements.

    e.g.

    Code:
    .dropv{position:relative;z-index:99}

  18. #18
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Positioned elements gain a stacking context and assuming all things are equal than positioned elements that follow later in the html will stack on top of elements that went before. This is what is happening to your positioned menu when it meets the positioned .outer (where position:relative was added).

    To control the stacking of positioned elements you can use the z-index property (it only applies to positioned elements) and you can therefore raise the z-index of the menu so that it stays on top of other elements.

    e.g.

    Code:
    .dropv{position:relative;z-index:99}
    Hi, thank! I have learned a lot from you.

  19. #19
    SitePoint Member
    Join Date
    May 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mouse Over Text to Display Image "Centred"

    Hi There,

    I looked at the codes provided in this forum and i tried it out. Works real well. Thanks for sharing such an awsome piece.

    I have just one problem. My image appears to be far right of the page. Is there any way i could get the image to be centred on the window.

    Your help will be very much appreciated.

    My Current Code is:
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><style type="text/css">
    .popup {
    zoom:1.0;
    position:relative;
    text-decoration:none;
    }
    .popup span {
    position:fixed;
    top:100px;
    left:300px;
    width:350px;
    padding:10px;
    border:10px solid #000;
    border-radius:10px;
    left:-900em;
    z-index:900;

    }
    .popup:hover {visibility:visible}
    .popup:hover span {left:-20px;}
    * html .popup span {position:absolute;}</style><a class="popup" href="#"><font color="#ff0000">ClICK HERE</font><span><img alt="" src="/content/groups/public/@empl/@apacsc/@asc/documents/webcontent/cnt163625462578.png" /></span></a>&nbsp;to view the APAC Process Flow Stage and Status.</p>

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi krizhlal. Welcome to the forums.

    Quote Originally Posted by krizhlal View Post
    My image appears to be far right of the page. Is there any way i could get the image to be centred on the window.
    Indeed there is. The image can be positioned in relation to its container instead of the window itself. The container just needs to have position: relative; applied to it. But we'd need to see your page (HTML and CSS) to advise properly.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  21. #21
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi I used this exemple from this thread but now I want to use that in conjunction with 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 )

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    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.

  23. #23
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here's my code

    Okay here's the code on the test page :
    Code:
    <!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\titles\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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\types\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 :
    Code:
    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.

  24. #24
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code:
    <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.

  25. #25
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :
    Code:
    <!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>●</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>●</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>♦</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>♦</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>●</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>♦</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>●</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>♦</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>●</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>●</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>●</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>♦</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>♦</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>●</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>♦</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>●</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>♦</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>●</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>●</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>♦</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>♦</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>●</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>♦</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>♦</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>●</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>♦</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>●</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>●</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>♦</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>●</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>●</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>♦</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>●</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>♦</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>●</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>♦</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>●</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>♦</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>●</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>●</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>♦</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>●</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>♦</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>●</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>●</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>●</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>●</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>●</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>♦</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>●</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>●</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>♦</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>●</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>●</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>♦</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>●</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>♦</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>♦</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>●</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>♦</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>♦</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>●</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>♦</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>♦</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>♦</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>♦</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>♦</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>♦</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>●</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>♦</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>♦</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>♦</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>♦</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>●</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>●</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>●</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>●</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>●</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>●</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>●</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>●</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 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 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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •