Kevin Powell - Community•3mo ago

relative div and button

<!DOCTYPE html> <html lang="en"> <head> <style> .dd1{ position: relative; height: 400px; width: 500px; background-color: aqua; display: inline-block; } </style> </head> <body> <div class="dd1"> </div> <button>gg</button> </body> </html> if the dd1 has a letter in it like <div> d </div> then it all will be ok why this happens and how to fix it for good not like put a p element with opacity 0

28 Replies

R.I.POP•3mo ago

lol i found sth better if u add overflow: hidden; then even putting a letter or p element wont fix it

Jochem•3mo ago

what is the problem exactly? it looks like it's working as intended to me

R.I.POP•3mo ago

so if the

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .dd1{
            position: relative;
            height: 400px;
            width: 500px;
            background-color: aqua;
            display: inline-block;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="dd1">
g
    </div>
    <button>gg</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .dd1{
            position: relative;
            height: 400px;
            width: 500px;
            background-color: aqua;
            display: inline-block;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="dd1">
g
    </div>
    <button>gg</button>
</body>
</html>

thenn the button stays down see the picture i uploaded? it is like that for me

Jochem•3mo ago

is that not what you want?

R.I.POP•3mo ago

I want the button to be up

Jochem•3mo ago

up where? at the top line of the div?

R.I.POP•3mo ago

why would i want it? top of the line next to the div

Jochem•3mo ago

I don't know, you just shared code that produces the thing in the image, you never said what you wanted it to do

R.I.POP•3mo ago

i want this 🥲

Tok124 (CSS Nerd)•3mo ago

You can do this. I wouldnt recommend using inline-block

BadBoy_YT•3mo ago

i think that its due to the vertical-align

R.I.POP•3mo ago

thanks man it worked tnx a ton

Jochem•3mo ago

I'd recommend using a wrapper rather than setting flex on the body though:

<div class="wrap">
  <div class="dd1"></div>
  <button>gg</button>
</div>

<div class="wrap">
  <div class="dd1"></div>
  <button>gg</button>
</div>

.dd1 {
  height: 400px;
  width: 500px;
  background-color: aqua;
}
.wrap {
  display: flex;
  align-items: start;
}

.dd1 {
  height: 400px;
  width: 500px;
  background-color: aqua;
}
.wrap {
  display: flex;
  align-items: start;
}

R.I.POP•3mo ago

🥲 tnx ok but still question remains why it is like this ? why it throws things down

Jochem•3mo ago

because when you set it to display inline-block, the div starts to behave like a letter. The bottom of the "letter" is set on the baseline of the line it's on, so the line o and t and m sit on. Letters like p or q or g go a little below that line.

BadBoy_YT•3mo ago

jochem,can we able to fix that without using the display:flex or grid i mean with the vertical align thing

Jochem•3mo ago

Maybe, but why would you want to?

BadBoy_YT•3mo ago

just for curiosity

Jochem•3mo ago

I think the best answer is "you shouldn't"

BadBoy_YT•3mo ago

okay

R.I.POP•3mo ago

emmmm can i bother u more? how can i get a animation css like this

        .dd2::before{
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-image:
            repeating-conic-gradient(
            from var(--deg),
            purple  0deg 25deg,
            rgba(0,0,0,0)  25deg 90deg);
            z-index: -4;
            animation: dd2before 5s infinite linear none;
            
        }
        @keyframes dd2before{
        from{
            --deg: 360deg;
        }
        to{
            --deg: 0deg;
        }
        }
@property --deg{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
    }

        .dd2::before{
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-image:
            repeating-conic-gradient(
            from var(--deg),
            purple  0deg 25deg,
            rgba(0,0,0,0)  25deg 90deg);
            z-index: -4;
            animation: dd2before 5s infinite linear none;
            
        }
        @keyframes dd2before{
        from{
            --deg: 360deg;
        }
        to{
            --deg: 0deg;
        }
        }
@property --deg{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
    }

which lets me to rotate stuff in the background without rotating the box I got 2 issues here first is about going

            background:linear-gradient(blue,red,purple);

            background:linear-gradient(blue,red,purple);

how can i animate it like conic gradient above? 2nd is how can i animate this

background:
radial-gradient(
                at 8.827085852478838% 8.963641188959661%,
                 #ff006f 0px, transparent 50%) ,
            radial-gradient(
                at 14.026602176541717% 80.08890658174099%,
                 #9818dc 0px, transparent 50%) ,
            radial-gradient(
                at 79.68561064087062% 81.15047770700637%,
                 #eb02d7 0px, transparent 50%),
            radial-gradient(
                at 93.47037484885126% 15.333067940552016%,
                 #ff0000 0px, transparent 50%),
            radial-gradient(
                at 51.26964933494559% 48.029458598726116%,
                 #162cd4 ,red 50px, transparent 50%
                ) #000000;

background:
radial-gradient(
                at 8.827085852478838% 8.963641188959661%,
                 #ff006f 0px, transparent 50%) ,
            radial-gradient(
                at 14.026602176541717% 80.08890658174099%,
                 #9818dc 0px, transparent 50%) ,
            radial-gradient(
                at 79.68561064087062% 81.15047770700637%,
                 #eb02d7 0px, transparent 50%),
            radial-gradient(
                at 93.47037484885126% 15.333067940552016%,
                 #ff0000 0px, transparent 50%),
            radial-gradient(
                at 51.26964933494559% 48.029458598726116%,
                 #162cd4 ,red 50px, transparent 50%
                ) #000000;

again i want to rotate the background not the box with the -25% inset i would appreciate if u could say it

Jochem•3mo ago

I'd recommend making a new post, I can't look at the moment and the intention of the help section is one question per post

R.I.POP•3mo ago

ok np and thanks a ton for help

BadBoy_YT•3mo ago

jochem sorry to interput you could you see this inline prblm https://codepen.io/GOPI-CHAND-SADINENI/pen/xxvgVYq

Jochem•3mo ago

@BadBoy_YT make your own post, don't hijack others

BadBoy_YT•3mo ago

i am kind of not hijacking ,this is related to this initial question

R.I.POP•3mo ago

just make a new one with full question + u can even add more if u got questions

BadBoy_YT•3mo ago

just did that ,thnks

Gaming

Programming

relative div and button