Clean and Simple Style Sheet download

[rfcd100]

My first attempt at modifying a style sheet. Its clean, simple and elegant with rollovers.
http://www.pbase.com/rfcd100/root

If you are interested, just create a new style sheet with the following code


DIV,BODY,TD,TH,TR,TABLE,FONT,INPUT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5 {
font-family: arial,helvetica,sans-serif;
color : rgb(180, 180, 150)
background : rgb(45, 45, 45);
}


/* ------------ LINKS ------------ */

A:link { color : RGB(180, 180, 150)}
A:visited { color : RGB(180, 180, 150)}
A:active { color : Teal}
A:hover { color: rgb(255, 255, 225)}

/* ------------ THUMBNAILS -------- */

a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
border: rgb(70, 70, 70) 1px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 172px;
display: block;
background: rgb(0,0,0);
height: 197px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=150);
}
a.td.thumbnail:hover {
border: rgb(225, 225, 225) 1px solid;
/* border: rgb(95, 121, 216) 1px solid; */
/* border: 4px RIDGE rgb(225, 225, 150); */
margin-bottom: -45px;
padding-top: 5px;
width: 172px;
display: block;
background: rgb(60, 60, 60);
height: 197px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.galleryheader { /* TEXT INCLUDED BELOW GALLERY TITLE */
/* margin-bottom: 1em;
margin-left: 5%;
margin-right: 5%; */
margin-top: 5px;
border: rgb(0,0,0) 3px solid;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
/* padding-top: 5px; */
padding: 5px;
padding-left: 40px;
padding-right: 40px;
width: 90%;
display: block;
background: rgb(0,0,0);
font-size: 18pt;
color: rgb(130, 130, 150);
font-weight: normal;
/* letter-spacing: 4px; */
text-align: Left;
/* height: 21px; */
position: relative;
}

.display { /* DISPLAY PHOTO */

}

.title { /* DISPLAY PHOTO TITLE */
font-size : 12pt;
color: rgb(111, 111, 111);
font-style : italic;
}

.caption { /* DISPLAY PHOTO CAPTION */
font-size : 8pt;
color: rgb(111, 111, 111);
font-style : italic;
}

.date {}

.artist {
Name: "RFC Graphics"; /* Does not work */
}
.location {}

.camera { /* INCLUDES CAMERA AND LENS INFO */
}

.exif {}

.techinfo {
color : LightGrey;
font-size : 8pt;
}

.othersizes {}

body{
margin-bottom: 20px;
margin-top: 0px;
background: rgb(0,0,0);
}

div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h1,h2,h3,h4,h5,font, center {
/* All text above photos */
border: 0px;
color: rgb(150, 150, 180);
/* color: rgb(180, 180, 150); */
/* color: rgb(91, 91, 101); */
font: 9pt verdana, arial, sans-serif;
font-weight: bold;
}

font { /* Gallery photo name */
margin-left: 4px;
margin-right: 4px;
width: 170px;
display: block;
color: rgb(111, 111, 111);
font: 8pt Verdana, Tahoma, Helvetica, sans-serif;
letter-spacing: 0px;
}
h1 {/* Don't know what this does */
/* border: rgb(65, 65, 65) 1px solid;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
margin-bottom: 1em;
margin-left: -10px;
margin-right: 0px;
padding: 5px;
padding-left: 50px; This whole section not used */
/* width: 90%; Does not make any difference */
/* display: block;
background: rgb(45, 45, 45);
color: rgb(110, 110, 120);
font-size: 24pt; font-weight: normal;
letter-spacing: 4px;
text-align: Lefy;
height: 21px;
position: relative;*/
/*
filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#000000',endColorstr='#2D2D2D'); */

}
h2 { /* Header Title (n/a for main gallery - no title) */
border: rgb(65, 65, 65) 3px solid;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
margin-bottom: 1em;
margin-left: -10px;
margin-right: -20px;
padding: 5px;
padding-left: 50px;
padding-right:50px;
/* width: 95%; */
display: block;
background: rgb(45, 45, 45);
color: rgb(110, 110, 120);
font-size: 24pt;
font-weight: normal;
letter-spacing: 4px;
text-align: Left;
height: 21px;
position: relative;
/* background-attachment: fixed; */
background-repeat: no-repeat;
background-position: Right Bottom;

}

h3 { /* Photo name area */
/* border-bottom: rgb(0, 0, 0) 1px dotted; */
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
padding: 2px;
width: 400px;
display: block;
background: rgb(45, 45, 45);
color: rgb(111, 111, 111);
font-size: 10pt; /* not affecting size */
font-weight: normal;
letter-spacing: 0px;
text-align: center;
}
h4 { /* Don't know what this does */
border-bottom: rgb(255, 255, 0) 1px dotted; */
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
padding: 2px;
width: 400px;
display: block;
background: rgb(45, 45, 45);
color: Yellow; /* rgb(111, 111, 111); */
font-size: 10pt; /* not affecting size */
font-weight: normal;
letter-spacing: 0px;
text-align: center;
}
h5 { /* Don't know what this does */
padding-left: 2px;
width: 150px;
display: block;
color: Yellow; /* rgb(204, 204, 255); */
font-size: 20pt;
font-weight: normal;

}

BODY { margin-top: 0px; top: 0px; }
BODY TABLE IMG { display: inline; }

[sheila]

Thanks. Looks good!

Cheers
Sheila

[dpnew]

My first attempt at modifying a style sheet. Its clean, simple and elegant with rollovers.
http://www.pbase.com/rfcd100/root

Nice. In my opinion, much better than the 'webdev' style. Although if you like the 'webdev' style but don't like the opacity hiding the images, and you want something more like this effect, you can change the opacity in the webdev style to 100%.

[dpnew]

When I added a 'description' to my gallery with an h2 tag, the description didn't center properly, so I made some changes to the style sheet to get a proper looking gallery description in IE6.

If you look at the source code, the html structure for the gallery description is:

Code: Select all

<div class="galleryheader">

   <h2>description or title here</h2>

</div>

To position the div tag (and therefore the h2 tag) on the page, I replaced the .galleryheader style with this:

Code: Select all

.galleryheader { /* TEXT INCLUDED BELOW GALLERY TITLE */

margin-left: 10%;
margin-right: 10%;
margin-top: 5px;
margin-bottom: 5px;

padding: 5px;
background-color: rgb(0,0,0);

}

Then, I replaced the h2 style with this:

Code: Select all

h2 { /* Header Title (n/a for main gallery - no title) */

padding: 5px;
border-bottom: 2px solid rgb(130, 130, 150);
text-align: center;
height: 21px;

background-color: rgb(45,45,45);

font-size: 12pt;
font-weight: bold;
letter-spacing: 4px;
color: rgb(130, 130, 150);

}

It didn't seem to adversely affect anything else.

I just noticed there is a spot for adding a 'title' to your gallery above where you can add a 'description'. I've been using the 'description' to title my galleries...oh well, it doesn't really matter.

[ukexpat]

I don't mean to be an ass about this, but I always run my own CSS edits through the W3 validator at:

http://jigsaw.w3.org/css-validator/

Running yours through it gives these errors, but I have no clue what most of them mean:

Line: 0 Context : DIV , BODY , TD , TH , TR , TABLE , FONT , INPUT , LI , UL , FORM , BLOCKQUOTE , P , B , I , H1 , H2 , H3 , H4 , H5
Invalid number : colorToo many values or values are not recognized : rgb(180,180,150) background

Line: 0 Context : DIV , BODY , TD , TH , TR , TABLE , FONT , INPUT , LI , UL , FORM , BLOCKQUOTE , P , B , I , H1 , H2 , H3 , H4 , H5
Parse Error - : rgb(45, 45, 45);

Line: 0 Context : DIV , BODY , TD , TH , TR , TABLE , FONT , INPUT , LI , UL , FORM , BLOCKQUOTE , P , B , I , H1 , H2 , H3 , H4 , H5
Parse error - Unrecognized : }

