GoFuckYourself.com - Adult Webmaster Forum - FREE CSS Gallery Template

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - FREE CSS Gallery Template - SE Optimized with sample stylesheet (https://gfy.com/showthread.php?t=899232)

FREE CSS Gallery Template - SE Optimized with sample stylesheet

OK, I'm sure most of you have seen CSS Zen Garden.

It illustrates better than anything, how flexible CSS is. It shows how amazingly different webpages can be while they have the exact same HTML.

SO, I thought it would be cool to have a gallery template we could do the same thing with, and here it is.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<title>Page Title : Include Keywords</title>

<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

<!--[if IE]><link rel="stylesheet" type="text/css" href="iestyles.css" media="screen" /><![endif]-->



</head>

<body>





<div id="container">



        <div id="header">

                <h1>Main Description. Include Keywords</h1>

        </div>

        

        <div id="gallery_wrapper">

                <div id="gallery_header">

                        <h2>Longer, more detailed description. Include Keywords again Longer, more detailed description. Include Keywords again Longer, more detailed description. Include Keywords again</h2>

                </div>

        

                <div class="nav_links">

                        <ul>

            <li><a href="#">Link 1</a></li>

            <li><a href="#">Link 2</a></li>

            <li><a href="#">Link 3</a></li>

            </ul>

                </div>

                

                <div class="content">

                        <div class="thumbs">

                                        <a href="#"><img src="manuel_uncut/images/t1.jpg" alt="thumb" /></a>

                    <p>2 Minute Preview Clip from ManuelUncut</p>

                    <p><a href="#">Download the Full Length Video</a></p>

                        </div>

                        <div class="thumbs">

                                        <a href="#"><img src="manuel_uncut/images/t1.jpg" alt="thumb" /></a>

                    <p>2 Minute Preview Clip from ManuelUncut</p>

                    <p><a href="#">Download the Full Length Video</a></p>                    

                        </div>                        

                </div>

                

                <div class="ad_wrapper">

                        <div class="ad01">

                        <h3><a href="#">Main Link Out to Tour</a></h3>

                        </div>

        

                        <div class="ad02">

                        <p>Keyword rich paragraph of text. Keyword rich paragraph of text. Keyword rich paragraph of text. 

                           Keyword rich paragraph of text. Keyword rich paragraph of text. Keyword rich paragraph of text.</p> 

                        </div>

                </div>        



                <div class="content">

                        <div class="thumbs">

                                        <a href="#"><img src="manuel_uncut/images/t1.jpg" alt="thumb" /></a>

                    <p>2 Minute Preview Clip from ManuelUncut</p>

                    <p><a href="#">Download the Full Length Video</a></p>                    

                        </div>

                        <div class="thumbs">

                                        <a href="#"><img src="manuel_uncut/images/t1.jpg" alt="thumb" /></a>

                    <p>2 Minute Preview Clip from ManuelUncut</p>

                    <p><a href="#">Download the Full Length Video</a></p>                    

                        </div>

                </div>

        

                <div class="ad_wrapper">

                        <div class="ad01">

                        <h3><a href="#">Main Link Out to Tour</a></h3>

                        </div>

        

                        <div class="ad02">

                        <p>Keyword rich paragraph of text. Keyword rich paragraph of text. Keyword rich paragraph of text. 

                           Keyword rich paragraph of text. Keyword rich paragraph of text. Keyword rich paragraph of text.</p> 

                        </div>

                </div>        

                    

                <div class="footer_links">

                        <ul>

            <li><a href="#">2257 Link</a></li>

            <li><a href="#">Webmasters</a></li>

            </ul>

                </div>    

        



        </div>

</div>



</div>



</body>

</html>

CSS

Code:

@charset "utf-8";



* {margin: 0; padding: 0;}

body {

        background: #040404;

        background-image: url(manuel_uncut/images/body_bg.jpg);

        background-repeat: no-repeat;

        background-position:top;

        margin: 0;

        padding: 0;

        font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;

        font-style: normal;

        font-variant: normal;

        font-weight: normal;

        font-size: medium;

        line-height: normal;

        word-spacing: normal;

        letter-spacing: normal;

        text-decoration: none;

        text-transform: none;

        text-align: left;

        text-indent: 0ex;        

}

        

#container {width: 800px; margin: 0 auto;}        

#header {

        width:780px; 

        height:49px; 

        text-align:right; 

        padding:95px 20px 0 0;

        font-size:14px;

        text-transform:uppercase;

        font-weight:bold;

        }        

