PBase

What is the HTML Code for putting a border around another border of a Thumbnail on a CSS to give the Thumbnails a double border using two different colors or shades?

Are you talking about the thumbnails in the webdev css? or, something entirely different?

Is it something like my page at http://www.pbase.com/mikelly ?

Mike Kelly

I'll take a look at my code to see if I can shrink the outer rectangle down to the first border so that you get the double border effect. Back later,

Mike Kelly

Yep, Mike. Something like yours. I want to do a CSS with 2 colors on the border around the thumbnail. I was planning on keeping each border around 3 or 4 point all the way around. I'll check back tonight. TIA

I modified the height of the outside box so that the border is closer to the thumbnail. There is a minor issue that can be worked around if you are willing to only use horizontal thumbnails. Note my main page is OK, but the 'What's New' gallery has an overlapping problem.

I modified my original css sheet so that I have sheet and sheet2. I can use sheet2 for horizontal thumbnails only and sheet for galleries that have both horizontal and vertical.

If this is what you want, I will be happy to post the code so that you can modify the colors and borders. BTW, the borders are 5px and 'inset' ...

http://www.pbase.com/mikelly (horizontal thumbnails only)
http://www.pbase.com/mikelly/recent (overlapping thumbnail)

Mike

Yes, Mike, like either. I'd appreciate it. TIA

Code: Select all

/*
   :::::::::::::::StyleSheet Information :::::::::::::::
   :: ----------------------------------------------- ::
   :: PBase.com Style Version 1.1                     ::
   :: by Webdev - Pim Rijpsma - NL                    ::
   :: http://www.pbase.com/webdev/                    ::
   :: License Terms : Attribution-ShareAlike 1.0      ::
   :: http://creativecommons.org/licenses/by-sa/1.0/  ::
   :: ----------------------------------------------- ::
   :: Basic modifications by Mike Kelly, 30Aug03      ::
   :::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

a,
a:link,
a:visited,
a:active
{
   color: yellow;
   background: navy;
   text-decoration: none;
   
}

a:hover
{
   color: red;
   background: navy;
   text-decoration: none;
}

a.thumbnail,
a.thumbnail:link,
a.thumbnail:visited,
a.thumbnail:active
{
   border: silver 5px inset;
   margin-bottom: -34px;
   padding-top: 12px;
   display: block;
   color: yellow;
   
   background: blue;
   width: 185px;
   height: 150px;
/*   -moz-opacity:0.80;
   filter: Alpha(Opacity=80);  */
}

a.thumbnail:hover
{
   border: red 5px inset;
   margin-bottom: -34px;
   padding-top: 12px;
   display: block;
   color: yellow;
   font-weight: bold;
   background: navy;
   width: 185px;
   height: 150px;
/*   -moz-opacity:1.0;
   filter: Alpha(Opacity=100); */
}

body
{
   margin-bottom: 20px;
   margin-top: 0px;
   background: navy;
}

div,
body,
th,
tr,
table,
li,
ul,

form,
blockquote,
p,
b,
i,
h4,
center
{
   border: 0px;
   color: yellow;
   font: 12px Verdana, Arial, Helvetica, sans-serif;
}

font
{
   border: 0px;
   margin-left: 4px;
   margin-right: 4px;
   font: 12px Comic Sans MS, Verdana, Arial, Helvetica, sans-serif;   
   letter-spacing: 0px;
}

h1, h2
{
   border-bottom: yellow 3px ridge;
   border-left: 1px none;
   border-right: 1px none;
   border-top: black 1px solid;
   margin-bottom: 1em;
   margin-left: -10px;
   margin-right: 0px;
   padding-left: 25px;
   width: 100%;
   display: block;
   background: blue;
   color: Yellow;
   font: bolder 20px comic sans ms, Verdana, Arial, Helvetica, sans-serif;
   letter-spacing: 4px;
   text-align: left;
   position: relative;
   /* filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr='blue',endColorstr='navy');
*/ }

