HTML and Style Sheets

Thu Aug 12, 2004 10:30 am

OK! I have spent the whole afternoon researching and trying, to get the border in my thumbnails and pictures. 5 hours!!! I still can't fig this out! I guess that proves I am a real CSS idiot.

Can someone out there show me how to do it step by step?

I tried to copy other people's source, and paste on a new CSS that I created ---> Dont work!

I tried copying the sample source, paste it in a created new CSS. Then edit it ---> Dont work!

I tried to use this

IMG.thumbnail {
border-style : solid;
border-width : 2pt;
border-color : #884444;
}

from the CSS classes. But I dont know where to put it.

I just need a simple white border, but I didn't expect this to be so frustrating!!!

Plz help!

Here is my source code using WEBDEV CSS. Can someone teach me how to put white border in my thumbnail and pictures? Thank you soooo much!

<html lang="en-US"><head>
<title>D70 Gallery Photo Gallery by Dave Lin at pbase.com</title>
<link rel="stylesheet" type="text/css" href="http://image.pbase.com/styles/gallery2.css">
<link rel="stylesheet" type="text/css" href="http://css.pbase.com/styles/28011.css?t=1092305228">
<base href="http://www.pbase.com">
</head><body>

<TABLE border=0 cellspacing=0 cellpadding=0 width="100%"><tr>
<td><A HREF="http://www.pbase.com" target="_top" title="pbase photos"><IMG src="http://site.image.pbase.com/m/3/m_pbase.gif" border=0 alt="photo sharing and upload"></A></td>
<td><A HREF="http://www.pbase.com/galleries" target="_top" title="recent picture uploads"><IMG src="http://site.image.pbase.com/m/3/m_g.gif" border=0 alt="picture albums"></A></td>
<td><A HREF="http://forum.pbase.com" target="_top" title="photography discussion forums"><IMG src="http://site.image.pbase.com/m/3/m_f.gif" border=0 alt="photo forums"></A></td>
<td><A HREF="http://search.pbase.com/search" target="_top" title="pbase photo search"><IMG src="http://site.image.pbase.com/m/3/m_s.gif" border=0 alt="search pictures"></A></td>
<td width="100%"><A HREF="http://www.pbase.com/galleries?view=popular" target="_top" title="popular photos"><IMG src="http://site.image.pbase.com/m/3/m_sp.gif" border=0 height="28" width="100%" alt="popular photos"></a></td>

<td><A HREF="http://www.pbase.com/help" target="_top" title="give me some help"><IMG src="http://site.image.pbase.com/m/3/m_h.gif" border=0 alt="photography help"></A></td>
<td><A HREF="http://www.pbase.com/logout" target="_top" title="logout from pbase"><IMG src="http://site.image.pbase.com/m/3/m_lt.gif" border=0 alt="logout"></A></td>
<td><A HREF="http://www.pbase.com/profile" target="_top" title="you are fodo. go to your home page"><IMG src="http://site.image.pbase.com/m/3/m_ho.gif" border=0 alt="home"></A></td>
</tr></table>


