Yet another Newbie Gallery Question

[crandles]

Hi. I've set up a gallery of posters and signs that are used regularly in the hospital where I work. I have pngs of each PDF document and when you click on the image, the PDF opens.

No problem there. What I can't seem to figure out is how to have a "gallery" followed by some text followed by another "gallery."

For example:

Introduction to precautions signs yada yada yada
Various png of precautions signs
Space
Introduction to hand hygiene posters
Various png of hand hygiene posters

Currently, when I write text after the gallery, the text runs right up next to the last image. I've tried putting each gallery in a DIV but that either a) appears to have no effect or b) places about 3 inches of blank space at the top of the page (can't figure that one out).

Any suggestions? Any examples of similar sounding pages that I could investigate?

Many thanks.

[AlexW]

Hi crandles,

Is there anyway you could take a screen capture of the current layout for us to see, or even put the working code somewhere where we can see it. The whole 'picture = thousands words' things . Probably be able to give you an answer in seconds then.

However, my best guess at what you're trying to achieve is:

Sounds like you're on the right track with the wrapping DIVs, but the DIVs will naturally stretch with to contain the text by default. If you give the DIV a set width -- somewhere around the width of the gallery pic -- the text should wrap at that width.

Then if you want the DIVs to line up horizontally, you need to float the DIV to the left (most commonly). For instance, if your DIV had a class='gallery', you might have:

div.gallery {
 width:200px; 
 float:left;
 }

[crandles]

Floats! I always forget Floats! I guess deep down I still don't fully understand them.

Anyway, thanks. Your suggestion did the trick.

Charles

[AlexW]

They can be a bit tricky. Just remember they run full width by default, but collapse around their content when you float them either way .

[Stomme poes]

Floats, unlike static divs, should shrink-wrap, instead of expanding to 100% width... however, on a page I did, I once noticed that a widthless float with just some J Random Text in it (no block elements) was different between IE and modern browsers.

IE tried not to wrap the text, and so the length of the sentence set the width of the float. In the modern browsers, they tried to wrap the text almost as soon as possible, based on the width of the longest unbroken word. Setting a width made sure everyone acted the same.

[crandles]

Thanks for the suggestions--they work great in both of my html editors. However, once the page in question is uploaded to the web site it looks as bad or worse than it did before.

The html for one image is:

<div class="img">
		<a target="_blank" href="#">
		<img src="images/#.png" alt="Contact Precautions" width="110" height="134" /></a>
	<div class="desc">#</div>	
	</div>

Here's the CSS

div.gallery
	{width: 100%;
	border: 2px solid #gggggg;
	float: left;
	}	
div.img
{
  margin: 2px;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}

[Stomme poes]

Where is "patient education sheets" supposed to be? Or are one of your three images the way you want it?

When using floats, you'll need to realise what they do when they wrap.

They'll wrap like text, except if the floats on the line above are differing heights, you'll get snagging (instead of getting all the way to the far left side like normal, the next float who makes a newline can snag on a float from the row above who's hanging down lower). One way to stop this is to set a min-height on all floats that's at least as high as the tallest float.

When playing with floats, it's usually a good idea to add an ugly background colour to them for testing, so you can see them and see what they're doing!

Another problem you'll run into is, sometimes IE won't let a float in the same direction clear a float.

The target="blank" is kinda evil, what's it there for?

Code-wise, I'd make things a bit simpler (though I add height and width on images so the browser doesn't need to do a second pass through rendering):

HTML:

<div id="gallery">
<p>
<a href="foo"><img src="blah" width="something" height="something" alt="contact precautions">
<span>textitty text text text</span>
</p>
</div>

#gallery {
doesnt' need to be floated himself... just set a width here, you can force wrapping where you want of floats based on the width!
}
#gallery p {
float these suckers;
give a width;
whatever margins;
don't need to set height, but if you want, a min-height may help against snagging (except in IE6 of course);
text-align: center;
}

#galler p.clear {
clear: both; (put this class on a p who must start a newline)
}
#gallery a {
whatever styles for the anchor;
}
#gallery img {
whatever styles for image;
}
#gallery p span {
anything special for the text?;
}


Now actually you could also have each chunk of type of warning pdf in its own gallery... that will cross-browser make sure each new chunk is its own line:

<div class="gallery">
<p>one pdf link</p>
<p>another pdf link</p>
<p>etc...</p>
</div>
<div class="gallery">
<p>patient stuff</p>
<p>more patient stuff</p>
<p>etc...</p>
</div>

etc

change #gallery to .gallery in the css. Because Gallery is a div which is a static block, it always starts a newline.

This way you wouldn't have to worry about one of the p's needing the "clear" class with clear: both, in case IE for example didn't want to work right. You'll always have the next section starting a newline.

[crandles]

Thanks. I'll work on this. My main problem is that in the editor, everything looks like it should (even when I use my editor's browser simulations) but when it is actually hosted on-line and seen with IE or FF, it goes all wonky.

Why would it be perfect in the editor and bad on line (regardless of browser)?

In the meantime though, I'll use your suggestions and try re-working it a bit.

[Stomme poes]

Why would it be perfect in the editor and bad on line (regardless of browser)?

Because your editor isn't using any rendering engine used by a real browser.

People using Dreamweaver have this problem a lot (the newest DW uses I think it was Presto engine which is the one Opera uses). Looking in your editor is pretty much useless... it won't tell you how a browser shows a page, it won't tell you that you coded correctly (your editor should have its own rendering engine and every rendering engine has its bugs and quirks... basically you're writing to your editor's rendering engine's quirks... think of all the ambiguous stuff in the specs; each browser vendor was allowed to make their own choices over those things).

That's why even professionals who use something like DW (Paul O'B uses it for whatever reason) use it as a text editor, and not as a browser.

I have either vim or gedit open (my text editor, pure text) and a bunch of browsers open. I make a change in the code, I hit F5 for each open browser to see the change. That's the safer way to code.

Snagging is something that can certainly differ between browsers because each engine may round up or down when calculating heights and widths etc and where some engines round up another rounds down etc.
Plus there's the actual browser bugs (like IE's clearing bugs).

Stop looking at the editor and start relying purely on the browsers and the validator. It will work out in the end! : )