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

Hi

I'm new to all of this.

I'm trying to create a side-scrolling photo gallery (i.e a single row of images, all of equal height, viewed by scrolling the default scrollbar at the bottom of the browser's window).

To line up the images horizontally I use float: left.

To stop the images wrapping in the browser window I place them in a #gallery div.

This only works if I specify a width for the #gallery div that is greater than the sum of all the image widths.

If I want to avoid dead space at the end of the gallery, then I have to carefully add up the widths of all the images, plus any borders and margins that I have added. This is tiresome.

Alternatively I can drop each image into a cell of a table (one row, many columns, styled in CSS).

This seems the best solution, as I do not need to calculate the width of the table - it automtically expands/contracts to accomodate the images I put in it. I can vary the image borders and margins (using CSS) without having to worry that an image might pop out of the row and wrap onto a second row.

Have I missed some CSS trick that will help me create a side scrolling-gallery? (i.e. that will stop the floated images wrapping to the browser window)

Thanks

Richard

(I was in a bookshop the other day, browsing More Eric Meyer on CSS. There's a chapter on creating a photo gallery. I may have misread it, but I think he suggests using tables if you don't want the images to wrap to the browser window.)

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

Yes, you've missed a trick

You need a structure like this:

<div id="scroller">
  <div id="gallery">
    <img ... />
    <img ... />
    ...
    <img ... />
  </div>
</div>

Give #scroller an overflow value of auto.
Give #galler a white-space value of nowrap and float it with no specified width. Floats are shrink to fit and nowrap will keep all the images on one line.

You'll end up with a very wide element nested inside a narrower (screen sized) element with a horizontal scrollbar.

[edit, fix code for missing < >]

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

Many thanks...How stupid

Many thanks...

How stupid of me not to try 'nowrap'.

I followed your recommended code, but then found I could delete much of it, and still get the effect that I want.

Isn't this enough?

.image { float: left; } #gallery { white-space: nowrap; }

I need to add captions, borders and margins to the images, but this seems a good starting point.

Is 'white-space: no wrap' supported by all browsers?

Much of my audience (about 50%) is Mac-based, and a few of them are still using Internet Explorer.

Thanks

Richard

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

Sorry again! That code

Sorry again!

That code doesn't make sense, does it? the '.image' isn't doing anything.

Messing in Dreamweaver, I figure the only CSS I need is:

#gallery { white-space: nowrap; }

The images then seem to line up horizontally on their own accord, with no need for 'float: left'.

There are a few pixels of white space between each image - how do I clear that?

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 1 year 9 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Code makes sense... but you

Code makes sense... but you didn't add the .image class to your html... that's why it isn't doing anything.

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

Hmmm

I tried setting margins/padding to zero on bodg, img, and #gallery, but still got a small white gap (about 8 pixels) between the images.

The only way I could clear the gap was to remove all the tabs and returns from the code.

This then looked like a real mess! (I want nicely laid out code, so I can easily update the site in the future).

So, I went back to Chris's proposed solution.

But I can't get it to work. The images still wrap.

Here's the code, what have I done wrong?

Untitled Document

The following link takes you to a page I created that shows the effect I want. It's done with a table. (Unfortunately, it only looks right in Firefox at the moment, because I've laid out the navigation wrong):

http://www.richardnicholson.com/test2

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think that you may also

I think that you may also have missed part of the point of Chris's example in that he was providing you with an element(scrollar) that fitted the width of the viewport and which itself supplied the horizontal scroll.

As you have floated the images you have removed the white space so nowrap has nothing to work on.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

Thanks If I remove the

Thanks

If I remove the 'float: left' from the images in the above code, then I do get the side-scrolling effect, but I also get the annoying gap between the images. 'float: left' closes the gap, but causes the images to wrap.