<table border=0 width="100%">
<tr>
<td align=left >
<b>
Dave Lin
|
<a HREF="/fodo/profile" title="goto fodo's home page">profile</a>
|
<span class="treepath">
<A HREF="/fodo/root" title="view all of your galleries">all galleries</A> >> <A HREF="http://upload.pbase.com/edit_gallery/fodo/d70">edit this gallery</A>
</span>
</b>
</td>
<td align=right nowrap valign=top>
<b>
<A href="/fodo/d70&view=tree">tree view</a>
| thumbnails</b>
</td>
</tr>
</table>
<h2>D70 Gallery</h2><table width="100%"><tr><td align=left>previous page</td><td align=center>pages <b>1</b> <A HREF="/fodo/d70&page=2">2</A> <A HREF="/fodo/d70&page=all">ALL</A> </td><td align=right><a href="/fodo/d70&page=2">next page</a></td></tr></table>
<DIV class="thumbnails">
<CENTER>
<TABLE border=0 cellpadding=15 width="50%" cellspacing=15>
<TR valign=middle>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/27631823" class="thumbnail"><IMG class=thumbnail src="http://mk37.image.pbase.com/u42/fodo/small/27631823.DSC_0001.jpg" WIDTH=106 HEIGHT=160 border=0 alt="iron"></A><br><font size=3>iron</font></TD>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/27694383" class="thumbnail"><IMG class=thumbnail src="http://mk37.image.pbase.com/u42/fodo/small/27694383.DSC_0032sharpen.jpg" WIDTH=106 HEIGHT=160 border=0 alt="grid"></A><br><font size=3>grid</font></TD>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/27694407" class="thumbnail"><IMG class=thumbnail src="http://mk23.image.pbase.com/u42/fodo/small/27694407.DSC_0003.jpg" WIDTH=106 HEIGHT=160 border=0 alt="shadow"></A><br><font size=3>shadow</font></TD>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/28151770" class="thumbnail"><IMG class=thumbnail src="http://mikuna.image.pbase.com/u43/fodo/small/28151770.DSC_0207.jpg" WIDTH=106 HEIGHT=160 border=0 alt="seventh gate"></A><br><font size=3>seventh gate</font></TD>
</TR><TR>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/28151771" class="thumbnail"><IMG class=thumbnail src="http://mikeli.image.pbase.com/u43/fodo/small/28151771.DSC_0208.jpg" WIDTH=160 HEIGHT=69 border=0 alt="turn"></A><br><font size=3>turn</font></TD>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/28151772" class="thumbnail"><IMG class=thumbnail src="http://mikilo.image.pbase.com/u43/fodo/small/28151772.DSC_0211.jpg" WIDTH=106 HEIGHT=160 border=0 alt="crates"></A><br><font size=3>crates</font></TD>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/28151778" class="thumbnail"><IMG class=thumbnail src="http://mk29.image.pbase.com/u43/fodo/small/28151778.DSC_0228.jpg" WIDTH=106 HEIGHT=160 border=0 alt="on/off"></A><br><font size=3>on/off</font></TD>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/29916268" class="thumbnail"><IMG class=thumbnail src="http://mk29.image.pbase.com/u46/fodo/small/29916268.DSC_1347.jpg" WIDTH=160 HEIGHT=106 border=0 alt="symmatric"></A><br><font size=3>symmatric</font></TD>
</TR><TR>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/29916269" class="thumbnail"><IMG class=thumbnail src="http://mk31.image.pbase.com/u46/fodo/small/29916269.DSC_1364.jpg" WIDTH=108 HEIGHT=160 border=0 alt="2 Hu"></A><br><font size=3>2 Hu</font></TD>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/29916270" class="thumbnail"><IMG class=thumbnail src="http://mikuna.image.pbase.com/u46/fodo/small/29916270.DSC_1400.jpg" WIDTH=106 HEIGHT=160 border=0 alt="busted"></A><br><font size=3>busted</font></TD>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/29916271" class="thumbnail"><IMG class=thumbnail src="http://mikeli.image.pbase.com/u46/fodo/small/29916271.DSC_1433.jpg" WIDTH=106 HEIGHT=160 border=0 alt="escalated"></A><br><font size=3>escalated</font></TD>
<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/image/29916273" class="thumbnail"><IMG class=thumbnail src="http://mk37.image.pbase.com/u46/fodo/small/29916273.DSC_1453.jpg" WIDTH=160 HEIGHT=92 border=0 alt="mailbox"></A><br><font size=3>mailbox</font></TD>
</TR></TABLE>
</CENTER></DIV><table width="100%"><tr><td align=left>previous page</td><td align=center>pages <b>1</b> <A HREF="/fodo/d70&page=2">2</A> <A HREF="/fodo/d70&page=all">ALL</A> </td><td align=right><a href="/fodo/d70&page=2">next page</a></td></tr></table>


<br>
<table border=0 cellspacing = 0 cellpadding=2 >
<tr>
<td colspan=3>
<a class=small href="/fodo/d70&cmd=vote&t=1092305228">vote for this gallery</a>
|
no comments
<b>
<a href="http://forums.pbase.com/topic?gallery_id=2101909&cmd=add_post" >
comment on this gallery
</a>
</b>
</td>
</tr>
</table>


<br>
<p class=small>
325 page views since 05-APR-04<br>
<a href="/fodo/d70&cmd=reset_hit_count">reset hit count</a>
| <a href="/help/hit_counters">help</a>
</p>
</body></html>

Thu Aug 12, 2004 10:59 am

The code used to be in 'View Source' but not anymore. Click on View Source and look for a url like this near the top...

http://css.pbase.com/styles/nnnnn.css

where nnnnn is a 5-digit number.

Paste that url into your browser, hit go and it should dump the code into FrontPage if you have that on your PC. You can edit it in FrontPage or just copy the code and paste it into a new CSS in pbase. Make sure to over-write the default code. You can them make changes in pbase's editor.

Robert

Thu Aug 12, 2004 11:13 am

SOrry~ Rob, I dont understand what you mean. I think I should go shoot myself in the head! :shock:

Thu Aug 12, 2004 12:26 pm

Hi.
What you pasted in, was the HTML of the entire page. that wasn't the stylesheet code. you don't need all of that HTML.

The following is the beginning of what you see if you View Source.

Code: Select all: <html lang="en-US"><head> <title>D70 Gallery Photo Gallery by Dave Lin at pbase.com</title> <link rel="stylesheet" type="text/css" href="http://image.pbase.com/styles/gallery2.css"> <link rel="stylesheet" type="text/css" href="http://css.pbase.com/styles/28011.css?t=1092305228"> <base href="http://www.pbase.com">

Note the two link tags that link to stylesheets.
The first one is the default PBase stylesheet which you can ignore.
The second is the stylesheet you want to look at. (the ?t=1092305228 can be ignored.)
so in your browser go to http://css.pbase.com/styles/28011.css and you'll see the stylesheet.
this is want you would copy and paste into a new stylesheet that you create at http://www.pbase.com/css

If all you need is a border though, you could take that bit of code you mentioned:

Code: Select all: IMG.thumbnail { border-style : solid; border-width : 2pt; border-color : #884444; }

and paste it into the css editor window at the bottom of the default code that shows up when you create a new stylesheet.

after editing a stylesheet. make sure you have selected it on your gallery.

I'm sorry this whole process is frustrating. Stylesheets can be very powerful, but there's a lot to learn about them.

We have plans over the next couple of months to do a lot of work on the stylesheet system. One part of this will be a stylesheet creation assistant which will be a page where you can choose colors and borders and font styles without having to look at actual stylesheet code.
This will generate a stylesheet which could then be edited by hand if you want.
Hopefully the new system will make it much easier for more people to customize their galleries.

-slug

Thu Aug 12, 2004 2:31 pm

thx a lot slug~

Another question. I updated CSS after I created a New CSS named "personal". The page displayed with the new style sheet in effect. Then I click on "back to gallery".

So... I am back to "edit your gallery" page, but I dont see the new CSS, "personal", that I can select from the style sheet scroll down. Is that normal?

Thx again!
Dave

Thu Aug 12, 2004 2:35 pm

another question.

Do I just add in the border script anywhere I want?

Would this be OK?

/*
::::: StyleSheet Information ::::::
:: ------------------------------::
:: PBase.com Style Version 1.0 ::
:: by Webdev - Pim Rijpsma - NL ::
:: http://www.pbase.com/webdev/ ::
:: ------------------------------::
:::::::::::::::::::::::::::::::::::
*/
a, a:link,a:visited,a:active {
color: rgb(204, 204, 255);
text-decoration: none;
}
a:hover {
color: rgb(95, 121, 216);
text-decoration: none;
}
a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
border: rgb(0, 0, 0) 1px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 172px;
display: block;
background: rgb(35, 35, 35);
height: 197px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
}
a.td.thumbnail:hover {
border: rgb(95, 121, 216) 1px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 172px;
display: block;
background: rgb(32, 32, 32);
height: 197px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
body{
margin-bottom: 20px;
margin-top: 0px;
background: rgb(45, 45, 45);

IMG.thumbnail {
border-style : solid;
border-width : 2pt;
border-color : #884444;
}

}
div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h1,h2,h3,h4,h5,font, center {
border: 0px;
color: rgb(91, 91, 101);
font: 12px verdana, arial, sans-serif;
}
font {
margin-left: 4px;
margin-right: 4px;
width: 170px;
display: block;
color: rgb(91, 91, 101);
font: 9px Verdana, Tahoma, Helvetica, sans-serif;
letter-spacing: 0px;

FOLLOWING WITH THE REST OF THE CSS....

THX ONE MO TIME!!!
DAVE

Thu Aug 12, 2004 9:27 pm

That should be OK, provided there is no reference to IMG.thumbnail or .thumbnail later on in the CSS.

Sat Aug 14, 2004 4:33 am

so I just leat the IMG.thumbnail out like this?

{
border-style : solid;
border-width : 2pt;
border-color : #884444;
}

thx
Dave

Sat Aug 14, 2004 6:51 pm

Sorry, looks like I confused you there!

Your original code was correct. What I meant to say was that the position of your code doesn't matter, provided you check that there isn't another reference to img.thumbnail further down in your CSS code, that might conflict with the code you have inserted.

Or, just to be sure, put your new code at the very end of the stylesheet.

Hope this is clear now,

HTML and Style Sheets

a real CSS idiot. PLZ HELP!!!

a real CSS idiot. PLZ HELP!!!

CSS

dont understand

one more Q

just to make sure

Who is online