I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process.
Here is an example of what I want:
…and when I add new content:
I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand.
I see you tried setting the display of .item to table-cell. the problem is then you couldn’t get the .items to drop down. You would need another element to do this… to serve as a display:table or table-row. So you opted to float .table. The thing is float AUTOMATICALLY makes gives your element display:block. so back to square one.
You can use the example above to achieve what you want , if you intend on legacy IE support, add a conditional statement with .item {display:inline; zoom:1} also, as IE lt8 doesnt support :after you will need to add an empty tag after your img… could be something like this:
<div> <img> <b></b></div>
you may want to give .wrapper overflow:hidden; if you want it’s background to contain your floats…
As i said, the :after pseudo element is NOT supported by IE <8.
But what .item:after does is generates an INLINE child element , as the last element directly inside .item.
We then give this a display:inline-block; this is so we can set the pseudo element height attribute. Which we set to 100% the parent and we set vertical-aling middle so that elements will line up to the middle of this value. and that’s the trick!
.item b {} in not ncecessar, but as since IE doesnt support :after… you could achieve the same thing by rewriting your HTML <div class=“item”> <img> <b></b></div>, see?
And I’m assuming that the “.item img {…}” means that those properties only apply to images within the “item” div?
Exactly. I try not to lad up my HTML with classes an IDs when I can avoid it. since we know you want ALL images within each item so center, you can avoid having to give each IMG tag a class by writing .item img.
I hope that shed some light on the subject for you…
what you want to do is
close. What you do is this:
<!--[if lt IE 8]>
.item b {display:inline; zoom:1}
<![endif]-->[\\CODE]
dont forget to add the B tag, and remove the :after rule, if you intend legacy IE support
Yes, but what I meant, exactly, was that IE cant do :after rules. I also notice you have some other code there, which I assume if for the benefit of the slide show. I do have to ask why <c>??? I am going to assume that was a recursive typo.
conditional comments CANT go within the CSS or within the <style> tag. the code above creates an ADDITION style tag ONLY for IE <8 in which we add a rule to take care of IE’s idiosyncrasies.
I changed .item b to .item i because I saw your light show already involves a b tag and I didnt want to cause any confusion with its CSS.
3)<c> doesn’t exist in HTML. replaced it with the <i> so we could do this effect.
Explanations: :after creates a pseudo (fake) element as the last child of the container. with a lil styling we can give that fake element the height of its parent. Since that element follows an “inline” flow , we can use vertical-align ( v-a only works for inline and table-cells… and sin we already figured we couldn’t do display:table-cell because you were using float… that leaves display:inline/inline-block);
I know it seems convoluted at first since this explanation requires an understanding of a few more basic concepts, but if you follow the steps like a cook book, you should be able to see how it’s done, in not why.
Thank you for the detailed response, that’s just what I needed to know. I’ll try it out and get back to you.
But for now, about the <c> tags instead of <b>, I already use <b> for bold in my image descriptions, so when I assigned “.item b” a big line height, it messed up the spacing in the description. But I can easily switch it to “i”.
I assume it’s mostly arbitrary?
Yes, it is. I used <b> and later <i> as the extra inline tag that would have been generated by the :after pseudo class. You could even use a span with a class… like <span class=“shiv”> and then have the CSS rule read : .item .shiv. Obviously that would have been a lot more characters to achieve the same thing. In your original code I didnt see that you had the image in an anchor, or that there was a title to it that the jQuery would use.
yes, if done wright you will bi compatible with AT LEAST the big 4… which is like 99+% of browsers in use today. You have to watch those details tho, coding is an EXACT science.
