Figure size different than image size

[tyson.jewell]

Hey guys,

I started teaching myself CSS. This is literally my third day messing around. So I’m setting up this profile gallery thing where I have a div container, inside it is a smaller div holding a picture, caption, and short paragraph. There’s 3 per line across the site and two rows. I have that working fine.

I was having trouble centering the picture’s caption and something/some place online that I found suggested using figure and figcaption. I did that but now the picture won’t center in the container because the figure is what’s getting centered and it’s a different size than the image.

Image size: 175x175px
Figure size according to inspect element: 155x193px

Is there a way around this, am I just boned because of using figure?

Also, the image is obviously a placeholder. I eventually intend to take pictures of the employees and put them in there. If I just size the image to the size of the figure, will it fix all the issues?

Codepen: http://codepen.io/anon/pen/xGggdJ

[tyson.jewell]

Holy crapballs that looks AMAZING.

I’m not going to outright steal your code but I’m definitely going to look into reworking mine.

And I’m not surprised about the structure, honestly, like I said, I’m new. Selectors and elements, IDs, there’s a lot to try to remember. I find myself looking things up a lot.

The other part of it is that I’m editing someone else’s page. I kept to their exact structure because I wasn’t sure how CSS is with mixing different methods.

I joined up with this company and they haven’t updated their site in like 5 or 6 years. I’m just the IT guy but I ran out of PCs and equipment to fix/service so they asked what I knew about web-design. I told them nothing but I can learn and they told me to go to town.

Is the “<!– avatar / image –>” part of the code just a comment? Just trying to figure out why it’s grey and how the HTML refers to it.

And finally, what does

*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Do?

Thank you so so so much. Everything else in your code is super clear, and oh my GOD it’s so clean. Mine’s a disaster comparatively, haha.

[tomhanson1985]

on your current pen, you can set margin 0; on the figure as its getting quite a lot as standard, then you can text-align: center also the figure tag and it will center the image inside it. Problem before was image was flowing outside figure tag, and a solution to that could be having max-width: 100%; on the image.

Just thought I would add that so you can get an idea for how yours could be fixed as well.

I also just noticed you were targeting div.figure which would be targeting this:

div class=”figure”

whereas you needed to target as div figure to get the figure tag inside a div tag

attached an updated pen for you. hopefully that helps your understanding a bit too.

http://www.codepen.io/anon/pen/jPyBOY

[tyson.jewell]

I love W3Schools! Their try it out editor is the only reason I’m as far along as I am.

I’m definitely hooked on this. I’m having a lot of fun learning so far. Usually with this kind of stuff I get frustrated really easily. I gave up on java, and python; it’s nice to finally understand a language in even a basic level of understanding.

Also it’s crazy to be able to save the CSS refresh the site and see huge, magical changes appear.

Again, thank you for your help.

And you too, tomhanson1985, seeing that was like a true lightbulb moment of “Oooooooh, THAT’s what was making it freak out!” I didn’t even think that it was inheriting (not the right use of inherit, I know) margin from somewhere else. Seeing both of you guys’ pens is really helping me understand my own code.

[tyson.jewell]

So I just had to come back here and say thanks to your code I learned about box-sizing. Not for this, but for another area of the site I was killing myself doing math working out the exact pixel widths and adding/subtracting borders and whatnot. I love CSS so far

[Author]

Posts