Line: 0 Context : a.td.thumbnail , a.td.thumbnail:link , a.td.thumbnail:visited , a.td.thumbnail:active
attempt to find a semi-colon before the property name. add it

Line: 0 Context : a.td.thumbnail , a.td.thumbnail:link , a.td.thumbnail:visited , a.td.thumbnail:active
Property progid doesn't exist : DXImageTransform

Line: 0 Context : a.td.thumbnail , a.td.thumbnail:link , a.td.thumbnail:visited , a.td.thumbnail:active
Parse Error - DXImageTransform.Microsoft.Alpha(Opacity=150);

Line: 0 Context : a.td.thumbnail , a.td.thumbnail:link , a.td.thumbnail:visited , a.td.thumbnail:active
Parse error - Unrecognized : }

Line: 0 Context : a.td.thumbnail:hover
attempt to find a semi-colon before the property name. add it

Line: 0 Context : a.td.thumbnail:hover
Property progid doesn't exist : DXImageTransform

Line: 0 Context : a.td.thumbnail:hover
Parse Error - DXImageTransform.Microsoft.Alpha(Opacity=100);

Line: 0 Context : a.td.thumbnail:hover
Parse error - Unrecognized : }

Line: 0 Context : .artist
Property name doesn't exist : "RFC Graphics"

