Axim Posts - Answer Overflow

Axim

•Created by Axim on 7/16/2024 in #front-end

set parent radius same value as child circle radius

So I wanted to make some kind of button that have an image(circle) inside it and some text next to it, I wanted the size to be dependent on the circle image and the parent radius has to match the circle image radius so it will fit perfeclty, here's my attempt: https://jsbin.com/cewodeyiso/1/edit?html,css,output The problem here is that the border-radius is calculated on a hard coded value of the circle width, I wanted it to work no matter what the auto width of the circle is. Any insight on how to do it?

6 replies

KPCKevin Powell - Community

•Created by Axim on 5/23/2024 in #front-end

linear-gradient border

Im trying to apply a linear-gradient border to an element, so I just have a div and the ::before element with position absolute but the problem is the ::before wont go behind the div even with z-index:-1; Here's a quick jsbin to see what Im talking about : https://jsbin.com/cujusodumi/edit?html,css,output

5 replies

KPCKevin Powell - Community

•Created by Axim on 5/13/2024 in #front-end

mousedown event set on parent but keeps getting child element

Basically the title, when having the mousedown event on a parent I only want the target to be the parent wherever I click on the parent but Im getting the child as the target when clicking even though there's no event set on the child. Here's a jsbin to illustrate it: https://jsbin.com/bopoboqire/edit?html,css,js,output If anyone can help me understand why it's behaving like that pls

4 replies

KPCKevin Powell - Community

•Created by Axim on 10/26/2023 in #front-end

(Css Spec) Clarification on containing block definition

Guys I have a little question about containing block, By definition containing block is the nearest ancestor that is a block container(containing only block-level or inline-level boxes) or which establishes a formatting context but here in this code :

<DIV id="div1">
    <P id="p1">This is text in the first paragraph...</P>
    <P id="p2">This is text
      <EM id="em1"> in the 
        <STRONG id="strong1">second</STRONG>
      paragraph.</EM>
    </P>
</DIV>

<DIV id="div1">
    <P id="p1">This is text in the first paragraph...</P>
    <P id="p2">This is text
      <EM id="em1"> in the 
        <STRONG id="strong1">second</STRONG>
      paragraph.</EM>
    </P>
</DIV>

The spec says that the containing block for strong element is the second paragraph(id=p2), but if we follow the definition shouldnt the 'em' element be the containing block since it contains only inline-level elements therefore being the nearest block container? Anyone can enlighten me on this 🧐

30 replies

Gaming

Programming