Understanding CSS layout design for PBASE Galleries: Part 2 – Your own styles for galleries:

Following on from this intro post.

Right now we have our blank canvas we can begin. It can seem like a massive task looking at a mangled mess of html that we don’t really need or want to understand. We need to have a picture in our mind of how the folks at PBase have laid out our pages so we can start to style it one piece at a time. As I said I consider the HTML tags as a series on containers and each container has a name and a set of stuff that can be styled. I have gone through and tried to provide a map of the sections for a normal gallery page. The DIV and Span names are so that you can refer to each sections to define how each things looks.

——– STANDARD GALLERY PAGE: ——–

<BODY> (defines the top level)

<table> (holding the pbase menu bar)

<DIV: #commententry> holds input form when users click post a comment.

<table> (with treepath and treeview/slideshow options)

<DIV: #page-1 >

<DIV: #linkedsubgalleries >(all the other sub gallery links)

<SPAN .current >(the gallery name we r in (no link))

<SPAN .other >(the other gallery names with A link)

</DIV: #linkedsubgalleries >

<h2> (the title of the gallery)

<DIV: .galleryheader > (the user desc section)

<DIV: .thumbnails> (hold the massive table with all the image and gallery thumbnails)

<DIV: .gallery_comments >

<table>

#voteContainer

post a comment

</table>

<DIV: #commentlist>

<DIV: .comment> has all the comment info -name date etc inside

<DIV: .comment>

<DIV: .comment>

<DIV: .comment>

</DIV: #commentlist>

</DIV: .gallery_comments >

<DIV: .gallery_hitcounts > (p.small of hit counts)

</DIV: #page-1 >

</BODY>

If you set a style at the top container level it will be applied to all the little container levels until its gets overridden at a lower level. For example setting the background to blue on the BODY and the background to white on a lower level such as the H2 title bar you can see that your whole page is blue except for where the header H2 section overrides it. Paste this into your css to see what I mean.

BODY
{
background:blue;
}

h2
{
background:white;
}

Now you see the principle of this (and reading through this link http://www.w3schools.com/css/css_intro.asp will give you a much better explanation of some of the features you can apply to your styles than I can list here) you can build up your own styles. Bear in mind that the same css file needs to be flexible enough for it to be re-used for your Image page, so don’t get too into it before you read Part 3 of this explanation.

Test it in many browsers

Surprisingly the different browsers out there show pages slightly differently. I found that IE (internet explorer) was the most annoyingly picky so I designed for that and then re tested in Firefox, Safari and Chrome to make sure it looked ok in what I personally would use.

Colours
Simple colours can be defined my name eg: background:white;
For a more complex (nicer) range you may find it easier to define your colours as rgb rather than hash values (like I have). You can do that by putting something like background:rgb(100, 100, 100); and changing the numbers, most paint packages give a colour picker with RGB values you can choose from and just type in those numbers for the desired colour.

Part 3 will go over image gallery page…

About these ads

One thought on “Understanding CSS layout design for PBASE Galleries: Part 2 – Your own styles for galleries:

  1. Pingback: Understanding CSS layout design for PBASE Galleries: Part 3 – Image page: « Memoirs of an Underwater Photographer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s