Sun, 2014-01-12 19:10
Hi guys
In the first place I hope this is the right place for posting my request!iPls be patient, I'm from Italy, so my English is imperfect... therefore I hope to explain the situation in the most correct way. Moreover, please consider I'm a beginner. Because of this reason every detailed suggestion will be truly appreciated ^-^
Problem: I and a friend of mine opened a blog using Blogger. We "adopted" the code from a widget by creating our own, but probably we made a few mistakes! BTW, the widget allows to show in the correct way a few pictures one after the other.
Well, we had the idea to add a specific tooltip for one image, and we adopted and adapted more than one code for creating our own!
We added a CSS code (totally new, originally not present). It is partially working: the tooltip opens, but only into the widget, as you can see in the picture at the following link https://app.box.com/s/szr9p5b236nsg2hd96mh
The code used for the slider is here:
<style type="text/css"> /* CSS TOOLTIP CODE */ /* p.photo_container{width:400px;height:300px;position:relative;margin:25px auto;} */ p.photo_container a{text-decoration:none;color: #0000FF ;cursor:pointer;font-weight:normal;} p.photo_container a span{visibility:hidden;position:absolute;left:200px;top:70px; background:#FCABFF;width:300px;border:1px solid #CE53F0;font-size:0.8em;padding:25px 25px;cursor:default;line-height:140%; border-radius: 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 10px 10px rgba(0, 0, 0, 0.1); font-family: Calibri, Tahoma, Geneva, sans-serif; text-align: justify;} p.photo_container a:hover span{visibility:visible;} /* p.photo_container img{border:1px solid gray;width:400px;height:300px;} */ </style> <!-- Featured Content Slider Started --> <div class='fp-slider clearfix'> <div class='fp-slides-container clearfix'> <div class='fp-slides'> <!-- Slide 1 Code Start --> <div class='fp-slides-items'> <div class='fp-thumbnail'> <!-- CSS TOOLTIP --> <p class="photo_container"> <a href="www.example.com" target="_blank"><img src="www.example.com/img1.jpg" alt="Alt1"/><span>A<br> <br>very<br> very<br> very<br> long<br> text <br></span></a> </p></div> <div class='fp-content-wrap'> <div class='fp-content'> <h3 class='fp-title'> <a href='www.example.com'>Link1</a> </h3> <p> Par1 </p> </div> <div class='fp-prev-next-wrap clearfix'> <a class='fp-next' href='#fp-next'></a> <a class='fp-prev' href='#fp-prev'></a> </div> </div> </div> <!-- Slide 1 Code End --> <!-- Slide 2 Code Start --> <div class='fp-slides-items'> <div class='fp-thumbnail'> <a href='www.example.com' target="_blank"><img title="Title2" src="www.example.com/img2.jpg"/></a> </div> <div class='fp-content-wrap'> <div class='fp-content'> <h3 class='fp-title'> <a href='www.example.com'>Link2</a> </h3> <p> Par2 </p> </div> <div class='fp-prev-next-wrap clearfix'> <a class='fp-next' href='#fp-next'></a> <a class='fp-prev' href='#fp-prev'></a> </div> </div> </div> <!-- Slide 2 Code End --> <!-- Slide 3 Code Start --> <div class='fp-slides-items'> <div class='fp-thumbnail'> <a href='www.example.com' target="_blank"><img title="Title3" src="www.example.com/img3.jpg"/></a> </div> <div class='fp-content-wrap'> <div class='fp-content'> <h3 class='fp-title'> <a href='www.example.com'>Link3</a> </h3> <p> Par3 </p> </div> <div class='fp-prev-next-wrap clearfix'> <a class='fp-next' href='#fp-next'></a> <a class='fp-prev' href='#fp-prev'></a> </div> </div> </div> <!-- Slide 3 Code End --> <!-- Slide 4 Code Start --> <div class='fp-slides-items'> <div class='fp-thumbnail'> <a href='www.example.com' target="_blank"><img title="Title4" src="www.example.com/img4.jpg"/></a> </div> <div class='fp-content-wrap'> <div class='fp-content'> <h3 class='fp-title'> <a href='www.example.com'>Link4</a> </h3> <p> Par4 </p> </div> <div class='fp-prev-next-wrap clearfix'> <a class='fp-next' href='#fp-next'></a> <a class='fp-prev' href='#fp-prev'></a> </div> </div> </div> <!-- Slide 4 Code End --> <!-- Slide 5 Code Start --> <div class='fp-slides-items'> <div class='fp-thumbnail'> <a href='www.example.com' target="_blank"><img title="Title5" src="www.example.com/img5.jpg"/></a> </div> <div class='fp-content-wrap'> <div class='fp-content'> <h3 class='fp-title'> <a href='www.example.com'>Link5</a> </h3> <p> Par5 </p> </div> <div class='fp-prev-next-wrap clearfix'> <a class='fp-next' href='#fp-next'></a> <a class='fp-prev' href='#fp-prev'></a> </div> </div> </div> <!-- Slide 5 Code End --> </div> <div class='fp-nav'> <span class='fp-pager'/> </span></div> </div> </div> <div style='clear:both;'/> <!-- Featured Content Slider End --></div>
In case you need the code of the forum template, please be so kind to download it by copying/pasting the following link https://app.box.com/s/j7q7xw0yyv9pqlthcsjc
Thanks
(As you can easily guess, it is very long and I preferred not to post it directly on the forum)
Is it there a way -probably related to the positioning- to show in a totally correct way the tooltip, over the widget?
The URL of the blog is http://deliriassortiti.blogspot.it/
If you need other info, just let me know. I'll be glad to let you know all requested/necessary details
Thank you very much in advance 
Mon, 2014-01-13 16:17
#1
Quote: The URL of the blog is
The URL of the blog is http://www.deliriassortiti.blogspot.it/
If you need other info, just let me know. I'll be glad to let you know all requested/necessary details
Thank you very much in advance
Hi all
We created a new blog without posts, just only the slider where we'd like to see the tooltip finally correctly working!
The new link is the following one: http://www.prove-e-riprove.blogspot.it
Many thanks in advance to everyone who will read/give suggestions