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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help with spans (I think)

    Hello all!

    I'm working on a website for my link collection: http://rachguthetc.org

    As you can see I only have two links up at the moment, because I don't want to put a bunch up and realize I need to do things differently to get the site how I want...

    Each row is for a category of links. What I want is for a written description of the link to pop up in the dotted box to the right of the rectangle when the mouse hovers over one of the linked images.

    I have a vague idea that I need to use spans to do this... problem is I know nothing of spans!

    I would truly appreciate any help you all could give me on this issue, I'm excited to get the rest of my links up and make the site public!!!

    xoxo, Rachel

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    haven't time right now to look in depth but, for starters, the big list of divs, should actually be a list - <ul></li></li></ul>

    btw, welcome to cf

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bazz, thanks for your response. Do you mean in order for me to employ spans to do what I want, I will need to change my divs to a list? Thanks for anymore help you could offer!!
    Rachel

  • #4
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, UK
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    There are plenty of premade javascript scripts that do this easily...have a search for something like 'tooltip script'

  • #5
    New Coder
    Join Date
    May 2010
    Location
    Midwest, USA
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Re: help with spans (I think)

    I started on a little workup last night showing how I'd use a list for your site. I'll finish up this evening, after some yardwork.

    Here's what I have so far. You can see that spans aren't necessary. This will require some JS to work in IE 6, but will work as is in most modern browsers. Still need some tweaking on the absolute positioning of the description.

    Here's the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>RACH GUTH LINKS!</title>
    <style type="text/css">
    <!--
    body {
    	margin: 0;
    	padding: 0;
    	background-color: #000;
    	text-align: center;
    }
    #wrapper {
    	width: 95%;
    	position: relative;
    	text-align: left;
    }
    #links ul {
    	position: relative;
    	width: 100%;
    }
    #links {
    	margin: 0;
    	padding: 0;
    	
    }
    #links li {
    	list-style: none;
    	float: left;
    }
    #links li a {
    	display: block;
    	text-decoration: none;
    }
    
    
    #links li ul {
    	display: none;
    }
    #links li:hover ul {
    	display: block;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: .75em;
    	height: 200px;
    	width: 200px;
    	text-align: left;
    	position: absolute;
    	right: 0px;
    	top: 0px;
    	color: #FFF;
    }
    #links li:hover li {
    	float: none;
    }
    .clearfloat {
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    -->
    </style>
    </head>
    <body>
    
    <div id="wrapper">
      <div id="links">
        <ul>
          <li><a href="http://www.birdbook.org/"><img src="images/birdbook.jpg" alt="birdbook" /></a>
           <ul>
              <li>
                Description for birdbook goes here.
              </li>
            </ul> 
          </li>
          <li><a href="http://www.pictorymag.com/"><img src="images/pictory.jpg" alt="pictory" /></a>
            <ul>
              <li>
                Description for pictory goes here.
              </li>
            </ul>
          </li>
        </ul><br class="clearfloat" />  <ul>
          <li><a href="http://www.birdbook.org/"><img src="images/birdbook.jpg" alt="birdbook" /></a>
           <ul>
              <li>
                Description for birdbook goes here.
              </li>
            </ul> 
          </li>
          <li><a href="http://www.pictorymag.com/"><img src="images/pictory.jpg" alt="pictory" /></a>
            <ul>
              <li>
                Description for pictory goes here.
              </li>
            </ul>
          </li>
        </ul>
        <!-- #links -->
      </div>
      <!-- #wrapper -->
    </div>
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh my goodness Tinimic... what an incredible help you are being!!! I will toy around with this today, I don't know how I could thank you enough :] I will let you know how it works out!
    Rachel

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by rachinabox View Post
    bazz, thanks for your response. Do you mean in order for me to employ spans to do what I want, I will need to change my divs to a list? Thanks for anymore help you could offer!!
    Rachel
    Two separate issues but related in a way. The code you build should be semantic which means a list of stuff should be in an XHTML list - <ul><li></li></ul>

    Once you have done that, it is easier to add the feature you need, whether it requires span tags or not.

    Your LI tags could be like this
    Code:
    <li class='class_name'>
                Straightforward text
                <a class='tooltip' href="#"><span>hover text</span><span class='the_tip'>here is your tootip that is invisible until someone hovers their mouse over the hover text</span></a>
                        </li>
    If the html output looks like that, I can send you the css which you can adjust to suit your own site's design.

    I recommend you do not use Javascript. And the suggestion I am running with, doesn't require js even for IE 6.


    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    New Coder
    Join Date
    May 2010
    Location
    Midwest, USA
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Re: help with spans (I think)

    Here's the updated page that I promised.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>RACH GUTH LINKS!</title>
    <style type="text/css">
    <!--
    body, html {
    	behavior:url("csshover3.htc"); /*-- this file can be accessed to provide compatibility for li:hover with IE6 --*/
    	background-color: #000;
    	color: #FFF;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    }
    #wrapper {
    	border: 2px solid #CCC;
    	margin-left: auto;
    	margin-right:auto;
    	overflow: hidden;
    	position: relative;
    	text-align: left;
    	width: 95%;
    }
    #top {
    	font-family: "Courier New", Courier, monospace; 
    	text-align: center;
    }
    #top span {
    	display: block;
    	font-size: 2.5em;
    }
    #links {
    	margin: 0;
    	padding: 0;
    }
    #links ul {
    	position: relative;
    	width: 100%;
    }
    #links li {
    	float: left;
    	list-style: none;
    }
    #links li a img {
    	border: none;
    	display: block;
    	height: 200px;
    	text-decoration: none;
    	width: 40px;
    }
    #links li ul {
    	display: none;
    }
    #links li:hover ul {
    	background-color: #000;
    	border: 1px dotted #996;
    	display: block;
    	padding: 1em;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: .75em;
    	height: 200px;
    	position: absolute;
    	right: 60px;
    	top: 0px;
    	width: 200px;
    }
    .clearfloat {
    	clear:both;
    	font-size: 1px;
    	height:0;
    	line-height: 0px;
    }
    #footer {
    	background-color: #CCC;
    	color: #000;
    	font-size: .75em;
    	margin-top: 5px;
    	padding: 5px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="top">
        <p><span>LINKSLINKSLINKSLINKSLINKSLINKSLINKSLINKSLINKS</span></p>
        <div id="title">
          <p> {<a href="mailto:rachinabox@gmail.com">email</a>} {<a href="http://365.rachinabox.com">blog</a>}<br />
            <br />
            my collection grows and grows. <br />
            roll over each image to see a description of the link. <br />
          </p>
        </div>
        <p><span>LINKSLINKSLINKSLINKSLINKSLINKSLINKSLINKSLINKS</span></p>
      </div>
      <div id="links">
      <!-- start first ul listing of links -- ie. the first row/category of links --> 
        <ul>
          <li><a href="http://www.birdbook.org/"><img src="images/birdbook.jpg" alt="birdbook" /></a>
            <!-- start ul sublist -- notice that you don't close the parent li until after the sublist ul is closed -->
            <ul>
              <li> Description for birdbook goes here. </li>
            </ul>
            <!-- end of ul sublist -- close the parent li -->
          </li>
          <li><a href="http://www.pictorymag.com/"><img src="images/pictory.jpg" alt="pictory" /></a>
            <ul>
              <li> Description for pictory goes here. </li>
            </ul>
          </li>
          <!-- end of first ul -->
        </ul>
        <br class="clearfloat" /> <!-- forces the next ul to the next row -->
        <ul>
          <li><a href="#"><img src="" alt="image description" />1</a>
            <ul>
              <li> Description for link 1 goes here. </li>
            </ul>
          </li>
          <li><a href="#"><img src="" alt="image description" />2</a>
            <ul>
              <li> Description for link 2 goes here </li>
            </ul>
          </li>
          <li><a href="#"><img src="" alt="image description" />3</a>
            <ul>
              <li> Description for link 3 goes here </li>
            </ul>
          </li>
          <li><a href="#"><img src="" alt="image description" />4</a>
            <ul>
              <li> Description for link 4 goes here </li>
            </ul>
          </li>
          <li><a href="#"><img src="" alt="image description" />5</a>
            <ul>
              <li> Description for link 5 goes here </li>
            </ul>
          </li>
        </ul>
        <!-- #links -->
      </div>
      <br class="clearfloat" />
      <div id="footer">
        <p>You can put footer info here.</p>
      </div>
      <!-- #wrapper -->
    </div>
    </body>
    </html>
    I included a couple comments that you can remove as you change it around to fit your design.

    This markup degrades reasonably well in browsers that don't support CSS, and uses no JavaScript.

    Note the first property declaration for the body selector.

    Code:
    behavior:url("csshover3.htc");
    For Microsoft Internet Explorer 5 and later, HTML Components (HTCs) provide a mechanism to implement components in script as Dynamic HTML (DHTML) behaviors. An HTC is an HTML file that contains script and a set of HTC-specific elements that define the component. The component is saved with an .htc extension.

    There are many .htc files available on the Web to control behaviors of Internet Explorer. The most well-known of these is Whatever:hover by Peter Nederlof.

    Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. Version 3 introduces ajax support, meaning that any html that gets inserted into the document via javascript will also trigger :hover, :active and :focus styles in IE.

    You can download the latest version and get more explanation at:

    http://www.xs4all.nl/~peterned/csshover.html

    My approach may not be the best one, as I just started learning HTML/CSS in February. I do appreciate your post to the forum because I learned a lot while researching a solution. Hope this has helped. You can PM me any time with questions.


  •  

    Posting Permissions

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