- This topic is empty.
July 4, 2015 at 4:16 pm #204582
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.July 4, 2015 at 11:16 pm #204586
You don’t have the non-prefixed version of
border-radiuslisted (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;July 4, 2015 at 11:34 pm #204587
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
#wrapID…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
.detaildiv 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.
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.July 5, 2015 at 6:01 am #204590
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.July 5, 2015 at 6:09 am #204591
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:absoluteit 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.July 5, 2015 at 6:32 am #204594
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”?July 5, 2015 at 10:39 am #204599
inline-blockare 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
marginto 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:autoto 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.
- The forum ‘CSS’ is closed to new topics and replies.