Understanding CSS layout design for PBASE Galleries: Part 3 – Image page:

continuing on from part 2

The same css file needs to be flexible enough for it to be re-used for your Image page (because that is what pbase does). This provides some interesting results and little issues to overcome. Make yourself a little page-source-grab test page of a typical image page (mine was called ImagePage.html) and save in your test folder. Change the css in the HTML so it points at the test css file that your gallery is using (see the intro post)

When you load this in your browser you may notice its looks awful! You will no doubt need to put some styles in specially for the image page and its contents. Here’s my little page map that I used to help me:

——– IMAGE PAGE: —————-

<BODY>

table holding the pbase menu bar

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

<DIV: .imagepage#imagepage >

<DIV: .localmenu#localmenu > (tolds the one row table for the top gallery links section treepath)

<DIV .slideshow#slideshow > (this is the upper previous next in a table)

<DIV .image#image >

< table.imagetable> (the main image)

A is the link to image

<IMG.display>  (is the actual image)

<SPAN .date>   (is the date of the image)

<SPAN .artist> (is the name of the artist)

</ table.imagetable>

</DIV .image#image >

<DIV .imageinfo#imageinfo >

<h3 .title > (the title of the image)

<DIV .techinfo#techinfo >

<SPAN .camera> (camera name and link)

<SPAN .exif> (basic info and hide/show exif link)

< table> (with full exif)

td.sb (first line)

td.lid (other cells)

< /table>

</DIV .techinfo#techinfo >

<DIV .othersizes#othersizes > (othersize links)

<DIV .slideshow#Div1 > (this is the lower previous next in a table)

<DIV .copyright#copyright > (copyright in a p)

</DIV .imageinfo#imageinfo >

not in a div just a table:

#voteContainer

post a comment is just inside this table with not div or class so it is only affected by #imagepage settings and above.

<DIV:  .comment_section >

<DIV: #commentlist>

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

<DIV: .comment>

<DIV: .comment>

<DIV: .comment>

</DIV: #commentlist>

</DIV: .comment_section >

</DIV .imagepage#imagepage >

<DIV: .image_hitcounts> (two p.small with hit counts) </DIV: .image_hitcounts>

</BODY>

You’ll notice that  some stuff has the same name as the gallery page sections. You can define these just once in the css if you want them to look the same in both gallery and image page.

NB: One really annoying thing about the Pbase html for this is the “post a comment” link is inside .gallery_comments section for the gallery but just inside a table within #imagepage  on the image page.

Also, The name/tree path on the gallery page in only inside BODY but on the image page its within #imagepage  section.

stayed tuned for other gallery styles in part 4…

About these ads

One thought on “Understanding CSS layout design for PBASE Galleries: Part 3 – Image page:

  1. Pingback: Understanding CSS layout design for PBASE Galleries: Part 4 – Other gallery modes: « 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