[Solved] Anchor and image inside of div

[mateod747]

This is the example I just made. I’m new in HTML and CSS and I’m learning already 3-4 days. http://codepen.io/mateod747/pen/eNMYOR

My question is: I applied border-radius to my anchor link but it doesn’t work in firefox and I don’t know why. Also if someone can tell if all of these effects I made in CSS can be made easier and shorter and how, thank you.

[Paulie_D]

You don’t have the non-prefixed version of border-radius listed (and it should come after the prefixed versions).

FF (and most up-to-date browsers) no longer require the prefix and so ignore the prefixed ones.

  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius:50px;

http://codepen.io/Paulie-D/pen/OVvPEQ

[Paulie_D]

As for tidying that’s really a matter of choice.

Firstly, many consider it good practice not to use IDs quite so liberally.

They are fine if you know you won’t be re-using the ID again on the same page (say your but more often than not you will find it more flexible to use a class instead.

Case in point…your #wrap ID…if you wanted to have another wrap you’d need another ID, make it a class and it’s re-usable.

On the positioning side, where you are trying to position many things over an element, it makes sense to wrap those items up into a single container and position that.

Below I added a single .detail div and centered that which means I could eliminate the positioning from the link and div inside it. Also, my version will always center over the image regardless of the size of the image.

http://codepen.io/Paulie-D/pen/mJxyjM?editors=110

For a couple of days you’ve done great…there’s a ton more to learn but it seems to me you’re on the right track.

Keep building, trying things out, seeing what works and doesn’t…and if it doesn’t we’re here to help.

[mateod747]

Yes, I get it now. I thought that if I put -moz- inside of it every firefox version will recognize it, but that’s obviously not correct. The only part that I didn’t understand in your edit of mine pen is that you added transform:translate(-50%,-50%); in .detail class. What does that do? Thank you btw for your help.

[Paulie_D]

The only part that I didn’t understand in your edit of mine pen is that you added transform:translate(-50%,-50%); in .detail class. What does that do?

What it does is center the div based on it’s own width.

When you set top:50; left:50% on an object with position:absolute it puts the top-left corner of the div bang in the center of the div…which is not what is wanted.

The transform moves the element left (x) and up(y) by 50% of it’s own dimensions…regardless of the width / height of the element.

[mateod747]

Ok, I get it now, thanks. One more thing(I know that I’m starting to be annoying, sorry).

If I put display: block; instead of display: inline-block; why is anchor not centered inside of div with class=”detail”?

[Paulie_D]

Items with inline-block are treated (sort of) as though they are text…so you can center them with text-align:center. It’s a little more complex than that but that’s essentially it.

Block level items are just that, big honking blocks that ignore small instructions like text-align…they have their own requirements and need to be put in their place by using margin to move them around but their default alignment is left (generally).

Also, if you don’t set a width on block level item it’s default is to be 100% width of it’s parent.

If you give it a width, it sits right where it is (left) until you give it some margin.

Now it so happens that if you set margin:auto to a block item it works out the amount of space it needs, splits it down the middle and applies it automagically to left and right…boom…centered.

I recommend this site LearnLayout.com as well as some of Chris’ videos right here on CSS-Tricks.

[Author]

Posts