Well i asked this a while back but i really didnt find anything so here it is again ...

Im looking for a way to display content to the right of my list of services, so clicking or hovering over one would bring up a short description to the right. Sort of like an accordion as some one said in my last post, but i havent been able to find one with the content positioned to the right. There always in some sort of box or with fancy sliding which i dont want. I just want something simple, my unordered list to the left with the content to the right. Being more specific the content will be floated to the right so its on the same line as the ul (if that makes sense ??). See attachment for a better idea of what im looking for here. Where ive got Our Services thats my unordered list and to the right would be my content. Any suggestions / ideas ?

Do you mean a hover popup? You can position the popup wherever you want and it can be on the same level as each link (ie in the same relationship) or each can be positioned in precisely the same place even though the links are one below the other or beside each other.

http://www.wickham43.net/hoverpopups.php

 

Also google for "tooltips" although they are usually very close to the link.

That hover popup could work, the only problem being it doesnt seem to align at the very top but aligns on the same level of the link but you say i can align them in the same place ? I had a quick mess around with the code in firebug but couldnt seem to, i guess ill have another look later.

You can position all popups in the same place. Item 2 on my link describes the procedure in the text below and applies equally to item 1 (but it wasn't done for item 1).

 

The stylesheet has an offset horizontal and vertical for the first popup from the first link, and so if the second link is 40px below the first, the second popup will also be 40px below the first, so you have to add an inline style or class for the second and subsequent popups to compensate (ie if the stylesheet had 30px as the top position, your inline style for the second popup needs this editing to -10px to raise it up from where it would otherwise be, and so on for the others and possibly for a horizontal offset edits too.

You could try addapting a tabs script so that the menu is a vertical menu, floated to the left and the content floated to the right. I'll have a look and see if I can get it to work. If I can, I post it here for you

You can position all popups in the same place. Item 2 on my link describes the procedure in the text below and applies equally to item 1 (but it wasn't done for item 1).

 

The stylesheet has an offset horizontal and vertical for the first popup from the first link, and so if the second link is 40px below the first, the second popup will also be 40px below the first, so you have to add an inline style or class for the second and subsequent popups to compensate (ie if the stylesheet had 30px as the top position, your inline style for the second popup needs this editing to -10px to raise it up from where it would otherwise be, and so on for the others and possibly for a horizontal offset too edits too.

 

Got it , seems to be working good the only problem being i cant get one to display by default with it being pure css. I guess you cant have it all

i cant get one to display by default with it being pure css

 

I'm sure you can. You put a normal image in the place where you want the popups to show and it will be covered by the popups when they show. You can see from my link that the popups cover the space they occupy.

Hello. Okay I have got the following to work rather nicely in firefox, although have not tested it extensively. Basically I have taken a simple jquery script used for creating tabs within a web page and styled it to display the content to the right of the links.

 

You will first need the jquery library found on their web site.

 

Next you need this little jquery script:

 

$(document).ready(function () {$('#tabs').tabify();});(function($){$.fn.extend({tabify:function(){function getHref(a){hash=$(a).find('a').attr('href');if(hash)return hash.substring(0,hash.length-4);else return false}function setActive(a){$(a).addClass('active');if(getHref(a))$(getHref(a)).show();else return false;$(a).siblings('li').each(function(){$(this).removeClass('active');$(getHref(this)).hide()})}return this.each(function(){var a=this;$(this).find('li a').each(function(){$(this).attr('href',$(this).attr('href')+'-tab')});function handleHash(){if(location.hash)setActive($(a).find('a[href='+location.hash+']').parent())}if(location.hash)handleHash();setInterval(handleHash,100);$(this).find('li').each(function(){if($(this).hasClass('active'))$(getHref(this)).show();else $(getHref(this)).hide()})})}})})(jQuery);

 

Now style the CSS

.tab-container{ padding: 0 0 10px 0; border-bottom:1px #ccc solid; }
#tabs{margin:0;padding:0;width:250px; float:left; display:inline; font-size:.9em;}
#tabs h3{ padding: 0 0 10px 0; margin: 0px; color:#BF0000; }
#tabs ul{margin:0;padding:0;}
#tabs li{padding:0;margin:5px 0;list-style-type:none;}
#tabs li a {color:#000; margin:0;padding:3px 10px;display:block;text-decoration:none;}
#tabs li a:hover{color:#BF0000; text-decoration: underline;}
#tabs li.active a{color:#BF0000; text-decoration: underline;}
.tabcontent {width:479px; border-left:1px #ccc solid; padding:0 10px; margin:0; font-size:.8em; float:right; display:inline}
.tabcontent h3{padding: 0 0 10px 0; margin: 0px; color:#2080D0;}

 

Lastly the html:

<div class="tab-container">
 <div id="tabs">
   <h3>Our Services</h3>
 	<ul>
 	  <li class="active"><a href="#tabs-1">Web Design and Development</a></li>
 	  <li><a href="#tabs-2">Content Management Systems</a></li>
 	  <li><a href="#tabs-3">E-commerce</a></li>
 	</ul>
 	<div class="clear"></div>
 </div>

 <div id="tabs-1" class="tabcontent">
   <h3>Web Design and Development</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum lectus ut turpis. Maecenas tincidunt libero sed orci. Phasellus fringilla laoreet elit. Cras vel enim eu neque pretium faucibus. Vivamus sit amet massa at ligula tincidunt aliquet. Integer aliquam, sem et ornare pharetra, est est pellentesque arcu, eget blandit lorem sem at ligula. Phasellus convallis.</p>
 </div>

 <div id="tabs-2" class="tabcontent">
   <h3>Content Management Systems</h3>
   <p>Proin imperdiet diam at dolor vestibulum viverra. Sed aliquet. Donec tempus mi in turpis. Etiam est mauris, blandit quis, vehicula sed, placerat eu, nunc. Mauris suscipit, nisl at ornare pretium, nisi nulla ullamcorper leo, nec iaculis ipsum sapien in elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque id metus. Phasellus sit amet sem. Nunc fringilla augue. Nunc purus. Morbi neque nibh, adipiscing imperdiet, congue vitae, malesuada eget, dui.</p>
 </div>

 <div id="tabs-3" class="tabcontent">
   <h3>E-commerce</h3>
   <p>Sed aliquet lacus eu sem. Vivamus rhoncus eros nec ipsum. Integer eleifend, arcu at condimentum egestas, enim risus interdum turpis, ac dictum nunc ligula eu massa. Praesent hendrerit lacus at lectus. Fusce fringilla ligula in ligula. Curabitur auctor risus id orci. Sed neque nibh, adipiscing non, feugiat posuere, congue vel, enim. Vivamus id velit. Proin pharetra odio vitae est. Fusce vel augue. In tellus erat, condimentum eu, rutrum eu, euismod at, lacus. Sed sit amet nunc a justo pellentesque pellentesque. Aenean est mauris, rutrum sit amet, feugiat et, blandit quis, lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac mauris. Mauris lobortis. Integer ullamcorper quam at neque.</p>
 </div>

 <div class="clear"></div>
</div>

 

I have attached some screen shots so you can get an idea of how it would look.

 

The fourth screenshots shows what happens if javascript is disabled, basically all the content is visible and the links act like links to an anchor.

WOW thanks that works just brilliant , you've saved me alot of time. I cant thank you enough for this, really if theres anything i can do to show my appreciation just ask. Thanks !!

Which option are you going to use... the css popup option or the jquery tabs option?

Ill be using the jquery method you posted, i think its great.

Glad it works for you.

The original jquery code is not mine though, you can find the original here.