Image Bubbles effect personalize

[balki]

I was impressed from this tutorial - http://www.dynamicdrive.com/dynamicindex4/imagebubbles.htm , and would like to use in my site. But I met difficulties.
You can see - http://souhssz.webnode.com/tjestova/brojach/ - that I can't remove li http://img851.imageshack.us/img851/8986/79814447.png, align icons to the center, and chose exact size before and after bubbled.
Can you help me with css, please :)


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link href="http://files.probi.webnode.com/200000143-67c2a681bd/imgbubbles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

/*CSS for 2 demos on the page*/
#orbs li{
width: 100px; /*width of image container. Should be wider than contained images (before bubbling) */
height:100px; /*height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 55px; /*height of each image*/
}

#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}

</style>

<script type="text/javascript" src="http://files.probi.webnode.com/200000142-19a211a9be/imgbubbles.js">

/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"
})

</script>



<ul id="orbs" class="bubblewrap">
<li><a onclick="javascript:window.external.AddFavorite('http://souhssz.webnode.com/','СОУ Христо Смирненски');return false" rel="sidebar" name="Добавете сайта в Любими " title="СОУ Христо Смирненски" href="http://souhssz.webnode.com/"><img src="http://lh6.ggpht.com/_tFIGAJdkWQ8/TLtkBrMQOgI/AAAAAAAAAYs/iZcya-1qa5Q/Firefox-100%D1%85100.png" alt="Bookmark" /></a></li>
<li><a onclick="javascript:window.external.AddFavorite('http://souhssz.webnode.com/','СОУ Христо Смирненски');return false" rel="sidebar" name="Добавете сайта в Любими " title="СОУ Христо Смирненски" href="http://souhssz.webnode.com/"><img src="http://lh5.ggpht.com/_tFIGAJdkWQ8/TLtkCrgfkVI/AAAAAAAAAY0/L0Lg7CgHK-Y/Opera-100%D1%85100.png" alt="Add to ..." /></a></li>
<li><a onclick="javascript:window.external.AddFavorite('http://souhssz.webnode.com/','СОУ Христо Смирненски');return false" rel="sidebar" name="Добавете сайта в Любими " title="СОУ Христо Смирненски" href="http://souhssz.webnode.com/"><img src="http://lh5.ggpht.com/_tFIGAJdkWQ8/TLtkCEPRlBI/AAAAAAAAAYw/1M_6SyAqigM/IE-100%D1%85100.png" alt="Add to ..." /></a></li>
</ul>

[CChawps]

I just took a look at your website. Found at that your primary stylesheet "style.css" is overwriting the bullet list (ul and li) used in image bubbles. So you have too specify either the bubbles sheet or your primary sheet to only apply to the element you want bulleted. Or delete the following code in the primary sheet (line 60) and replace it with:


background: url("../img/li.png") no-repeat left 7px;
list-style-image: url(../img/li.png);
Not entirely sure, but I think that should work.

Or you could also set the background color in the "imagbubbles.css" sheet to be transparent:

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
background: transparent;
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}

Regards Toby

[balki]

Thanks, Toby (:
Transparent option was exelent decision.
Now I need to make pictures closer, with center alignment.
Have a nice day (:

[balki]

Idea how to centralize the pictures?

[CChawps]

First thing I'd try would be to wrap a <div> tag around the HTML code for the imagebubble content, with the CSS to centralize. Add an id too the div.

Example:



<style type="text/css">
#wrap {
margin: 0 auto;
}
</style>

<div id="wrap">
<-- YOUR IMAGE BUBBLE CODE HERE -->
</div>


If that don't work try adding a fixed width for the #wrap, with the width similar too the width of your content area (let's say it's 800px, for the example):



<style type="text/css">
#wrap {
margin: 0 auto;
width: 800px;
}
</style>


In case this don't work then try using a table placed inside your content area with a width of 100% (the width could also be in pixels):



<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<-- YOUR IMAGE BUBBLE CODE HERE -->
</td>
</tr>
</table>


There is so many options, and one of these should work for you. Remember if u use the CSS, then you can add it to your stylesheet instead of parsing it inside your HTML document that contains the image bubbles.

Have fun :)

[balki]

