PBase

One more border question. I managed to do two borders which I'm fairly happy with. I would like to put a 2px border right around the image, the single image, I think that is called the display image. I have tried various ways to code it, but I do not know what to write. Here is my source code.

<style type="text/css">
<!--
/*
::::: StyleSheet Information ::::::
:: ------------------------------::
:: PBase.com Style Version 1.0 ::
:: by Webdev - Pim Rijpsma - NL ::
:: http://www.pbase.com/webdev/ ::
:: ------------------------------::
:::::::::::::::::::::::::::::::::::
*/
.galleryheader {
margin-left: 300px;
margin-right: 300px;
margin-top: 45px;
margin-bottom: 25px;
{text-align: center};
}



a, a:link,a:visited,a:active {
color: #999933; text-decoration: none;
}
a:hover {
color: #999933;
text-decoration: none;
}
a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
border: #999933 1px solid;
margin-bottom: -45px;
padding-top: 20px;
padding-bottom: 15px;
padding-right: 20px;
padding-left: 20px;
width: 172px;
display: block;
background: #ffffff;
height: 207px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
a.td.thumbnail:hover {
border: #999933 1px solid;
margin-bottom: -45px;
padding-top: 20px;
padding-bottom: 15px;
padding-right: 20px;
padding-left: 20px;
width: 172px;
display: block;
background: #cccc66;
height: 207px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
body{
margin-bottom: 20px;
margin-top: 40px;
background: #cccc99;
}
div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h1,h2,h3,h4,h5,font, center {
border: 3px;
color: #333300;
font: 13px verdana, arial, sans-serif;
}
font {
margin-left: 4px;
margin-right: 4px;
width: 170px;
display: block;
color: #666600;
font: 11px Verdana, Tahoma, Helvetica, sans-serif;
letter-spacing: 0px;
}
h1, h2 {
border: rgb(95, 121, 216) 3px dotted;
border-left: 4px none;
border-right: 4px none;
border-top: 4px none;
margin-bottom: 1em;
margin-left: -10px;
margin-right: 0px;
padding: 5px;
width: 100%;
display: block;
background: #999966;
color: #999966;
font-size: 16px;
font-weight: bold;
letter-spacing: 4px;
text-align: right;
height: 21px;
position: relative;
filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#669966',endColorstr='#cccc99');
}
h3 {
border-bottom: #999966; 1px dotted;
border-left: 4px none;
border-right: 4px none;
border-top: 1px none;
padding: 2px;
width: 400px;
display: block;
background: #ffffcc;
color: #999966;
font: 12px;
font-weight: normal;
letter-spacing: 0px;
text-align: center;
}
h5 {
padding-left: 2px;
width: 150px;
display: block;
color: #999966;
font-size: 12px;
font-weight: normal;
filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#000000',endColorstr='#2D2D2D');
}
img{
border: rgb(0, 0, 0) 4px none;
}
img.thumbnail {
border: #000000 2px solid;
margin: 0px;
padding: 0px;
background: #999966;
vertical-align: middle;
}input {
border: rgb(0, 0, 0) 1px solid;
}
table.thumbnail {
width: 10%;
}
td {
border: 1px none;
background: none;
border-collapse: collapse;
empty-cells: show;
}
td.message_body {
border-bottom: #fffff; 1px dotted;
border-left: 4px none;
border-right: 4px none;
border-top: 1px none;
display: block;
background: #ffffcc;
}
.caption {
color: #99966;
font-size: 12px Verdana, Tahoma, Helvetica, sans-serif;
font-style: italic;
}
.display {
border: #000000 20px solid;
background-color : #ffffff;
padding: 80px;
display: block;
filter:
progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=5);
}
.lid{
background: #999966;
color: #cccc99;
font: 11px Verdana, Tahoma, Helvetica, sans-serif;
text-decoration: none;
}
.message_body {
margin: 5px 5px 10px;
color: #666600;
font: 12px Verdana, Tahoma, Helvetica, sans-serif;
}
.sb{
background: #999966;
color: #999966;
font: 12px Verdana, Tahoma, Helvetica, sans-serif;
text-decoration: none;
}


BODY { margin-top: 0px; top: 0px; }
HR { position : relative;}

-->
</style>


I hope you can tell me where to put it. I'd like it to be black #000000. Thanks once again!

I find easier to do that in Photoshop. Select all, then go Edit -> Stroke -> 2px (black).

Back to your CSS.... try getting rid of the 'none'. Add 'solid'.

img{
border: 4px solid rgb(0, 0, 0);
}

Actually, its more correct to use 'border-width'. However, just border should work!

That did not work. Here is what I changed. This first code at the top, but I am showing more of the code below. I thought it would have something to do with the display code.



}
img{
border width: #000000 1px solid;
}
img.thumbnail {
border: #000000 1px solid;
margin: 0px;
padding: 0px;
background: #999966;
vertical-align: middle;
}input {
border: rgb(0, 0, 0) 1px solid;
}
table.thumbnail {
width: 10%;
}
td {
border: 1px none;
background: none;
border-collapse: collapse;
empty-cells: show;
}
td.message_body {
border-bottom: #fffff; 1px dotted;
border-left: 4px none;
border-right: 4px none;
border-top: 1px none;
display: block;
background: #ffffcc;
}
.caption {
color: #99966;
font-size: 12px Verdana, Tahoma, Helvetica, sans-serif;
font-style: italic;
}
.display {
border: #000000 20px solid;
background-color : #ffffff;
padding: 80px;
display: block;
filter:
progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=5);
}

Susan,

I looked at a few of your pictures and they do seem to have a 20px black border around each single image, as implied by this bit of your CSS:

Code: Select all

.display {
border: #000000 20px solid;


If you are looking for a narrower border you just need to change the 20px. Not sure if this is what you mean?

No, I have a black "frame" around the whole outside, and I believe white "padding". What I'd like is a thin black line around the image itself, to separate from the white padding. Can't figure out how to do that.

OK, I see what you mean now. What confused me earlier was that I was using Internet Explorer 5, which seems to make the white padding disappear completely. Both IE6 and Mozilla display as you have described.

This is a tricky one. The only way I can think of is to use both the image itself (.display) and the table that contains the image (.imagetable).

The nearest I could get to what you want is something like this:

Code: Select all

.imagetable
{
background-color: #ffffff;
border: 15px solid #000000;
}

.display
{
border: 2px solid #000000;
margin: 80px;
}


However this moves the date inside the frame, I'm not too sure I like this. You might want to experiment with adding padding or centering to .date - it will still be inside the frame but might look a little neater.

Thank you!! I just wonder how I can remove the date. I did a search and came up with this, which could be related. A post lower down says how to get rid of some information.

http://forum.pbase.com/viewtopic.php?t= ... light=exif

I know I have seen many other albums with just my configuration without the date. I'll see if I can figure out how to do it without the date showing up in the frame. If any other thoughts occur to you, please advise. Thanks for your help!

Yes, the post you picked out does give you the method. You just need to view source to find the class that applies to the particular thing you are trying to hide. You should see something like

Code: Select all

<span class=date>20-JUL-2003</span>

This shows that you can use the class "date":

Code: Select all

.date
{
  display: none;
}


Thank you so much....again!! This is whole new way of thinking, also with different language, so it takes a little while to sink in, but I am getting it little by little. Thanks again.

You're welcome!

A good way to learn even more is to get into the habit of noting other people's pages if they have a display feature that you like - maybe add them to your "favourite photographers" list. Then study their source code and see if you can figure out how they did it. I find it is easier to learn by example than to learn a set of rules. But you have already made a lot of progress!

(posted twice by mistake)