Strategy to get started

[harlanlampert]

I'm just beginning to build my galleries. I want to do it efficiently from the beginning.

I'd like to have my main page full of rollover thumbnails that connect to the other galleries. I've found some models to use.

While I've tried cutting and pasting from others' ideas, I keep coming up with linkage problems and problems understanding when to use Style Sheets and when to put html code in the description box.

Can some suggest a step by step strategy or point me in the direction of one.

Three days of inefficient attempts is wearing me out...and I really cannot find the resources...so, help!!!

TIA Harlan

[ukexpat]

I'm just beginning to build my galleries. I want to do it efficiently from the beginning.

I'd like to have my main page full of rollover thumbnails that connect to the other galleries. I've found some models to use.

While I've tried cutting and pasting from others' ideas, I keep coming up with linkage problems and problems understanding when to use Style Sheets and when to put html code in the description box.

Can some suggest a step by step strategy or point me in the direction of one.

Three days of inefficient attempts is wearing me out...and I really cannot find the resources...so, help!!!

TIA Harlan

See the following and the links therein:

http://www.pbase.com/help/css

and even better:

http://www.srijith.net/pbasefaq/index.php?sid=23442&aktion=anzeigen&rubrik=003

I always run my edited CSS through a validator to check it for errors:

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

[harlanlampert]

What kinds of modifiers go in the html description box and

how do they impact the selected style sheet?

[ukexpat]

What kinds of modifiers go in the html description box and

how do they impact the selected style sheet?

Think of a CSS as master template for the page -- it defines formatting for the various page elements. See Arjun's helpful screen captures for more info:





The HTML fields on the other hand are, depending on the field, for things like adding text headers, a webcounter script, a CSS validation graphic, image captions etc. See my root gallery and my Hagley Museum gallery for a couple of examples:

http://www.pbase.com/ukexpat

http://www.pbase.com/ukexpat/hagley

[harlanlampert]

Thanks for the 'big picture' help. I'm sure that if I understand the underlying structure of the way the pages are conceptualized and then linked, I will have a much easier time constructing my vision of what I want

I believe that I want 3 layers of pages...top layer being the roll-over sort of index page that has thumbnail with gallery names that link to the gallery. The next layers are all of these initial linked galleries with a representative thumbnail for each picture in that gallery. These are linked to the third level, where the picturew live.

Would the same basic style sheet be used for all three layers?

Are there any basic differences in variables that I need to consider across the three layer?

Thanks, Harlan

[ukexpat]

Thanks for the 'big picture' help. I'm sure that if I understand the underlying structure of the way the pages are conceptualized and then linked, I will have a much easier time constructing my vision of what I want

I believe that I want 3 layers of pages...top layer being the roll-over sort of index page that has thumbnail with gallery names that link to the gallery. The next layers are all of these initial linked galleries with a representative thumbnail for each picture in that gallery. These are linked to the third level, where the picturew live.

Would the same basic style sheet be used for all three layers?

Are there any basic differences in variables that I need to consider across the three layer?

Thanks, Harlan

It doesn't work like that -- the basic structure of the gallery and images pages is fixed, all you can change with a CSS is the formatting. You cannot create your own page structure that PBase loads in place of the default structure. So, for example, you can set up a CSS so that in a gallery page thumnails are dimmed, or have one format (for example a frame of one color), but on a mouseover they are undimmed or the format changes (eg color of the frame changes), but you cannot have thumbnails display one image by default and a different image on a mouseover (at least I have not seen it done). The bottom line is that the CSS system is pretty flexible as far as it goes, but it is nowhere near as flexible (or as expensive!) as having your own site that you can code exactly as you want.

Probably the most clever and advanced use of CSS and related HTML has been done by Arjun Roychowdhury. Compare the following:

http://www.pbase.com/arjunrc

htp://arjunphotography.com

[matiasasun]

Harlan:

I´ve being a member for a long time. A few time ago I decided to understand all this Stylesheet/HTML stuff. My advices so far would be to use Firefox. There you would be able to see -separated- the HTML codes and the Stylesheet used in any page. It is a wonderful tool.
Information about all that can be found IN THIS FORUM.

Hope this helps you.
Matias

[harlanlampert]

Again, thanks for the help.

I really enjoyed your site, in fact it's similiar to what I had in mind. When I looked at your source code it wasn't clear to me what indicated the mouse rollover. Is it in the style sheet or did you add it to the description?

Harlan

[harlanlampert]

I'm using Mozilla now, I'll upgrade to Foxfire and see how well that works. Thanks for the links and the idea!!!

Harlan

[matiasasun]

You´re Welcome. If it is of any help this is what it should look like:
http://www.pbase.com/matiasasun/image/33922516

(I did that for another forum, but might be useful to you too)

PS. Mozilla should pay me for all this free publicity!

[harlanlampert]

OK, downloaded Firfox, clearly it is cool!

How is the CSS code different from the right-click 'page source' code...

Does that go back to my question about the CSS vs the code in the 'description' box?

Harlan

[ukexpat]

OK, downloaded Firfox, clearly it is cool!

How is the CSS code different from the right-click 'page source' code...

Does that go back to my question about the CSS vs the code in the 'description' box?

Harlan

When you "view source" you do not see the CSS details, you see the HTML code for the page -- you will see a reference to the CSS file that the page uses at the top of the source. CSS files are stored separately.

To answer your earlier question, on PBase pages mouseover formatting should be defined in the CSS.

[harlanlampert]

Wow... I'd like to thank you all for helping me with this basic understanding. I'm definately a big picture learner...need that before I fill in the details. Hopefully some intense study and work will get me what I want here. I am indebted. Thanks again.

Harlan

[matiasasun]

Nigel is the man!

A couple more advices:

Hopefully some intense study and work will get me what I want here.

1) Never underestimate the power of mistakes. Try changing things and check what happens.. that´s the main use I give to Firefox Wev Developer... Start with something simply and then try to create (destroy) something more complex. I´d say the ultimate challenge is to learn how the hell Webdev´s Style sheet works...

2) A last advice about the difference between HTML and CSS:
HTML goes between the PBase Menu and the thumbnails in the gallery pages, and at the bottom of the foto but over the comments in the photo pages... The rest, wich is mostly format (color, size, position) of the things we can modify is CSS. Of course there are some extra HTML codes... But the most relevant ones goes where the description text goes.

It is a very unorthodox way to describe the difference between HTML and CSS but sure it works!

3) For some reason changes made to style sheet in PBase are taking a few time (hours?). There is a couple of recent forums about that, so take it easy if a change does not get reflected inmediatly...

And please let us know what is your first CSS!
Take care and enjoy

[harlanlampert]

When I look at your page source information I notice that you are referencing 2 style sheets: gallery2.css and 37998.css. Have you created both of these? They obviously are doing different things...I'm guessing that they do not compete with each other. Do you reference one of them as one of your style sheets and the other in the description file?

As I'm learning the sections I'm seeing that I'd like to do something fairly complex, and again I'm looking for the big picture to see how map this whole thing out.

Hope I'm not being too specific or personal .

Harlan