It works fine with table code.
Thanks a lot (:

[balki]

Hi!
I have a similar problem. I use script for background changing color in this page - http://souhssz.webnode.com/za-uchjenika/ , but I can't remove picture for li http://img851.imageshack.us/img851/8986/79814447.png

The source:

<script type="text/javascript" src="http://4433.hit.bg/Colorchange/jquery-1.2.6.pack.js"></script>

<script type="text/javascript"> /* -------------- jQuery code --------------- */
$(document).ready(function(){
$("li.one").click( function(){ $
("body").removeClass("bg2 , bg3 , bg4 , bg5 , bg6 bg7").addClass("bg1");
});
$("li.two").click( function(){ $
("body").removeClass("bg1 , bg3 , bg4 , bg5 , bg6 bg7").addClass("bg2");
});
$("li.three").click( function(){ $
("body").removeClass("bg1 , bg2 , bg4 , bg5 , bg6 bg7").addClass("bg3");
});
$("li.four").click( function(){ $
("body").removeClass("bg1 , bg2 , bg3 , bg5 , bg6 bg7").addClass("bg4");
});
$("li.five").click( function(){ $
("body").removeClass("bg1 , bg2 , bg3 , bg4 , bg6 bg7").addClass("bg5");
});
$("li.six").click( function(){ $
("body").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg7").addClass("bg6");
});
$("li.seven").click( function(){ $
("body").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6").addClass("bg7");
});
});
</script>

<style type="text/css">
* { margin: 0; padding: 0; }

/* -------------- classes for different background styles --------------- */
.bg1 { background: repeat-x; background-color: #c363d8; }
.bg2 { background: repeat-x; background-color: #5b82fb; }
.bg3 { background: repeat-x; background-color: #60cffb; }
.bg4 { background: repeat-x; background-color: #a1fcd6; }
.bg5 { background: repeat-x; background-color: #fdf9a9; }
.bg6 { background: repeat-x; background-color: #fcc088; }
.bg7 { background: repeat-x; background-color: #fc759e; }
/* ---------------------------------------------------------------------- */

.clear, .one, .two, .three, .four, .five, .six, .seven { cursor: pointer; }
ul#icons { position: relative; width: 925px; height: 46px; background: url('https://lh6.googleusercontent.com/-h_6910QHwwY/UBBDreUUVMI/AAAAAAAAC9M/zIrA86dRALI/s925/palette925.png') no-repeat; }
#bg p { position: relative; top: 110px; }
#bg p a { font-size: 10px; padding: 10px; position: absolute; top: 78px; text-decoration: none; color: #070809; }
ul#icons li { position: absolute; list-style: none; }
ul#icons li.seven { left: 0px; width: 900px; height: 46px; }
ul#icons li.six { left: 112px; width: 900px; height: 46px; }
ul#icons li.five { left: 244px; width: 900px; height: 46px; }
ul#icons li.four { left: 376px; width: 900px; height: 46px; }
ul#icons li.three { left: 508px; width: 900px; height: 46px; }
ul#icons li.two { left: 640px; width: 900px; height: 46px; }
ul#icons li.one { left: 766px; width: 900px; height: 46px; }
</style>




<div id="buttons">
<ul id="icons">
<li class="seven"><a href="#"></a></li>
<li class="six"><a href="#"></a></li>
<li class="five"><a href="#"></a></li>
<li class="four"><a href="#"></a></li>
<li class="three"><a href="#"></a></li>
<li class="two"><a href="#"></a></li>
<li class="one"><a href="#"></a></li>
</ul>
</div>


Have a nice night (:

[bernie1227]

ok, so get:


ul#icons { position: relative; width: 925px; height: 46px; background: url('https://lh6.googleusercontent.com/-h_6910QHwwY/UBBDreUUVMI/AAAAAAAAC9M/zIrA86dRALI/s925/palette925.png') no-repeat; }

And remove the part in red.

[balki]

Perhaps I have not explained properly. I want to remove this picture - http://img851.imageshack.us/img851/8986/79814447.png, not this one: https://lh6.googleusercontent.com/-h_6910QHwwY/UBBDreUUVMI/AAAAAAAAC9M/zIrA86dRALI/s925/palette925.png

I shouldn't remove the global style for list, because I use it in other pages...

[bernie1227]

So is there an external style for li tags? If so, you can override it using !important in the CSS

[balki]

So is there an external style for li tags? If so, you can override it using !important in the CSS

I'm not sure did I understand you. There is no exterior styling, only a global with orange image http://img851.imageshack.us/img851/8986/79814447.png that I don't want to perform locally. That is a problem.

Have a nice day!

[bernie1227]

ok balki, could you please show me the global stylings for the li tags?

[balki]

ul {
margin-bottom: 1em;
}
ul ul {
margin: 0;
}
ul li {
margin-left: 20px;
padding-left: 15px;
list-style: none;
background: url("../img/li.png") no-repeat left 7px;
}
ol {
margin-bottom: 1em;
}
ol ol {
margin: 0;
}
ol li {
margin-left: 20px;
}



http://souhssz.webnode.com/css/style.css

[bernie1227]

Ok, so This is pretty easy now, in the styles for the list you don't want the arrow in, put:


background: none !important;

[balki]

Where exactly?

[bernie1227]

ul#icons li

[balki]

Thank you. Works great!

Good evening!

[ApacheTech]

In case this don't work then try using a table placed inside your content area with a width of 100% (the width could also be in pixels):



<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<-- YOUR IMAGE BUBBLE CODE HERE -->
</td>
</tr>
</table>


Have fun :)

No, no, no, no, NO!

This is always possible in CSS and you should never use tables as a layout guide for your page. Tables are specifically for tabular data, which this is not.


20 years ago, this was acceptable, but not any more. You should always use CSS (or indeed, LESS) to position text on the screen.

Remember with wrapper <div>'s; text-align:center; will centre the content of the div, margin:0 auto; will centre the div itself to it's parent container.