CSS masters please...
- Started 9 years ago
- Last post 3 years ago
- 27 Responses
- dbloc0
I need to create a circle div the same heigh as the parent div with a matching width. The parent div will expand with text, not browser size.
Is this possible with CSS?
- use some simple JSBabySnakes
- ffs, no do not use js to render 'simple' graphics in CSS.Nairn
- it's not simple. I ended up having to use JS. If you have a straight CSS way, I'd love to see it.dbloc
- ETM0
A circle is easy -- border-radius: 50%;
Set the width of the child element the same as the parent and the height of the child to 100%. Not sure about how the text fits in exactly. Do you have a mockup?- I think i did this before with padding, which should resize with the text but i could be wrong_niko
- mekk1
parent div
position: relative;div with matching width/height:
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;I assume you want the circle to be a circle, not an egg when it expands with text. You will need to hack your way into keeping an aspect ratio of the parent div, which is described here: https://stackoverflow.com/questi…
- ooh, that's neat - from your StackOverflow link: "width: 20vw; height: 20vw;" maintains aspect ratio.Nairn
- Remember vw is based on viewport, which you said you didn't want********
- *they********
- ^ yes, 100x100 px would also maintain aspect ratio, but it is not relative to the parent width. If you want your square to be responsive, you have to hack itmekk
- dbloc0
This was my solution.
https://codepen.io/krsbrown/pen/…- jQuery just for this? No no********
- better solution?dbloc
- jQuery is already being loaded for other stuff if you're saying it should be vanilla JS.dbloc
- Maybe. Question: You don't need the circle to have text within it?********
- It's just a graphic? I'd use a tiny SVG and let it scale up.********
- The circle will actually have an image rotation in itdbloc
- Ah, ok. Have you considered CSS Masks?********
- But really a bit of JS ain't gonna hurt********
- yeah I think this worked out best. Thanks!dbloc
- jQuery just for this? No no
- ********0
I've been practising some simple css product page, however I can't get the radio buttons selected when clicked (or change color) in the slider. The rest is all to my liking - I've been spending too much time on it but I'm pretty sure it's not as difficult. Anyone care to help please?
- Just for CSS, you will need to change your <label></label> into either a <button> or <a> to make the :after or :focus to work.Sellies
- https://developer.mo…Sellies
- I will look into it, thank you!********
- Sorry mate. I see what you're doing now. You're missing something thats activating the labels to change.
Cross check your code with thisSellies - https://stackoverflo…Sellies
- That's great! Thank you so much!********
- Spent two days, now done in 20 mins - cheers!********
- Hahah no worries. Great job by the way :DSellies
- Just keeping busy I guess - thank you kind sir!********
- trooperbill0
is there a library of responsive navigations ?
- Codepen is pretty great for resources.********
- yeah start here.
https://codepen.io/s…dbloc
- Codepen is pretty great for resources.