h3
{
   border-bottom: yellow 2px ridge;
   border-left: 1px none;
   border-right: 1px none;
   border-top: 1px none;
   padding: 2px;
   width: 100%;
   display: block;
   background: navy;
   color: yellow;
   font: normal 12px Comic Sans MS, Verdana, Arial, Helvetica, sans-serif;
   letter-spacing: 0px;
   text-align: center;
}


h5
{
   border: 0px;
   padding-left: 2px;
   width: 150px;
   display: block;
   color: yellow;
   font: normal 12px Comic Sans MS, Verdana, Arial, Helvetica, sans-serif;
  /* filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr='blue',endColorstr='navy');
*/
}

img
{
   border: black 1px none;
}

img.thumbnail
{
   border: silver 4px inset;
   margin: 0px;
   padding: 0px;
   background: navy;
   color: yellow;
   font-weight: bold;
   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: yellow 1px solid;
   border-left: 1px none;
   border-right: 1px none;
   border-top: 1px none;
   display: block;
   background: navy;
   color: yellow;
}

.caption
{
   color: yellow;
   font-size: 12px Comic Sans MS, Verdana, Tahoma, Helvetica, sans-serif;
   font-style: italic;
}

.display
{
   border: silver 5px inset;
   margin-top: 1em;
   background: blue;
   color: yellow;
   /* filter:Shadow(color="yellow",Direction=135,Strength=5); */
}

.lid
{
   border: black 1px solid;
   background: silver;
   color: navy;
   font: 12px Comic Sans MS, Verdana, Tahoma, Helvetica, sans-serif;
   text-decoration: none;
   text-align: left;
   empty-cells: show;
   font-weight: bold;
   padding-left: 10px;
}

.message_body
{
   margin: 5px 5px 10px;
   color: yellow;
   background: navy;
   font: 12px Comic Sans MS, Verdana, Tahoma, Helvetica, sans-serif;
}

.sb
{
   border-top: black 1px solid;
   border-right: black 1px solid;
   border-bottom: black 1px solid;
   border-left: black 1px solid;
   background: Silver;
   color: Navy;
   font: 12px Comic Sans MS, Verdana, Tahoma, Helvetica, sans-serif;
   text-decoration: none;
   text-align: center;
   font-weight: bold;
}


This is the code for horizontal thumbnails only. Next message is for both horizontal and vertical.

Mike

Code: Select all

/*
   :::::::::::::::StyleSheet Information :::::::::::::::
   :: ----------------------------------------------- ::
   :: PBase.com Style Version 1.1                     ::
   :: by Webdev - Pim Rijpsma - NL                    ::
   :: http://www.pbase.com/webdev/                    ::
   :: License Terms : Attribution-ShareAlike 1.0      ::
   :: http://creativecommons.org/licenses/by-sa/1.0/  ::
   :: ----------------------------------------------- ::
   :: Basic modifications by Mike Kelly, 30Aug03      ::
   :::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

a,
a:link,
a:visited,
a:active
{
   color: yellow;
   background: navy;
   text-decoration: none;
   
}

a:hover
{
   color: red;
   background: navy;
   text-decoration: none;
}

a.thumbnail,
a.thumbnail:link,
a.thumbnail:visited,
a.thumbnail:active
{
   border: silver 5px inset;
   margin-bottom: -34px;
   padding-top: 12px;
   display: block;
   color: yellow;
   
   background: blue;
   width: 185px;
   height: 190px;
/*   -moz-opacity:0.80;
   filter: Alpha(Opacity=80);  */
}

a.thumbnail:hover
{
   border: red 5px inset;
   margin-bottom: -34px;
   padding-top: 12px;
   display: block;
   color: yellow;
   font-weight: bold;
   background: navy;
   width: 185px;
   height: 190px;
/*   -moz-opacity:1.0;
   filter: Alpha(Opacity=100); */
}

body
{
   margin-bottom: 20px;
   margin-top: 0px;
   background: navy;
}

div,
body,
th,
tr,
table,
li,
ul,
form,
blockquote,
p,
b,
i,
h4,
center
{
   border: 0px;
   color: yellow;
   font: 12px Verdana, Arial, Helvetica, sans-serif;
}

