by Guest » 11 Jan 2025, 07:12
Im Div habe ich dieses Statistik-/Benutzernamen-Feld, das nahe am Bild liegen sollte, aber das Bild sollte etwas entfernt sein, um einen schönen Effekt zu erzielen. Nun, das Problem ist, dass ich die relative Position verwendet habe, und ich glaube, das ist nicht der Fall Das bringt alles durcheinander. Ich weiß nicht, wie ich das anders beheben und dafür sorgen kann, dass es reaktionsfähig bleibt.
css:
Code: Select all
.top-container {
display: flex;
justify-content: space-around;
padding: 15px;
}
.u1 {
display: flex;
align-items: center;
position: relative;
margin: 50px;
}
.u2 {
width: 70px;
height: 70px;
border-radius: 50%;
position: relative;
top: 70px;
right: 50px;
z-index: 1;
}
.u3 {
background: rgba(90, 211, 238, 0.166);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px 50px;
justify-content: center;
}
.u4 {
background: rgba(90, 211, 238, 0.166);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px 50px;
display: flex;
justify-content: right;
}
.u5 {
width: 100px;
height: 100px;
position: relative;
top: 70px;
right: 50px;
z-index: 1;
}
html
Code: Select all
[img]https://cdn.discordapp.com/avatars/870413726711435297/81a888d3981c992aee63d3c99531285e.webp?size=1024[/img]
/>
yumbo1z
[img]https://cdn.discordapp.com/attachments/1134291282873810975/1327335746646052904/IMG_2820.png?ex=6782b13e&is=67815fbe&hm=7f48431c52523089dff49abed5ccb94955c049f770c4568aab9ee89d7964792c&[/img]
/>
9,100
[img]https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&[/img]
/>
9,100
[img]https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&[/img]
/>
9,100
```
Im Div habe ich dieses Statistik-/Benutzernamen-Feld, das nahe am Bild liegen sollte, aber das Bild sollte etwas entfernt sein, um einen schönen Effekt zu erzielen. Nun, das Problem ist, dass ich die relative Position verwendet habe, und ich glaube, das ist nicht der Fall Das bringt alles durcheinander. Ich weiß nicht, wie ich das anders beheben und dafür sorgen kann, dass es reaktionsfähig bleibt.
[img]https://i.sstatic.net/oTi8sGA4.png[/img]
css:
[code].top-container {
display: flex;
justify-content: space-around;
padding: 15px;
}
.u1 {
display: flex;
align-items: center;
position: relative;
margin: 50px;
}
.u2 {
width: 70px;
height: 70px;
border-radius: 50%;
position: relative;
top: 70px;
right: 50px;
z-index: 1;
}
.u3 {
background: rgba(90, 211, 238, 0.166);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px 50px;
justify-content: center;
}
.u4 {
background: rgba(90, 211, 238, 0.166);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px 50px;
display: flex;
justify-content: right;
}
.u5 {
width: 100px;
height: 100px;
position: relative;
top: 70px;
right: 50px;
z-index: 1;
}
[/code]
html
[code]
[img]https://cdn.discordapp.com/avatars/870413726711435297/81a888d3981c992aee63d3c99531285e.webp?size=1024[/img]
/>
yumbo1z
[img]https://cdn.discordapp.com/attachments/1134291282873810975/1327335746646052904/IMG_2820.png?ex=6782b13e&is=67815fbe&hm=7f48431c52523089dff49abed5ccb94955c049f770c4568aab9ee89d7964792c&[/img]
/>
9,100
[img]https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&[/img]
/>
9,100
[img]https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&[/img]
/>
9,100
```
[/code]
Mobile version