Centralisation of pop-up images

[terrym]

Hi everyone

I have recently started using Serendipity and after quite a few tries with other blog software, I have found Serendipity to be exactly what I want, and it is also incredibly logical and straightforward to use.

But I'm having a bit of trouble, not necessarily with Serendipity itself(?), but with CSS. And I'm hoping someone here can point me in the right direction.

I have an entry with about 20 or so town names. What I wanted to do was insert a smiley on the right of each name, and then when the mouse pointer hovers over the smiley, an image about that town will popup. All of this works perfectly except for one thing. Just say you have the popup to display to the right of the smiley, and you start with a town at the left of the main column (two column display!), then moving towards the right the popups display OK. But as you get closer to the right of the main column, the images start having right hand portions cut off. Obviously this is because of the right column. The images are there, but underneath the right column.

If you have the images displaying to the left of the smiley, and you start at the righthand side, the same thing happens, except that when you get close to the left, the images have their left sides cut off.

There are probably two solutions to this problem, and either would be acceptable. First of all, some technical details. I'm using the Bulletproof template and I have added the following CSS code to the bottom of the base.css file from the Bulletproof folder.

Code: Select all

.thumbnail {
      position: relative;
      z-index: 0;
   }
   .thumbnail:hover {
      background-color: transparent;
      z-index: 50;
   }
   .thumbnail span { /*CSS for enlarged image*/
      position: absolute;
      background-color: lightyellow;
      padding: 5px;
      left: -1000px;
      border: 1px dashed gray;
      visibility: hidden;
      color: black;
      text-decoration: none;
   }
   .thumbnail span img { /*CSS for enlarged image*/
      border-width: 0;
      padding: 2px;
   }
   .thumbnail:hover span { /*CSS for enlarged image on hover*/
      visibility: visible;
      top: 0;
      left: 60px; /*position where enlarged image should offset horizontally */
   }

And I use this bit of html where I want the smiley to appear on the page.

Code: Select all

<a class="thumbnail" href=" "><img src="images/smiley.gif" border="0" /><span><img src="images/wynyard-01.jpg" /><br />Table Cape near Wynyard</span></a>

The first solution, and probably the most logical would be to have the image display on top of the righthand column, rather than underneath it like now. With Serendipity being quite complex, and without trying to find exactly where I should make such a change purely by trial & error, It would be great if someone more knowledgable with Serendipity than myself could tell me which file needs to be changed.

The second solution would be, possibly by CSS, to make the images display in the centre of the left column. But I have tried

Code: Select all

display: inline-block;

and

Code: Select all

text-align: center;

in various ways but to no avail.

Perhaps it can't be done? But I would like to think that someone out there might have an answer?

Regards
Terry

[yellowled]

What I wanted to do was insert a smiley on the right of each name, and then when the mouse pointer hovers over the smiley[…]

It would be way easier to help you if we had a url to said entry in a live blog …?

I'm using the Bulletproof template and I have added the following CSS code to the bottom of the base.css file from the Bulletproof folder.

Unless you created a new copy of the bulletproof template, this is not a good idea since the base.css will be overwritten in case of an update to s9y. You should consider building your own colorset for BP or using the user.css option.

But I have tried

Code: Select all

display: inline-block;

and

Code: Select all

text-align: center;

in various ways but to no avail.

The usual way of centering something in CSS is

Code: Select all

.some-element {
    margin-left: auto;
    margin-right: auto;
}

(Hint: You can also use the pre-defined class .serendipity_center for that.), but that's only going to work if the parent element has a defined width.

As I said before, this is kind of hard to imagine and figure out without a live example.

YL

[terrym]

Hi YL, and thanks for your reply. (Sorry! Put JL?)

This is the URL:- http://terrymold.co.uk/serendipity/inde ... t-Me!.html

Regards
Terry

[yellowled]

Okay, let's see …

Perhaps it can't be done? But I would like to think that someone out there might have an answer?

The easiest solution that I see is to not have the links and images in a paragraph of text but to use an unordered list, which would also make sense semantically. Unfortunately, you don't seem to use paragraphs at all right now, but you use the NL2BR plugin. That offers an option called NL2P, which you can easily switch to and have your text displayed in properly marked up paragraphs.

You'd go „The places where I have lived include:“, new paragraph, and then list the places:

Code: Select all

<ul>
<li>Wynyard <a class="thumbnail" href=" "><img src="images/smiley.gif" border="0" /><span><img src="images/wynyard-01.jpg" /><br />Table Cape near Wynyard</span></a></li>
<li>Devonport <a class="thumbnail" href=" "><img src="images/smiley.gif" border="0" /><span><img src="images/devonport-03.jpg" /><br />Spirit of Tasmania</span></a></li>
[etc.]
</ul>

That way, all the places will line up nicely on the left side of your entry, leaving ample space on the right to display the images on hover.

YL

[terrym]

Thanks again YL

You're probly right. I've been thinking more or less exactly the same thing. I guess it means that there isn't a workable solution.

If it were PHP for example, it would "know" the width of the column. Then it would also "know" whether the smiley was left or right of the column centre, and display the image accordingly.

Oh well. One day perhaps?

Terry

[yellowled]

I guess it means that there isn't a workable solution.

Well, there is more than one solution for this, I'm just not sure, and please don't get this the wrong way, what exactly is "workable" for you.

It would be possible to position the hovered images correctly using Javascript, but for that to work, you'd probably have to handcode some JS and restructure the whole markup for this part. Check i.e. the way the tipsy plugin for jQuery handles positioning.

The solution I proposed would work with your current CSS and some minor changes to your markup, so it might be the easiest solution. It really depends on how much work you want to put into this.

YL

[terrym]

Personally, I think the page looks much more logical than what I was previously trying to do. If you compare how it used to look - pretty jumbled and possibly a bit on the confusing side - and how it looks now and there isn't anything to compare.

To be honest, I had thought of using an unordered list some days ago, but when I get an idea (that I think I would like?) I tend to persevere, and waste time, with it until I've either beaten it to death or like this one, discover that it won't work anyway.

As for JavaScript, it might be possible to get it to work - You can do some quite amazing things with it. But I think I've spent too long on this popup already.

As I'm only up to 1949, I have another 65 or so years to do to reach 2012. So I'd better get on with the blog itself. So thanks for all your help, and maby we will cross paths in the future?

Terry