.clear{clear: both;}



#gallery_wrapper {width:800px;}

#gallery_header {

        width:500px; 

        height:90px;

        padding:10px 20px 0 280px;

        font-size:12px;

        }

        

        

        

/*------------------------(   nav links   )---------------------------------------------(  nav links  )------------*/        

.nav_links {width:790px; height:35px; padding:10px 0 0 10px; 

                        background-image: url(manuel_uncut/images/nav_bg.gif); background-repeat: repeat-x;

                        border-bottom:#000000; border-bottom-width:1px; border-bottom-style:solid;

                        border-top:#000000; border-top-width:1px; border-top-style:solid;}

                        

                        .nav_links a {

                        color: #fff; text-decoration: underline;}



                        .nav_links a:visited {

                        color: #fff;}

        

                        .nav_links a:hover {

                        color: #FF0000; text-decoration: none;}



                        .nav_links ul {

                        margin: 0; padding-right:30px; text-align:left;}



                        .nav_links li {

                        list-style-type: none; display: inline; color:#fff; padding-right:20px;}

                        

                        



/*------------------------(  content  )------------------------------------------------------(  content  )------------*/

.content {height: 400px; width:800px; background-color:#FFFFFF;}



.thumbs {

        width:400px;

        height:400px; 

        float:left; 

        background-color:#FFFFFF;

        }

        .thumbs img {

        margin:8px 6px 10px 6px;

        border:#000000; border-width:medium; border-style:solid;

        }

        .thumbs p {text-align:center;}

        .thumbs p a:hover {color:#FF0000;}







/*--------------------------(  ad  )------------------------------------------------------------(  ad  )------------*/

.ad_wrapper {

        width:760px;

        height:140px;

        background-color:#FFFFFF;

        clear:both;

        padding:10px 20px 20px 20px;

        }

        .ad01 {

        width:760px;

        text-align:center;

        }

        .ad01 a {

        color:#0000FF;

        font-size:36px;

        }

        .ad01 a:hover {

        color:#666666;

        }

        .ad02 {

        width:760px;

        text-align:center;

        }

        .ad02 a {

        color:#0000FF;

        font-size:16px;

        }

        .ad02 a:hover {

        color:#666666;

        }



/*----------------------(  footer  )-----------------------------------------------------------------(  footer  )-----*/

.footer_links {width:790px; height:35px; padding:10px 0 0 10px; 

                        background-image: url(manuel_uncut/images/nav_bg.gif); background-repeat: repeat-x;

                        border-bottom:#000000; border-bottom-width:1px; border-bottom-style:solid;

                        border-top:#000000; border-top-width:1px; border-top-style:solid;}

                        

                        .footer_links a {

                        color: #fff; text-decoration: underline; font-size:10px;}



                        .footer_links a:visited {

                        color: #fff;}

        

                        .footer_links a:hover {

                        color: #FF0000; text-decoration: none;}



                        .footer_links ul {

                        margin: 0; padding-right:30px; text-align:left;}



                        .footer_links li {

                        list-style-type: none; display: inline; color:#fff; padding-right:20px;}

And here's the gallery

I kept this real simple, and the code as clean as possible so even CSS noobs can dive right in.

I already have a dozen ideas for how this layout can be altered, so grab the code and make your own.

and if you want custom versions of this template for your program, hit me up. Imagine how cheap you can make a ton of templates faster than ever before.

Thanks.

Nobody wants it? Maybe I need to whip up another template.

I am a css freak and love what you did there. Didn't cum like that for ages.

Awesome, thanks for sharing.

nice, css gallery templates as so much easier to deal with

dude... CSS is SOOOO Sexy! :)

Thanks. I hope someone posts their versions of the gallery.

I wonder if anyone would want a version for tgp/mgp.

Does the average porn webmaster know CSS?

I like your style :thumbsup

the page isn't validating because you have one more div in excess at the bottom, remove it and it should be OK :2 cents:

Quote:

Originally Posted by PSD CSS XHTML (Post 15736725)

Does the average porn webmaster know CSS?

i don't think so but i'm learning it along with php/mysql :thumbsup

Quote:

Originally Posted by devine (Post 15736965)

the page isn't validating because you have one more div in excess at the bottom, remove it and it should be OK :2 cents:

:1orglaugh Good catch. It was almost 5AM when i got this idea and threw it together for this thread. I didn't bother to validate it because I knew there was nothing in there to give me an error.. unless i did something dumb like add an extra /div. :winkwink:

I actually was going to make this thread a sort of primer for anyone just getting started with CSS, and give some tips and answer questions if there were any, but it appears most of you guys in here already know what you're doing.

It's nice, but having an uncut 90k image loading at the top can hammer a gallery productivity. but the code's still useful.

care to post a sample psd file for the header bg so noobs like me can started right away and make their own stuff.

i love the template and am digging into it when i return from the vets.

Quote:

Originally Posted by v4 media (Post 15737130)

It's nice, but having an uncut 90k image loading at the top can hammer a gallery productivity. but the code's still useful.

Valid. Of course, the bg image in the sample was just one layout approach, and it is probably a good idea for all galleries to set the .thumbs to preload in the css. That way the thumbs are the first images to appear.

Any more thoughts or ideas? I think we are building the perfect gallery template.

Quote:

Originally Posted by boneless (Post 15737493)

care to post a sample psd file for the header bg so noobs like me can started right away and make their own stuff.

i love the template and am digging into it when i return from the vets.

I can post it, but let me explain too..

The template is set up so that the "container" is where the gallery lives, and it's restricted to 800px so the surfers still surfing on a 13" emachine don't get a horizontal scroll bar, but the bg can be 1024 wide or even 2 or 3,000px wide.

Just keep an eye on the filesize. I think 100 to 150kb should be the max, even once the thumbs are set to preload. This is still just a gallery after all.

So, when making your own bg, use the guides in photoshop to show you where the dead center of the page is, and 400px on either side shows you where the gallery will sit. Then just make your bg around that.

and in case you are not familiar with "guides"

If you have a 1000px bg and want to know exactly where your 800px gallery will sit..
You'll need a guide at the 100px point and the 900px point..

So, in photoshop select View > New Guide
Select Verical and 100px

Then repeat at 900px and now you can see exactly where your gallery will fall.

If you have a network of sites you need galleries for, let me see them. I can develop a real cheap css template solution for you to use across them all.

I'm reviewing sponsor lineups now and I have so many ideas I'd love to try, but I need to know it's going to make me money before I spend too much time on it, and there's no way I'll ever get around to submitting them. That doesn't look like any fun at all.

But, I would love to work with a program that has 10 or more hot sites.

Since I don't submit or have the traffic to really test this sample, so if anyone who runs a large tgp network wants to run a couple of these galls, I'll make you a couple free versions and we can test the ctr.

Nice :thumbsup

Could be very useful.

Nicely done. I wouldn't consider this fully SEO optimized however.

I would recommend using a strict doctype.
Meta tags are a must, keywords, description
Font size should not be declared in px. Only use em or %
Extra divs are not needed (container, gallery_header). You can target html, body,h2 to get the same effect
css and html could be reduced quite a bit, using short hand css and removing redunant div tags

Other than that, its fairly straight forward, clean and semantic.

:2 cents:
:thumbsup

Quote:

Originally Posted by Bored (Post 15739858)

Nicely done. I wouldn't consider this fully SEO optimized however.

I would recommend using a strict doctype.
Meta tags are a must, keywords, description
Font size should not be declared in px. Only use em or %
Extra divs are not needed (container, gallery_header). You can target html, body,h2 to get the same effect
css and html could be reduced quite a bit, using short hand css and removing redunant div tags

Other than that, its fairly straight forward, clean and semantic.
:2 cents:
:thumbsup

As I mentioned, it's kept very basic for the broadest usability. CSS shorthand and em measurements are not good for noobs figuring out what is what and that's more about scalability than SEO.

As for the extra divs, it was a conscious decision to make it as flexible as possible. This could be used for submitting with standard recip buttons or as a super FHG with a very hard sell. Of course the sample gall could be done differently, but this is a template solution.

The meta tags was kind of an assumed thing which i guess I shouldn't have assumed :winkwink:

Quote:

Errors found while checking this document as XHTML 1.0 Transitional!
Result: 3 Errors

Validation Output: 3 Errors

1. Error Line 92, Column 6: end tag for element "div" which is not open

</div>

✉

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occurred in a script section of your document, you should probably read this FAQ entry.
2. Error Line 92, Column 6: XML Parsing Error: Opening and ending tag mismatch: body line 11 and div

</div>

✉
3. Error Line 94, Column 7: XML Parsing Error: Opening and ending tag mismatch: html line 2 and body

</body>

Quote:

Warnings (18)
URI : http://organicautomotive.com/temp/styles.css
54 Same colors for color and background-color in two contexts .ad_wrapper and .nav_links a
54 Same colors for color and background-color in two contexts .thumbs and .nav_links a
54 Same colors for color and background-color in two contexts #content and .nav_links a
57 Same colors for color and background-color in two contexts #content and .nav_links a:visited
57 Same colors for color and background-color in two contexts .thumbs and .nav_links a:visited
57 Same colors for color and background-color in two contexts .ad_wrapper and .nav_links a:visited
66 Same colors for color and background-color in two contexts #content and .nav_links li
66 Same colors for color and background-color in two contexts .ad_wrapper and .nav_links li
66 Same colors for color and background-color in two contexts .thumbs and .nav_links li
126 Same colors for color and background-color in two contexts .ad_wrapper and .footer_links a
126 Same colors for color and background-color in two contexts #content and .footer_links a
126 Same colors for color and background-color in two contexts .thumbs and .footer_links a
129 Same colors for color and background-color in two contexts .thumbs and .footer_links a:visited
129 Same colors for color and background-color in two contexts .ad_wrapper and .footer_links a:visited
129 Same colors for color and background-color in two contexts #content and .footer_links a:visited
138 Same colors for color and background-color in two contexts .thumbs and .footer_links li
138 Same colors for color and background-color in two contexts #content and .footer_links li
138 Same colors for color and background-color in two contexts .ad_wrapper and .footer_links li

Quote:

Originally Posted by PSD CSS XHTML (Post 15739923)

You can try to make up any excuses as you'd like. But I think you pretty much just shot yourself in the foot. :Oh crap

Quote:

Originally Posted by potter (Post 15740525)

You can try to make up any excuses as you'd like. But I think you pretty much just shot yourself in the foot. :Oh crap

Could you show me exactly where I "shot myself in the foot"?

I admitted there was an extra closed div tag, but if that's really all you got.. because if you take the time to check, that will eliminate all the errors.

and I have no idea what you are running the css through to get those color errors but that is really hilarious. What should I be worried about there? A little redundancy at the worst case. Remember, this is a template so people can easily customize it.

I never claimed it was the holy grail of XHTML/CSS perfection.

Quote:

Originally Posted by PSD CSS XHTML (Post 15740615)

and I have no idea what you are running the css through to get those color errors but that is really hilarious. What should I be worried about there? A little redundancy at the worst case. .

woooooooow

shot in the foot again

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

http://jigsaw.w3.org/css-validator/v...ng=1&la ng=en

:Oh crap

Quote:

Originally Posted by potter (Post 15740525)

You can try to make up any excuses as you'd like. But I think you pretty much just shot yourself in the foot. :Oh crap

Man, if you take that div out it validates, there are not 3 errors, just one that causes the other two, and everyone can make a mistake. I'd check for errors first myself, but it's not like the end of the world. Obviously the guy is trying to promote his services and there's nothing wrong with that, he's doing it by providing some kind of freebie or example of his work.

Now, I assume you're beyong w3.org since I get this:

with CSS2.1 profile

Quote:

W3C CSS Validator results for http://organicautomotive.com/temp/ (CSS level 2.1)
Congratulations! No Error Found.

This document validates as CSS level 2.1 !

To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the XHTML you could use to add this icon to your Web page:

with CSS3 profile

Quote:

W3C CSS Validator results for http://organicautomotive.com/temp/ (CSS level 3)
Congratulations! No Error Found.

This document validates as CSS level 3 !

To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the XHTML you could use to add this icon to your Web page:

btw, I remember a thread where you were trying to sell some CSS designs and a lot of people attacked you. I didn't like that at all, I understand this is GFY, but still. However, now you do the same to someone else? Way to go... :error

Quote:

Originally Posted by potter (Post 15740649)

woooooooow

shot in the foot again

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

http://jigsaw.w3.org/css-validator/v...ng=1&la ng=en

:Oh crap

No errors! Thanks for the link.

Now, there are warnings about divs having the same color as text found in other places on the page. It's a WARNING, in case you have them overlapped somewhere.

It's just telling you that there may be a case of invisible text, but that issue is not present in my template.

Anything else? My feet are fine. How are yours?

You claim to be a CSS/XHTML expert, come on GFY and provide an example of your work which doesn't even validate and has a bunch of CSS warnings?

You expect any different? :1orglaugh

Quote:

Originally Posted by devine (Post 15740698)

:1orglaugh

I even went back and reread the thread. The only non-trolls defended me, or couldn't back up their "attacks" with any urls/examples. I even mentioned early on trolling was to be expected.

Come on man. I understand you have to stick to your guns now that you've made such a big deal, but you are basically bitching about an extra </div> The color warnings mean nothing and you know it (at least i hope you do).

I also never claimed to be an "expert"

Quote:

Originally Posted by PSD CSS XHTML (Post 15740753)

Stick to my guns? No. Anyone on here who knows me, knows when it comes to code I'm extremely anal.

And don't feel too bad. I do the same sometimes as well.

http://jigsaw.w3.org/css-validator/v...ning=1&lang=en

It was pretty dumb to not validate your shit though before you started this thread.

I'll admit it was dumb if you admit the stuff your nitpicking over has ZERO impact on the effectiveness of the template.

And seriously, I ALWAYS validate, but this was so basic, I knew there were no errors along the lines of me coding something incorrectly, and not just forgetting to delete a close tag from another iteration.

Why is potter being an asshole? Thanks for the sweet free template, PSD.

validation is a great tool to check your code for errors. It allows you to track down specific errors and correct them.

It is recommended that you use a strict doctype to reduce the amount of 'errors' or redundancy in your code but it is really depends on the situation.

More over, a site that validates 100% doesn't mean its coded properly. You can get a blank document to validate 100%.

PSD CSS XHTML posted a fantastic template for a gallery. Not only is it purely css driven, sematic and clean, but it also has a lot of SEO elements most templates wouldn't provide. If it doesn't validate, big deal, make the changes and get it to validate yourself. In the end, he has provided this FREE for people to use.

Validation is not the be all and end all of properly coded HTML/CSS

:2 cents::321GFY