CSS - I have the problem which I can't solve

[piotrstankiewicz]

Please visit my main page:

http://www.pbase.com/piotrstankiewicz

I have slideshow at the top. I would like to have the same border for that slideshow as for the image here: http://www.pbase.com/piotrstankiewicz/image/91044573 (which means small white border and huge grey one). I can't reach that. How to do that?

And next problem. At the end of my main page:

http://www.pbase.com/piotrstankiewicz

I have the entrance to :: The world of my photography :: gallery. Unfortunately the grey border is a bit too huge and the image is not centered. Why? I would like to have the same look of thumbail as here: http://www.pbase.com/piotrstankiewicz/w ... hotography

I'm not too good in CSS so I am counting on someones good hearth. )

[piotrstankiewicz]

I've solved the second problem - using A.thumbnail instead of TD.thumbnail, but still can't solve the first one.

[flemmingbo]

You can style the slideshow border, can't remember the css exactly and a bit short on time right now - but I'll look into tomorrow and post it here for you!

regards,

Flemming

[piotrstankiewicz]

You can style the slideshow border, can't remember the css exactly and a bit short on time right now - but I'll look into tomorrow and post it here for you!

That would be great!

[flemmingbo]

Hello again,

You have something called #slideshow_image in your css, that's not a class and doesn't work.

Add this to your css and that does the trick!

Code: Select all

#inline_slideshow td 
{
border-style : solid;
border-width : 1pt;
border-color : white;
}


regards,

Flemming

[piotrstankiewicz]

Thanks.

But why something like that doesn't work:

#inline_slideshow td {
border-style : solid;
border-width : 1pt;
border-color : <getvar color1>;
}

#inline_slideshow tr {
border-style : solid;
border-width : 60pt;
border-color : <getvar color3>;
}

More precisely td works, tr no.

Additionnaly I'm wondering about one thing more. Let's take into consideration the slideshow code in my main page:

<table id="inline_slideshow" cellpadding="0" cellspacing="0">
<tr><td>
<a href="http://www.pbase.com/image/50008354"><img src="http://i.pbase.com//o6/43/588543/1/50008354.THLzpJsd.CH9752_01_20na30_final.jpg" style="border: none;" /></a>
</td></tr>
</table>

There is the style for image style="border: none;" ? It doesn't allow to add any border directly to image by myself? And when I add the border to TD element as you suggested I have unnice empty black linke in the top (between image and border). (I wrote about that problem few months ago, but pbase admins don't care about that.

Additionnaly I'm wondering about one thing more. All my photos have the following size: 650x433. However pbase for my main page generates something like that:

#inline_slideshow {
width: 433px;
height: 655px;
}

[flemmingbo]

Sorry, I forgot a few things, had a look at my own css and....

This works with your page (in Firefox at least!)

Code: Select all

#inline_slideshow td {
border-style : solid;
border-width : 1px;
border-color :  white;
vertical-align: top;
text-align: right;
}

#inline_slideshow {
border-style : solid;
border-width : 60pt;
border-color :  #202020;
vertical-align: top;
height: 650px;
max-height: 650px;
width: 433px;
}

#inline_slideshow td img
{
  margin:0px;
  padding:0px;
  border:0px;
  vertical-align:top;
}


This makes sure that the 1 pixel (not point, pixel! important) border doesn't have a 1 pixel black space.

Hope this works for you.

regards,

Flemming

[piotrstankiewicz]

That's perfect! You are the real CSS master! )

It works ok also with my Internet Explorer and Opera (although in case of Opera from beginning everything was ok, that black hole line didn't appeared in Opera even with my previous CSS style).

Just one question more - is that possible to add the same border to slideshow image?

Now I have something like that:

#slideshow_image {
border-style : solid;
border-width : 1px;
border-color : <getvar color1>;
}

and to that I would like to add another 60px grey border like in case on #inline_slideshow.

Is that any possibility to make slieshow_image to be centered perfectly in the screen?

[flemmingbo]

Thanks

I don't quite follow you - on your slideshow now when I view it you have a white border around the img (really it's on the TD but same thing) and then outside the white border there's a 60pt grey border.

You wan't another 60px grey border where?

If you put your slideshow 100% center, where will your text on the right hand side go?

regards,

Flemming

[piotrstankiewicz]

In case of my root page the situation is perfect.

I'm saying about different slideshow within galleries, ex. http://www.pbase.com/piotrstankiewicz/l ... =slideshow

Here I would like to same the same border layout (one 1px white border, and 60px grey border) as in my root page http://www.pbase.com/piotrstankiewicz/l ... =slideshow

Additionnaly in case of slideshow: http://www.pbase.com/piotrstankiewicz/l ... =slideshow it would be nice to center the image not only horizontaly but also vertically. How to do that?

[flemmingbo]

Ahh sorry, now I get it. You can't center things vertically, only horizontally.

The css of the image slideshow page doesn't allow you to completely emulate the style of your root page.

This gets you very close though:

Code: Select all

#slideshow_container
{
border-style : solid;
border-width : 60px;
border-color : #202020;
width:650px;
text-align:center;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
background : #202020;
}

#slideshow_info
{
background : #202020;
}

[piotrstankiewicz]

I don't know why but it doesn't look well in Internet Explorer. I guess I will stay with my previous style.

I can't understand the pbase philosophy. Why something in one place is possible and in second very similar situation no?

But thanks a lot for all help.

[piotrstankiewicz]

Btw, is there any way to disable the gallery slideshow? I know that few months ago it was not possible as I asked about that here. But I'm wondering if something changed in this area?

[flemmingbo]

Bit weird it doesn't work in IE, can't see anything in the CSS I posted that IE shouldn't like.

As for removing the slideshow link that's not really possible, if it had it's on css class you could just hide it but it doesn't.

If you really wanted it to go away though, you could add a simple DIV in the html of the description part of your gallery - and then use CSS to shape and move this div on top of the link and thereby hiding the link!

[piotrstankiewicz]

Bit weird it doesn't work in IE, can't see anything in the CSS I posted that IE shouldn't like.

I have already removed that as the result was quite strange. Only grey border without the white one and the slideshow image was in the left part, not in the center. Additionnaly the things like 1 3 5 delay and the strings like restore,stop, play were in strange places.

I'm wondering why pbase can't make something with css here to make our life easier?

But thanks a lot for all your help!