font
{
   border: 0px;
   margin-left: 4px;
   margin-right: 4px;
   font: 12px Comic Sans MS, Verdana, Arial, Helvetica, sans-serif;   
   letter-spacing: 0px;
}

h1, h2
{
   border-bottom: yellow 3px ridge;
   border-left: 1px none;
   border-right: 1px none;
   border-top: black 1px solid;
   margin-bottom: 1em;
   margin-left: -10px;
   margin-right: 0px;
   padding-left: 25px;
   width: 100%;
   display: block;
   background: blue;
   color: Yellow;
   font: bolder 20px comic sans ms, Verdana, Arial, Helvetica, sans-serif;
   letter-spacing: 4px;
   text-align: left;
   position: relative;
   /* filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr='blue',endColorstr='navy');
*/ }

h3
{
   border-bottom: yellow 2px ridge;
   border-left: 1px none;
   border-right: 1px none;
   border-top: 1px none;
   padding: 2px;
   width: 100%;
   display: block;
   background: navy;
   color: yellow;
   font: normal 12px Comic Sans MS, Verdana, Arial, Helvetica, sans-serif;
   letter-spacing: 0px;
   text-align: center;
}


h5
{
   border: 0px;
   padding-left: 2px;
   width: 150px;
   display: block;
   color: yellow;
   font: normal 12px Comic Sans MS, Verdana, Arial, Helvetica, sans-serif;
  /* filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr='blue',endColorstr='navy');
*/
}

img
{
   border: black 1px none;
}

img.thumbnail
{
   border: silver 4px inset;
   margin: 0px;
   padding: 0px;
   background: navy;
   color: yellow;
   font-weight: bold;
   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: yellow 1px solid;
   border-left: 1px none;
   border-right: 1px none;
   border-top: 1px none;
   display: block;
   background: navy;
   color: yellow;
}

.caption
{
   color: yellow;
   font-size: 12px Comic Sans MS, Verdana, Tahoma, Helvetica, sans-serif;
   font-style: italic;
}

.display
{
   border: silver 5px inset;
   margin-top: 1em;
   background: blue;
   color: yellow;
   /* filter:Shadow(color="yellow",Direction=135,Strength=5); */
}

.lid
{
   border: black 1px solid;
   background: silver;
   color: navy;
   font: 12px Comic Sans MS, Verdana, Tahoma, Helvetica, sans-serif;
   text-decoration: none;
   text-align: left;
   empty-cells: show;
   font-weight: bold;
   padding-left: 10px;
}

.message_body
{
   margin: 5px 5px 10px;
   color: yellow;
   background: navy;
   font: 12px Comic Sans MS, Verdana, Tahoma, Helvetica, sans-serif;
}

.sb
{
   border-top: black 1px solid;
   border-right: black 1px solid;
   border-bottom: black 1px solid;
   border-left: black 1px solid;
   background: Silver;
   color: Navy;
   font: 12px Comic Sans MS, Verdana, Tahoma, Helvetica, sans-serif;
   text-decoration: none;
   text-align: center;
   font-weight: bold;
}


This code is for horizontal and vertical.

Mike

WOW! Thanks Mike 'Albert Einstin' Kelly

Thanks, Buddy. Now all I have to do is decide whether I'd rather work on 'Double Borders' on my CSS or ReWrite all the formulas for Quantum Mechanics. Then again I might get a ReWrite of Albert Einstein's General Theory of Relativity out of the way, first. LOL

OK, I'm going to work on the CSS later tonight to see what I get. I definitely appreciate your help and if this dumb ol' rancher has any problems/questions I'll let you know. My brain seems to work on the Idiot level these days so it may be a day or two before you hear from me. I have a hard enough time just understanding what my cattle want to eat for dinner, so I'm sure I'll be bugging you some more.

Again, Thanks...TRR's Ranch

I owe it to a lot of 'trial and error' making changes to the original webdev style.

I wanted the double borders around the thumbnails like you. The hardest part was to work with a very limited knowledge of CSS.

The resulting code does work with Netscape, Mozilla, Firebird, Opera 7, and MSIE 6.

Good Luck....