Line: 0 Context : .techinfo
Invalid number : colorLightGrey is not a color value : LightGrey

Line: 0 Context : h2
Invalid number : background-positionRight is not a background-position value : Right Bottom

Line: 0 Context : h4
Parse Error - */ border-left: 1px none;

Line: 0
Parse Error - : 1px none; border-top: 1px none; padding: 2px; width: 400px; display: block; background: rgb(45

Line: 0
Parse Error - 45

Line: 0
Parse Error - 45); color: Yellow; font-size: 10pt; font-weight: normal; letter-spacing: 0px; text-align: center; } h5

[arachnophilia]

wow that validator chewed up my stylesheet. it said a bunch of stuff was invalid, even thought it works. (?)

anywho. have a look at mine.

everything used to line up square in ie, netscape/mozilla, and opera, until they changed the stylesheets from inline to files. i don't know why. the mouseovers only work in ie. ah well.

[dpnew]

My first attempt at modifying a style sheet.

don't mean to be an ass about this, but I always run my own CSS edits through the W3 validator at:

http://jigsaw.w3.org/css-validator/

If you look carefully at the stylesheet he posted, it apppears it was someone else's stylesheet that rfcd100 heavily modified.

[dpnew]

This is the list of problems:

1)

Code: Select all

DIV,BODY,TD,TH,TR,TABLE,FONT,INPUT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5 {
font-family: arial,helvetica,sans-serif;
color : rgb(180, 180, 150)                            *******missing semi-colon at end of line******
background : rgb(45, 45, 45);
}

2)

Code: Select all

/* ------------ THUMBNAILS -------- */
a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
border: rgb(70, 70, 70) 1px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 172px;
display: block;
background: rgb(0,0,0);
height: 197px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=150);  ************invalid filter***********
}

The filters are used in several places in the style sheet, but the MS filters aren't in the CSS specification. Both IE and Mozilla have these filters, so if you want to use them, your CSS won't meet the specs.

3)

Code: Select all

.artist {
Name: "RFC Graphics"; /* Does not work */      ***********problem noted in comment***********
}

Just comment out the whole line or delete it.

4)

Code: Select all

.techinfo {
color : LightGrey;      *******there is no color 'LightGrey'--there is a color 'gray'*******
font-size : 8pt;
}

Change to 'gray' or an rgb color.

5)

Code: Select all

h2 { /* Header Title (n/a for main gallery - no title) */
border: rgb(65, 65, 65) 3px solid;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
margin-bottom: 1em;
margin-left: -10px;
margin-right: -20px;
padding: 5px;
padding-left: 50px;
padding-right:50px;
/* width: 95%; */
display: block;
background: rgb(45, 45, 45);
color: rgb(110, 110, 120);
font-size: 24pt;
font-weight: normal;
letter-spacing: 4px;
text-align: Left;
height: 21px;
position: relative;
/* background-attachment: fixed; */
background-repeat: no-repeat;
background-position: Right Bottom;                  **************right bottom*******************

}

CSS is case sensitive--change to 'right bottom'.

6)

Code: Select all

h4 { /* Don't know what this does */
border-bottom: rgb(255, 255, 0) 1px dotted; */            ****extra comment tag '*/' ***
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
padding: 2px;
width: 400px;
display: block;
background: rgb(45, 45, 45);
color: Yellow; /* rgb(111, 111, 111); */
font-size: 10pt; /* not affecting size */
font-weight: normal;
letter-spacing: 0px;
text-align: center;
}

Get rid of the comment tag, or add a comment tag to the beginning of the line to disable the whole line.

[ukexpat]

My first attempt at modifying a style sheet.

don't mean to be an ass about this, but I always run my own CSS edits through the W3 validator at:

http://jigsaw.w3.org/css-validator/

If you look carefully at the stylesheet he posted, it apppears it was someone else's stylesheet that rfcd100 heavily modified.

OK, but can you tell what was "original" and what were "edits"?