Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Location
    San Luis Valley, Colorado, USA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS DIV & SPAN Issue

    I am trying to make a CSS referenced (No JavaScript) webpage that allows a user to :hover an anchor <A> tag and have information from that anchor tag's <SPAN> be displayed in a <DIV> tag which is in the center of the page. An example is here:
    http://z23.org/example.o0o

    An example image of what I would like to do is located here:
    http://z23.org/example.jpg

    Most of the page is complete and the CSS file is halfway completed. I apologize for the extra info in the CSS but most of the <SPAN> and <DIV> info is at the very bottom of the CSS file, which is located here:
    http://z23.org/example.css

    Basically, the page is pretty much in working order, but when you place your cursor over any of the Some Link Text anchors as opposed to Text Link Here anchors, you will see the <IMG> and <SPAN> info displayed, albeit not where I would like them to. I want the <IMG> and <SPAN> info displayed in the center column. I realize that it has something to do with the position as well as me having a brainfart as to how to get the <SPAN> info into a <DIV> area.

    I am sure I have seen CSS perform this before without the use of JavaScript, although I have searched Google and other forums for a day trying to find what I am looking for, and I can't seem to locate anything. If there isn't a CSS solution, JavaScript would be okay to use as an alternative.

    Thanks in advance.
    oo0oo
    Last edited by oo0oo; 12-29-2005 at 04:49 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can't do this in just CSS, you will need javascript. CSS can't make text appear on other parts of the page in other elements, it can only make things appear that are within the anchor tag itself.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
      <head>
        <title>EXAMPLE</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<base href="http://z23.org/example.o0o/">
        <link rel="stylesheet" type="text/css" href="/example.css" />
    	<style type="text/css">
    	/* --------[ IMG Display SPAN Info ]-------- */
    a.imgdis {
      position: relative;
      z-index: 100;
    }
    a.imgdis:hover {
      z-index: 200;
    }
    a.imgdis span {
      display: none;
    }
    a.imgdis:hover span {
      background-color: #e4edf1;
      color: #3a454a;
      display: none; /*you don't want this showing :hover*/
      left: 11px;
      margin: 0;
      padding: 4px;
      position: absolute;
      text-align: left;
      top: 11px;
    }
    	</style>
        <!--[if IE 5]>
          <style>#nlist a {height: 1em; float: left; clear: both; width: 100%;}</style>
        <![endif]-->
        <!--[if IE 6]>
          <style>#nlist a {height: 1em;}</style>
        <![endif]-->
    	<script type="text/javascript">
    	function showInfo(where,what){
    	document.getElementById(where).innerHTML=document.getElementById(what).innerHTML;
    	}
    	</script>
      </head>
    
      <body>
        <br /><br />
        <center>
          <table border="0" width="700" cellpadding="0" cellspacing="0" class="topbot">
            <tr>
              <td>
                <center>
                  <b>BLAH BLAH BLAH SOME HEADER INFORMATION GOES HERE</b>
    
                </center>
              </td>
            </tr>
          </table>
          <br class="br8" />
          <table border="0" width="700" cellpadding="0" cellspacing="0">
            <tr>
              <td width="200">
                <div id="nlist">
    
                  <ul>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo0')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="empty"></span><span id="maininfo0"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo1')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo1"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo2')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo2"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo3')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo3"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo4')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo4"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo5')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo5"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                  </ul>
                </div>
              </td>
    
              <td width="8"><img src="/img/blank.gif" width="8" height="8" border="0" alt="" /></td>
              <td width="284" class="cendis">
                <div id="maininfo"></div>
              </td>
              <td width="8"><img src="/img/blank.gif" width="8" height="8" border="0" alt="" /></td>
    
              <td width="200">
                <div id="nlist2">
                  <ul>
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo6')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo6"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo7')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo7"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo8')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo8"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo9')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo9"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo10')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo10"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
    
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                    <li><a href="#" class="imgdis">Text Link Here</a></li>
                  </ul>
    
                </div>
              </td>
            </tr>
          </table>
          <br class="br8" />
          <table border="0" width="700" cellpadding="0" cellspacing="0" class="topbot">
            <tr>
              <td>
                <center>
    
                  blah blah blah some other footer information goes here.
                </center>
              </td>
            </tr>
          </table>
        </center>
        <br /><br />
      </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Location
    San Luis Valley, Colorado, USA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Thank you

    This worked as described and I appreciate your assistance.

    Thanks again,
    oo0oo

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    There are CSS ways to do this… I coded this as an example for someone else some time ago:

    http://richardmedek.com/temp/example4.htm

    For what you're doing I think the JS is the way to go but just letting you know it's possible.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Would be possible but that image will appear in the same spot every time and the layout the op is using would center itself on the screen and the top and left values wouldn't line up because its not the same on everyone's resolution.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Sure it would. If the main container was the relative container all of the images would be placed relative to it, so it would compensate for any centering or moving around.

    Unless I'm missing something here?

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm yeah I see what you are saying. Kinda forgot about the position:relative; thing.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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