positioning image title/caption

plasticpeter / 2011-08-11 11:31:42   

Hi,
I'm using the slidethumbcombo plugin and I don't succeed in putting the image title/caption directly under the image. (Padding-top: 145px because I want the pictures to line with the first section in the menu.)
Here's the website and here you can see the image title/caption way too low (click on one of the pics).
Thanks in advance, cheers, Peter

blameme / 2011-08-12 10:29:23   

I´m pretty sure you can safely remove the position: relative; from #content p

plasticpeter / 2011-08-12 13:41:56   

Hi Blameme,
Thanks for your help.
I removed the 'position: relative' as you suggested. That resulted in the correct position of the footer text but now the upper text went way too high. Any suggestions on getting that on top of the picture again?
Cheers, Peter

rickykappa / 2011-08-13 05:02:22   

because they are both wrapped in the same p tags, if you want different behaviour you should wrap them in different ways...

plasticpeter / 2011-08-13 05:05:32   

I'm sorry but I don't understand that..., how should I do that?
Could you help me a little bit? Thank you very much...

rickykappa / 2011-08-13 09:09:28   

ah, sorry... if you look at the html code of your page you can see the relevant part

  1. <div id='p1' class='pic' style='display: block;'>    <p><a href='#' onclick="swap(); return false;">back to thumbnails</a></p>    <p><a href='#' onclick='show_image(0); return false;'>Prev</a> | <a href='#' onclick='show_image(2); return false;'>Next</a>    <span style='margin-left: 9px'>1/16</span></p>    <a href='#' onclick='show_image(2); return false;'><img src='http://www.wiepvermeulen.com/test/files/gimgs/7_img6743-2.jpg' width='800' height='533' class='img-bot' /></a><p>18 x 18 cm 
  2.  </p></div>

so whatever css rule you give to the #content p tags it will affect both the upper and footer text.
you need to edit the plugin to solve the problem.
I suggest you wrap in a<div class="a_class_name"> one of them so that you can give another specific css rule to that div, i.e.
#content .a_class_name { your rule/s here }
hope it helps
;-)

plasticpeter / 2011-08-14 04:59:40   

Hi Ricky,
Thanks for your help :)
However after looking into this it dazzles me. I wouldn't know where to split both the upper- and lower text. I looked into the slidethumbcombo plug and suspect it must be in this part:

File wih code, sorry I couldn't past code in here.

I cannot however find out what to do. As far as I know I never wrapped something digitally...
Could you give me another hand, please?
Thank you :)

rickykappa / 2011-08-14 17:51:19   

wrap in this case means that you put a part of code into a specific <div>, i.e.

  1.         $a .= "n<div id='p$i' class='pic' $off>";
  2.         $a .= "    <p><a href='#' onclick="swap(); return false;">back to thumbnails</a></p>";
  3.         $a .= "    <p><a href='#' onclick='show_image($prev); return false;'>Prev</a> | <a href='#' onclick='show_image($next); return false;'>Next</a>";
  4.         $a .= "    <span style='margin-left: 9px'>$i/$total</span></p>";
  5.         $a .= "    <a href='#' onclick='show_image($next); return false;'><img src='" . BASEURL . GIMGS . "/$go[media_file]' width='" . $x[0] . "' height='" . $x[1] . "' class='img-bot' /></a><p>{$title}
  6. {$caption}</p></div>n";

becomes this

  1.         $a .= "n<div id='p$i' class='pic' $off>";
  2.         $a .= "    <div class='nav'><a href='#' onclick="swap(); return false;">back to thumbnails</a>";
  3.         $a .= "    <a href='#' onclick='show_image($prev); return false;'>Prev</a> | <a href='#' onclick='show_image($next); return false;'>Next</a>";
  4.         $a .= "    <span style='margin-left: 9px'>$i/$total</span></div>";
  5.         $a .= "    <a href='#' onclick='show_image($next); return false;'><img src='" . BASEURL . GIMGS . "/$go[media_file]' width='" . $x[0] . "' height='" . $x[1] . "' class='img-bot' /></a><p>{$title}
  6. {$caption}</p></div>n";

where you have now a <div class='nav'> that you can control from your style.css
#content .nav { your rule/s here }
note that I've deleted all the original <p> tags in the nav, so they are no more taking the same style as the title and caption.
you could also do the opposite, wrap the title&caption and leave the nav as before, it's up to you...
have a try
;-)

plasticpeter / 2011-08-15 05:26:43   

Thanks again!
When I paste this code in the the combo-plug I get a syntax error on line 2...
Is that a problem. you think, or should I just ignore that?
I believe it is a problem because when I tried it out I got this message:

Parse error: syntax error, unexpected T_STRING in /var/www/vhosts/wiepvermeulen.com/httpdocs/test/ndxz-studio/site/plugin/exhibit.slidethumbcombo.php on line 89

I made also a change in the stylesheet as you suggested.

Any ideas what went wrong?

Thanks, P.

rickykappa / 2011-08-15 12:45:57   

sorry, I'm running out now...
check the
exhibit.slidethumbcombo.php on line 89
a syntax problem can even be a silly punctuation thing...
actually I've copied your text into the post above, might even be that something was wrong there.
you might try to compare the original text, character by character, with that posted.
computers are stupid but precise...
;-)

plasticpeter / 2011-08-15 15:16:05   

I checked everything (to my ability) but even when I get the syntax error out (by using parts of the old code) everything messes up or changes...
In any case the upper text stays where it is :(

Cheers P.

plasticpeter / 2011-08-17 01:11:07   

Could you please help me? I can't figure it out...

blameme / 2011-08-17 03:46:31   

It´s 1000 times better to do it ricky´s way, but you can probably do this for a dirty fix:

- remove padding-top: 145px; from #content a img and #content a img:hover

then add to your stylesheet:

  1. #content .container {
  2. margin-top: 145px;
  3. }

Be aware this will adjust the top-margin on ALL your exhibits, which could cause problems if they are not set up the same as your example exhibit.

plasticpeter / 2011-08-17 04:55:57   

Wow, thank you so, so and so much Blameme. That did the trick! That's just what I wanted, to have this style applied to all the exhibits.
I'll also keep trying to understand the code more and better of course...

Thanks for all the help :)
Cheers, P.

plasticpeter / 2011-08-17 13:37:53   

Sorry, but I suspect by adding your suggestion a new problem occurred: there is a vertical scrollbar to the right now continuously, also when it is not needed, like in the introduction page for example.
Would there be a possibility to fix this?
Thank you !
(Oh, as I was enthusiastic and didn't notice this right away, I already put the site in the root directory: here.)

plasticpeter / 2011-08-18 01:24:27   
  1. Wow, I figured it out myself!
  2. I had to add an absolute position like so:
  3. #content .container {
  4.     margin-top: 145px;
  5.     position: absolute;
  6. }

And now the scrollbar has disappeared. Hurray.
Ciao, and thanks for the help :)

This thread has been closed, thank you.