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 */
}
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 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;
Code: Select all
text-align: center;
Perhaps it can't be done? But I would like to think that someone out there might have an answer?
Regards
Terry