61 replies [Last post]
rich_n
Offline
Enthusiast
Last seen: 13 years 8 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Chris, many thanks for the

Chris, many thanks for the advice...

I'm back on the case now, working through your code, trying to make sense of it.

It works - of course - which is great.

(When I tried to figure it out on my own, I wasn't using 'vertical-align:top')

Testing in Firefox, I noticed that when the text size is increased, the text spills out of the panel, so I added 'white-space: normal' to the panel, which seems to have fixed it.

'To take the easy way out, you can consider the page as a list of panels. Some panels contain pictures and some contain text.'

I'm happy with viewing it like that (a single list, rather than container/list/container), as I think it probably makes it easier to style as a horizontal scroller.

There are a couple of bits of your code that I don't properly understand. I'll play with them a bit longer, and post again if I can't figure it all out.

Cheers

Richard

rich_n
Offline
Enthusiast
Last seen: 13 years 8 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Image dimensions - CSS or HTML

'I moved the image dimensions off the img tag and into CSS - that way CSS could change the dimensions for printing.'

The image dimensions were only there in the HTML because Dreamweaver inserts them when I use 'Insert>Image'.

The images that I have been using so far for the test gallery all have the same pixel dimensions, so it's easy to transfer their dimensions to the CSS.

In other galleries there will be several different sizes of images - I guess that's still quite easy to transfer to the CSS.

However there will be one gallery of 'tearsheets' (photocopies of magazine pages of my published work), where all the images, although of the same height, will be of differing widths (because magazines are all published to slightly different formats).

What is best practice here?

Presumably image dimensions need to be specified somewhere, so that the page is laid out correctly as the images are downloading.

I tried varying the image size with CSS, when the image size was already specified in the HTML, and it seems that the CSS overides the HTML.

I'm guessing that it's best to use CSS to specifiy image size if there are only a couple of different image sizes in a gallery, but to use HTML if all the image are of different sizes.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Normally, I'd say its best

Normally, I'd say its best to put the image dimensions in the html. If CSS is overriding the html dimensions then you can put the screen width and/or height in html and just override those for the print style sheet.

rich_n
Offline
Enthusiast
Last seen: 13 years 8 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Eek, I just moved the image

Eek, I just moved the image dimensions from the HTML to the CSS for these two sample pages! (I'll switch back later.)

Here are the pictures plus text-panels done with tables:

http://www.richardnicholson.com/testing/table_text.html

And done with a list:

http://www.richardnicholson.com/testing/list_text.html

Exactly the same!

Well, almost - there's a pixel-perfect match, except for one thing - the gap between the pictures and the captions is 3 pixels greater in the list version (in Firefox, Safari and Opera). I'm not sure why. It's bugging me, but I guess it's not important.

I noticed, Chris, that you used 'text-transform: lowercase' in your code. I didn't know about that. It's useful and I've put it in the body tag. At the moment I want to use lowercase throughout the site, but it makes most sense to enter text normally in the HTML (i.e. with appropriate capitals) and then render it lowercase with the CSS.

I can see that it's necessary for the styling of the credits list in the final text box, but I don't really understand what 'height: auto' is doing. ???

Re. hacks - I still only have this bit of code:

.scroller li {display: inline; zoom: 1; }

Is that enough, or do I need more?

There are extra bits of code in your 'tester415a', but I'm not sure what they do, and whether they're necessary:

body {behavior: url(/javascript/csshover.htc);} img {behavior: url(/javascript/pngbehavior.htc);} .scroller li { display: inline; zoom: 1; }

/*]]>*/-->

Finally I notice you style the text panels like this:

.scroller li .panel { width: 320px; height: 435px; padding: 30px; background: #f4f4f4; }

Whereas I've done it like this:

.scroller .textbox { height: 495px; width: 380px; background: #F7F7F7; border: 1px dotted #CCCCCC; margin-top: 30px; white-space: normal;

They're basically the same (I think?), but you've put padding in the box, whereas I put margins on the text that goes into the box. Just two ways to do the same thing?

Overall I'm very pleased that it all seems to be working and that it doesn't use tables.

Many thanks

Richard

rich_n
Offline
Enthusiast
Last seen: 13 years 8 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

valid

Good, the XHTML and CSS validate at http://validator.w3.org/

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

height:auto in the credits

height:auto in the credits :- its there to override the fixed height value we have given <LI> elements in the main gallery. It would be better to use the child selector ( > ) for the gallery's <LI> elements, however, IE6 doesn't understand it. So, instead, you need to override any of its styles that aren't wanted on more deeply nested <LI> elements.

Those other bits and pieces are part of my standard page template. You don't need to worry about them.

  • the two behaviours are IE fixes. "csshover.htc" gives IE something approaching the :hover capabilities of more modern browsers, see whatever:hover. pngbehaviour gives IE some (very imperfect) capability to show .png images with alphatransparency. I very rarely use pngbehavior on live sites. I do sometimes use whatever:hover.
  • The template includes properly commented spots for me to add javascript and CSS.
  • All those "/*[" characters are designed to ensure the contents of the <style> and <script> are properly commented. Strictly XHTML requires different commenting and the whole wierd combination makes sure all browsers get the proper comments.

rich_n
Offline
Enthusiast
Last seen: 13 years 8 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Thanks - the height:auto

Thanks - the height:auto makes sense now.

The 'csshover.htc' thing is interesting, as I'm playing with dropdown menus now. For the sake of simplicity I'm starting with the menus at cssplay, as they are pure CSS.

About semantics - you mentioned earlier that it would be neater to put the picture captions (H3 headings in my current example), before rather than after the images in the HTML, and then use CSS to position them correctly (aligned right, and at the bottom of the image).

I agree - this makes the non-styled page look a lot better, as the bullet points are now with the captions and not the images (which looked odd). However I can't figure out how to style the captions with CSS to bring them back down below the images. I've tried all vertical-align options, but they don't do anything. Any ideas?

Cheers

Richard

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Things start to get a little

Things start to get a little messy now.

You need to use position to shift the different elements around. Strangely, position:relative on display:table-cell doesn't constrain right to the the right hand edge of the cell. To overcome that you'll need to wrap the <LI> contents in a <DIV> Give it a class, e.g. frame or pic_frame. Then add in the following styles:

.frame { position: relative; padding-bottom: 40px; /* see note */ }

.frame h5 {
position: absolute;
bottom: 0; /* adjust these as necessary */
right: 0;
}

note: you could use height on the frame, except that will trigger hasLayout in IE, which you don't want to do.

Also, IE aligns things at the bottom slightly differently so it will require its own bottom and right offsets.

updated link: http://wiki.jalakai.co.uk/tester415a

re, your original PS. What does Eric Meyer know anyhow Wink

rich_n
Offline
Enthusiast
Last seen: 13 years 8 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Thanks for showing that it

Thanks for showing that it can be done.

Like you say, it's starting to get a little messy.

Semantics is well and good, but I also want very simple code which I will still understand in 6 months time when I come to update my website.

So I'm not sure whether I'll implement the image/caption switch for now.

Re. Eric - I've just posted my latest sample (and this thread - eek!) on his CSS discussion list. I'm hoping to get some feedback on browser compatibility. So far it seems to be not working in IE7 (images run down the page, as they do in IE Mac), but it does work in lots of other browsers (IE6, FF, Opera.... and Mozilla and Gecko, whatever they are).

No discussion of semantics yet.

I'm going to create a little CSS horizontal drop-down menu tonight, and tomorrow I'll start a new thread here with a question about how best to position the menu with the scrolling gallery (I want the menu fixed, like a frame, whilst the images scroll).

Thanks for all your help

Richard

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Some/All of those questions

Some/All of those questions you asked as CSS Discuss you can ask here.

e.g. As I mentioned, post to site check for tests in other browsers. I always check in Firefox/WinXP and IE6/WinXP, although my checking won't be to the level of pixel accuracy you may require.

Firefox runs on the Gecko Engine [1,2], it is produced by Mozilla, there are other browsers which run on the same engine, e.g. Camino (for Mac OSX). Mozilla can also refer to the older Mozilla browser or the current Mozilla Internet Suite.

Lists versus multiple divs versus tables is a subjective thing. In this case there isn't really a right or wrong just as strawberry ice cream is no more right than chocolate or vanilla. I say table, as you could easily consider your gallery as a table of images. Where tables are considered bad is when they are used (and often abused) as a layout mechanism. In this case, one table would be holding a cells of similar content much like a table does normally. We generally try and do things here without tables, maybe sometimes to excess Smile.

For accurate spacing, especially with images of varying sizes, using a scripting language like PHP is a great help as you can generate a neatly aligned pages on the fly. Also, with appropriate forethought you can make it so adding/modifying galleries and images occurs automatically when ever you alter the image files and directories. This is an example I put together a while back.

To put together a page with a fixed menu and a scrolling gallery requires position:fixed. IE doesn't support position:fixed. There are work arounds which will see you with the gallery in a scrolling container -- back with what I first showed you Smile

[1] Full URL http://en.wikipedia.org/wiki/Gecko_(layout_engine)
[2] For Mozilla's own description of Gecko, see mozilla.org, choosing the right product, top right corner

rich_n
Offline
Enthusiast
Last seen: 13 years 8 weeks ago
Joined: 2006-08-29
Posts: 54
Points: 0

Hi Chris Thanks for your

Hi Chris

Thanks for your comments/links re browsers - it should help me understand my site statistics.

Also, interesting comments about choosing between lists/divs/tables. I'm going to stick with what we have for now (someone on CSS Discuss propsed a hack to get it scrolling horizontally in IE Mac - I haven't tried it yet, but it sounds promising). However I think in the end I may well revert to tables (styled in CSS).

I was resisting tables because I thought it would be nice to use CSS to print each gallery as an A4 sheet of thumbnails. I think that could be still done with a table. (Have all images repeated twice in the HTML, once in a table, for screen, and once in a div for print - switch visibility for screen or print with CSS). ???

It sounds like it would be good for me to learn PHP. At the moment though CSS is giving me enough trouble! Maybe in the future.

Cheers

Richard

(I've started a new thread about the overall layout of my website. I'll keep posting to this thread, if I make changes to the structure of the scrolling gallery element.)