I had thought Chris's example might supply a scrollbar within the page, but I haven't been able to get it to work (and actually I think I'm probably happy with the regular scrollbar at the bottom of the browser window).

My current concern is to remove the gaps between the images, without deleting all the formatting (tabs/returns) from my code.

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

FWIW, I'm fairly certain

FWIW, I'm fairly certain that to achieve the look I want, I'm going to have to wrap each image in a div.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Before you try anything else

Before you try anything else try Chris's code again but without the syntax error Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

*Deep and frustrated

*Deep and frustrated sigh*

Apologies Richard in deleting my extraneous double post it seemed to remove your last entry as well.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

Oh, that's ok. I think my

Oh, that's ok.

I think my last post went something like this:

Thanks for pointing out the syntax error. I fixed it, and now Chris's code works.

Horizontal image gallery with integral scrollbar:

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

Only problem is the small white spaces between images. The only way I've found of getting rid of these is to remove all returns/tabs from my code.

Looking forward, my images need captions, and so each image/caption pair will be in a div like this:

paul smith

paul smith, designer

How easy (or difficult!) will it be to get such divs scrolling horizontally?

Thanks

Richard

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

If I put the images in divs,

If I put the images in divs, then everything get broken, and the images appear vertically down the page.

Is there a fix?

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

Here's the code. Eveything

Here's the code. Eveything is the same as in Chris's example, except each image is now partnered with a caption (an H3 heading) and wrapped in a div. I don't understand why the images now run vertically down the page. Is it because divs are block level elements? I did try setting the image divs to 'display: inline', but that had no effect.

Untitled Document

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem with a div is that

Problem with a div is that it is a block level item so will break the layout you would need to float it or display:inline it , I've played with this but it's one of those sorts of layouts that presents more problems than one thinks, however with the img gap you could close it up with negative 4px right margin.

It may help you and give you some ideas if you checked this link out:
http://www.cssplay.co.uk/menu/scroll_gallery.html

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

its because they are inline

Images are inline elements. Whitespace is collapsed between inline elements, its not removed like it is between block elements. The solution is to place comments around the white space. e.g.

<div><!--
--><img /><!--
--><img /><!--
   ...
--><img /><!--
--></div>

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

Thanks Hugo I had a look at

Thanks Hugo

I had a look at the link to CssPlay and the way that Stu Nichols lays out the thumbnails in a scrolling line.

The problem (for me!) is here:

'This version is based on my previous gallery demo but allows you to add as many thumbnails as you like. Just make the 'thumbs' div as wide as necessary to hold all the thumbnails in a single line.'

When I started this thread, I was trying to avoid the calculation of the width of the container div.

I was hoping that there was a way a div could act like a table - like a rubber band that tightly holds all the elements within it.

I've found out that if I just put images in a div then the div can be made to act like a 'rubber band'. But it's a fairly loose rubber band that doesn't hold the images tight together - there's a gap of a few pixels between each image.

If I put each image in a div (with a caption), and then put those divs in a container div, then the only way to get a tight horizontal layout is to float the divs left, AND GIVE THE CONTAINER DIV A WIDTH. This width has to be calculated (or figured out through trial and error). It does not have the 'rubber band' properties of a table.

But perhaps I've got that all wrong!

Thanks for your help. (Interesting, to use a negative margin value to bring the images flush).

Tomorrow I'll code a tables version and a div version, upload them, and post a question asking about the pros and cons of each.

Richard

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

just in case you missed it...

It looks like I x-posted while you were writing your reply above. Read my post above it. CSS isn't always the answer Wink

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

Wow! Thanks Chris. I'm

Wow!

Thanks Chris.

I'm learning a lot here.

Here's the scrolling gallery, with comments added to remove the white space:

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

Richard

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

And there you go that is

And there you go that is exactly what I couldn't remember about inline images and white space, as Chris says it's not always about CSS.

Check out the layout between IE and FF though as it's not exactly behaving the same.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

That's all very neat. It's

That's all very neat.

It's starting to look like this site, which was one of the sites that inspired me to try to create a side-scrolling portfolio:

http://mondino-update.net/index.php?page=1

(I don't understand the code.)

However, rather than the simplicity of images presented flush together, I think I want more space - image borders, margins, captions, and more borders...

And I think that probably requires a different approach...

I'll fiddle some more...

Thanks

R

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

Well, it's easy to add a 1px

Well, it's easy to add a 1px grey border and big white margins, using CSS on the img tag.

But I can't figure out how to align a caption to the bottom right of each image (using this framework - i.e. without wrapping each image/caption in a div).

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Having finally got rid of

Smile Having finally got rid of the gap you now want it back, more space, hm. You can employ borders and/or padding on the images to gain some styling imo the images would look hundred times better styled and spaced a little also consider the size of them may look great on a large monitor but on a smaller 1024 screen they tend to swamp things.

That link uses a different method in Iframes (horrible things) but maybe it's possible to do something with the object tag

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

captions ...

You should have asked for them at the start!

Essentially you will be wrapping each image and its caption together in a container. That container will be styled as an inline block. Externally its inline, internally its a block.

iirc, inline blocks aren't the most straight forward things to achieve cross browser. But you should be able to do it. I think the vertical align reference thread ( Smile ) has some information on doing that, albeit in a different context.

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

Moving Goalposts

Hugo, Chris

Sorry, you're right, I've been moving the goalposts.

I was thinking that if we started with just the images, and got those sorted out, then we could move on from there, adding captions, borders, spacing etc....

Anyway, I've just sat down with a blank sheet of paper (i.e. a new Dreamweaver document) and put together a page which shows exactly what I want. It uses a table, but all the styling is done with CSS.

The code looks efficient (to me, who knows nothing!).

I'm not sure if it would be any more concise if I used divs instead of table cells.

Here it is:

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

It would be simple enough to replace the cells with divs - but then I would have the problem mentioned at the start of this thread - that I would need to calculate the width of the container div.

Also Chris mentions potential browser compatibility problems.

I don't have access to a PC, but this table renders correctly in Safari, FF, and Opera (current versions, on a Mac). I also tried it in IE on my flatmate's 12" iBook (yes, Hugo, the images are a bit too big) - it almost works there, the only problem being that captions in the cells with class="left" are about 30 pixels too far to the left (i.e. they're not aligned to the right edge of the image).

Does it work in IE on a PC? Will swapping the cells for divs make it less browser friendly? Should I stick with this simple table?

Thanks

Richard

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Inline-block sadly is not

Inline-block sadly is not well supported.

I can get the layout pretty much working in FF along Chris's original lines but using display:table / table-cell properties and attempting to inline-block for IE but IE won't play ball it's tricky and I havn't really more time to play around with it and surely have missed something obvious, that someone else may spot.

It's a bit fudgy but you can have a look:

Scroller Gallery

/**/



Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

never say never

As always, forget presentation, structure your html to best represent your content. Then style it.

http://wiki.jalakai.co.uk/tester415.php

Hugo, shame on you for all those <br /> Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Have now got your measure

Have now got your measure young Chris mi-lad;
suggest a layout approach sit back and let everyone faf around with that approach then step back in with an 'old'! layout Haven't we seen that layout before? the photo is certainly familiar so you have been sitting on that all this while Smile

Anyway whats a few br tags between friends, it's what comes of trying to simultaneously work on layout problems whilst puzzling another out and holding an IM conversation as to needs revising on a third, my brains just too small and underpowered.

I knew you'd come up with the goods and didn't want to steal your limelight Smile but had I known we could use ul constructs well things would have been simple then!!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

Thanks guys Very

Thanks guys

Very helpful.

Hugo, your solution works in my 3 browsers (FF, Safari, Opera on a Mac).

It also answers my original question - i.e. it's tableless, and it doesn't require a div container with a specified width.

I'm currently adding some styling to see if I can get it to exactly match the table version I posted above (so far, so good).

Chris I haven't had a look at the code of your solution yet - is it better than Hugo's?!

When I've sorted the styling of Hugo's example I'll post it.

Then you can tell that it doesn't render properly on IE PC!

Cheers

Richard

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

Actually, Hugo, being a

Actually, Hugo, being a beginner I don't really understand a lot of your code (tables and cells in the CSS, and the * html bit).

As you say it doesn't work in IE, then it's possibly not worth pursuing.

(Does my table layout work in IE?)

I might try to figure out Chris's solution (using a list), but I'm not sure if I'll be able to style it to get the second, partitioning borders (the dotted borders in my example).

Richard

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes to some extent (only in

Yes to some extent (only in that it probably works across most browsers)Smile young whipper snappers layout is better, he's trying to demonstrate the use of specific markup elements that best suit the content at hand and chooses to use a ul list for this, contrary to the method he tried to impose on us to start with!

The method I tried to demonstrate was by way of highlighting the problem in getting display:inline-block working for us and following the original suggestion of Chris's !!, I could show a layout working in Modern browsers but IE was not playing along but that's not to say it couldn't given enough time to hack the code around but that is to some extent futile; Chris's example works and a ul list is a suitable vehicle for the content although the plain divs are ok as such as for br tags Smile underrated and misunderstood tag, well it was convenient at a rush.

The code in both layouts uses the display properties 'table' and 'table-cell' which essentially mimic a table and a td and which are most useful to us of course the big drawback is that MSIE decided that they wouldn't support these properties leaving us with having lovely problems trying to vertically align/centre content. The other strange selector is the 'star selector filter'
* html #selector{}
Only MSIE versions below IE7 can see these rules as it relies on a parsing bug in IE you cant actually have a element sitting above the html node as it's technically the root node ( '*' is the universal selector meaning 'any element'. Classes and ID's are correctly written as *.class or *#idselector as it signifies that the class or ID may be applied to any element you can also do such things as target all elements to remove initial margins and padding in a stylesheet *{margin:0;padding:0;} )

As for styling Chris's version it should be possible without too much trouble.

And yes your table layout does work more or less in IE but as I hinted at before the overflow is not scrolled by the element but by the body as normal.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Here's Chris's layout styled

Here's Chris's layout styled to look nice Smile

Well closer to your layout; images dimension attr reduced in size, very basis styling applied..

Works in IE6 and FF but might not work in IE7 due to use of star selector filter and display table which IE7 will not support for who knows what reason all star selector filter rules would need to be fed via conditional comments.

Scroller Gallery

/**/


Horizontally Scrolling Picture Gallery-restyled

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

you missed ...

You missed the border-left on the ul element.

border-left: 1px solid #900;

needs to become

border-left: 1px dotted #666;

Nah, Hugo, its all new code - hence the high (415) number. Old image. I thought I had done this before, but if I had I couldn't find it.

IE seems to work fine by making the LI element display:inline and putting the other elements inside it - as long as you trigger hasLayout.

Doesn't IE have issues with the dotted border style?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Chris wrote:You missed the

Chris wrote:
You missed the border-left on the ul element.

border-left: 1px solid #900;

needs to become

border-left: 1px dotted #666;

Darn it! been rushing at things all day always ends in tears.

Chris wrote:

Nah, Hugo, its all new code - hence the high (415) number. Old image. I thought I had done this before, but if I had I couldn't find it.

Smile have to admit could have sworn you did show something very similar to this, ages back; but maybe it's just the image I'm remembering, isn't that you taking up silly mid off?
Chris wrote:

IE seems to work fine by making the LI element display:inline and putting the other elements inside it - as long as you trigger hasLayout.

Seems to work fine and really a relatively simple set of rules but needs putting in conditional comments to keep IE7 happy.
Chris wrote:

Doesn't IE have issues with the dotted border style?

I thought that it was 'Dashed' that IE had a problem with and rendered as dotted, but it's the sort of trivial irritant that I can never remember until actuall comparing, so likely as not I've got it backward.

Anyways it's the method to use Richard, havn't looked in Opera though?
Edit/ yep works fine in Opera 9.00 but I'm sure Chris had checked that Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

I've played with the styling

I've played with the styling of Chris's code and I think I've managed to get a pixel-pefect match to my table - I'll post it later.

Not much time at my computer today, so I haven't fully digested all your comments, but many thanks for taking an interest and offering solutions.

I'm not sure if this will throw a spanner in the works, but I'm hoping to have dropdown menus at the top of my page (there'll be about 10 image galleries like this one, and then the usual 'about' 'info' 'contact' pages).

I've played with the 'son of suckerfish' menu at Htmldog (works well), and I'm also interested in the dropdown menu recently posted at CssPlay.

These menus are made up of Unordered Lists. Will the styling of these menus throw the styling of the images?

Or can the navigation and the image gallery simply be put in their own divs with their own styling?

Thanks

Richard

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Now it's a dropdown menu

Now it's a dropdown menu wanted :jawdrop:

As long as you keep styling seperated with classes or ID's you should have no problem running a dropdown menu on the same page.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

Hugo wrote: but maybe it's

Hugo wrote:
but maybe it's just the image I'm remembering, isn't that you taking up silly mid off?

I think I'm behind the bar Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Addendum:

Addendum:
*sigh* Of course it was and is dotted borders that IE has a problem with , rendering them as dashed.

But you knew that Smile annoying thing is I did as well but it must have been in VM and have been flushed.

But hey it's all fixed in IE7 so I does dance with joy

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

Hi, I'm back... (Several

Hi, I'm back...

(Several hundred browser preview windows had slowed my computer to a crawl.)

I've been playing with Chris's code, and adapting it so that it renders my images in exactly the same way as my css-styled table.

I've been doing lots of screen grabs, overlaying them in Photoshop to check for pixel perfect registration.

Success - using a list instead of tables can get identical visual results.

(And as I wanted, there's no need to calculate any horizontal pixel dimensions for the whole list.)

Most of Chris's code I didn't understand (e.g. 'zoom: 1'). So I set about removing it, bit-by-bit, to see if I still got what I wanted.

Some of the removed code got rid of features that I didn't need (e.g the integral scrollbar).

But some of the removed code is probably necessary to get this working in IE.

What do I need to put back?

Here are links to the two pages

With Tables:

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

And with a List, as per Chris's suggestion:

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

Both pages render well on a Mac with FF, Opera and Safari.

I'm keen to make a decision on which approach to take (tables or lists).

My main objective is to have simple code that I can easily understand, so that in the future I can update my website quickly with a simple text editor. From this point of view, both solutions, tables or lists, are similarly simple.

So then the questions is probably which of these approaches has the best cross-browser compatibilty. I don't have a PC, so I have no idea whether either of these pages work in IE.

Other factors:

Tables

Pro - If using Dreamweaver, I can get a good visual representation in Design View (helpful when deciding the order of images - drag and drop etc).

Con - Printing - if I try to print one of these side-scrolling table pages, only the first couple of images get printed. Even if I set the CSS to 'screen', the table is still there, so the images don't get printed.

Lists

Pro - It's the way it 'should' be done. Semantic? Hmm, I'm not sure. Viewing the page without styling, and seeing each image with a bullet-point attached seems kind of odd. But at least the images can be printed, if the CSS is set to 'screen'.

I'm sure there are other Pros and Cons....

Any tips on how to proceed?

Thanks

Richard

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

Re. dashes in IE. That's

Re. dashes in IE.

That's fine - I prefer dots but dashes are ok.

(I've seen sites though that create CSS-looking dotted borders with a pair of 2 pixel gifs (one for horizontal dotted borders, and the other for vertical).

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Don't remove code if you don't understand it

Richard you have removed code integral to this layout working in IE where Chris used zoom:1 was to induce haslayout in IE. Zoom is a proprietary property to IE which has the effect of setting hasLayout=true but it also is not a valid CSS property and as such is generally used for testing purposes, it will need to replaced with one of the other hasLayout inducing properties(there are references to setting hasLayout throughout this thread) it would have been best not to use zoom in this instance if I get a chance or if Cris pops in we can endeavour to provide a valid alternative; but as i also mentioned earlier most of the rules required for IE to work will need to fed through MS Conditional Comments so that IE7 will perform as expected as well.

As for which layout style to use that speaks for itself does it not, we don't deal in tables unless they are for tabulated data or if there is simply no other means of achieving things, which is seldom if ever the case. So the ul list is the best approach , we've shown that it works and you have tested in a few browsers, go with it!

You now state that the overflow was not required on the scroller div it would have been nice to know that at the start, the impression being laboured under(at least by myself) was that it was required. Things like that can make a difference to how simple/achievable things may be.

Go carefully with pixel perfection this is web design pixel, perfection is folly and inappropriate, great if you can achieve it but one of those irritating things graphic designers insist on thus demonstrating ignorance of the medium they are working in.

Please please don't mention Dreamweaver and most definitely not working in design view Smile it will not get a good response from anyone who hand codes and prides themselves in their work, it's inherently flawed.

Printing is another matter completely and I wouldn't expect the layout to print. You will need to read up on using print styles to completely re-style the layout for printing and you will probably need to let the images run top to bottom, but you will probably have to be prepared to spend a bit of time getting this layout to print well.

Web is not really about printing, printing is a convenience you will never get things absolutely as you would like, if you're that worried about bullet points then lists is not the way to proceed neither would tables be so you are probably back to getting the layout to work with plain vanilla divs as my per first layout coupled with rules from Chris's list example.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

Hugo, thanks for the

Hugo, thanks for the feedback and explanations, and sorry for not being clear that I don't want the integral scrollbar.

If I understand you right, then the code I've got should work in the forthcoming IE7, but needs hacks to get it working in IE5 and IE6. And it will then need conditionals so that those hacks are ignored by IE7.

(I'm also going to need to do something about IE 5.2 Mac. I know, it's a dinosaur, but I still get visitors using it. But as long as they can see some pictures, that's fine.)

Re. Dreamweaver. I'm using it, but only the demo version, and mostly in code view. I'm not planning on buying it, as I'm hoping that by the end of this learning process I won't need it. Now that I'm starting to play with other elements (e.g. dropdown menus), I'm realising that nothing will get rendered correctly in DW's design view.

Re. Printing. Yes, I was jumping the gun. And I don't think many people print from photo websites. That said, I find it intriguing that with CSS you can create both a layout for screen and a layout for print. I'm hoping that, once I've got the CSS for screen sorted out, I might be able to create some 'print' CSS that would allow for each of my galleries (between 10 and 20 images) to be printed as small thumbnails on a single sheet of A4 paper. The alternative, increasingly common on photographers' websites, is to have a separate section with dowloadable, printable, pdf files - but that sounds like a lot of work.

Anyway... I hope you or Chris (or someone) might be kind enough to scrub up my code to get it working in IE...

Thanks

Richard

(Not sure of the protocol here, but it might be useful if I paste the code from the above links in the following comment. I'll try to keep the links active, but I'm a bit disorganised with FTP etc)

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

The code

Here's the code from the last two links I posted. I haven't tested either in IE. It sounds like the Table version works (sort of?), and that the list version doesn't (as it needs some hacks).

Both versions work very nicely in FF, Safari and Opera on the Mac. The code of each version should look similar - just replacing 'table' and 'td' tags with 'ul' and 'li' tags. I had to make a few changes to the styling. For example, in the table version I gave each cell a top padding of 30 px. I tried this in the list version, giving each list element a top padding of 30px. This worked fine in FF and Opera, but not in Safari, where it dropped the bottom dotted line down by another 30px. Instead I added a top margin of 30 px to the images, and then it looked the same in my three browsers.

I guess it's obvious, but the different classes (applied to cells or lists) exist so that I can make subtle sections of images (using different margins and dotted lines) within each scrolling gallery. Here I'm mimicking a portfolio book (i.e. first page, lots of double pages, last page). But in other galleries I might want to present a set of 5 images together, then a set of 3, a single, a double etc....

Code for the table version:

Untitled Document


paul smith

paul smith

james bidwell
james bidwell

tamara mellon
tamara mellon

yorgo tloupas
yorgo tloupas

roksanda and phil
roksanda and phil

carla and michaela
carla and michaela

labour and wait
'labour and wait'

weardowney
'weardowney'

Code for the list version:

xhtml1-strict template

body {
margin: 0;
padding: 0;
font: small Helvetica, Arial, sans-serif;
color: #666666;
background: #FFFFFF;
}
.scroller {
white-space: nowrap;
list-style: none;
margin: 0px;
padding: 0px;
position: absolute;
top: 80px;
border-top: 1px dotted #CCCCCC;
border-bottom: 1px dotted #CCCCCC;
}
.scroller li {
display: table-cell;
height: 568px;
}
.first {
padding-right: 40px;
padding-left: 40px;
border-right: 1px dotted #CCCCCC;
}
.left {
padding-right: 6px;
padding-left: 40px;
}
.right {
padding-right: 40px;
padding-left: 6px;
border-right: 1px dotted #CCCCCC;
}
.last {
padding-right: 40px;
padding-left: 40px;
}
img {

border: 1px solid #CCCCCC;
margin-top: 30px;
}
h5 {
font-size: 90%;
text-align: right;
font-weight: normal;
margin: 3px 0px 0px;
padding: 0px;
}

  • paul smith
    paul smith
  • james bidwell
    james bidwell
  • tamara mellon
    tamara mellon
  • yorgo tloupas
    yorgo tloupas
  • roksanda and phil
    roksanda and phil
  • carla and michaela
    carla and michaela
  • labour and wait
    'labour and wait'
  • weardowney
    'weardowney'

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

Only one change for IE/Win

You only need one change for IE/Win 6-.


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

Zoom is required here, it is the only way to trigger hasLayout. In compliant mode, IE will ignore height and width on an inline element. display:inline-block doesn't do the trick and the other possibilities aren't appropriate.

PS. The validator doesn't see inside IE conditional comments ensuring that the CSS still validates. However, conditional comments must be placed in the HTML, they can, however, be used to load an IE version specific style sheet.

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

try something like this for printing ...

@media print {

.scroller {
white-space: normal;
position: static;
}

.scroller li {
height: auto;
float: left;
}

.scroller li img {
width: 6cm;
height: auto;
}
}

Firefox doesn't want to play for some reason - it seems to ignore the @media print styles altogether. IE/Win and Opera/Win make enough of an effort to suggest that with some tweaking you'll get something decent.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

ah good point unusual that

ah good point Smile unusual that zoom happens to be the only method in this instance of setting hasLayout.

With the .scroller li does IE7 not need that hasLayout trigger? if it does a generic call to [IF IE] rather that [IF lte IE 6] might be more appropriate.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

Chris, many thanks.... I've

Chris, many thanks....

I've added the hack to the code.

But have I put it in the right place?

It's here:

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

Also thanks for showing me how styling for print might work. I've played around with it and it works well in Safari and FF. Lots of potential for printing each gallery as a nicely laid-out A4-sheet of thumbnails.

Richard

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

hack position

Yes, that's fine for the hack.

Since this now seems to have become a personal thread for the three of us, you may have to go to site checks to ask what it looks like in IE7beta.

Out of interest are your originals from film or digital?

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

The final spanner.... If I

The final spanner....

If I wanted to have a block of text at the beginning and/or end of each gallery how difficult would that be?

I tried adding a div with some text as a list element, but first I had problems formatting the text and then I had trouble keeping the text box in line with the images. (I also wondered whether it made semantic sense to have an introduction as a list element.)

Here's what I'm trying to achieve in table format (works in FF/Safari/Opera Mac):

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

Perhaps the list model breaks down with this level of complexity? And maybe it makes more sense to go back to putting each element (intro text, image/caption pair) in a div, floated left, inside a container div, with a specified width?

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

Film - medium format (645)

Film - medium format (645) colour negative (Kodak Portra 400VC). Until recently printed conventionally in a colour darkroom, but now scanned on an Imacon scanner and processed in Photoshop. Nothing against digital though!

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

text panels

Leaving semantics out of it for now, it isn't difficult.

You'll need to use vertical-align:top to ensure the starting position of the text is at the top of the box and then size the container for the text as the same size as the images.

I forgot to mention in my above post for printing, that I moved the image dimensions off the img tag and into CSS - that way CSS could change the dimensions for printing.

So the styles will be something like this ... http://wiki.jalakai.co.uk/tester415a

From a semantic point of view it probaby should be

  • container
    • major heading
    • para text
  • list (unordered or ordered) of image panels
    • img
    • minor heading or para text with image title, if a heading, it should come before the image and then be shifted after it
  • container
    • minor heading
    • unordered list
      • credit

This is why its best to decide the content of the page, construct the html, then style it. Then you only have to solve each problem once. Probably just like staging your portraits. You can't decide afterwards to add another item into the picture (or at least you probably shouldn't) not without having to start the whole process again. Not unlike styling a web page Wink

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