Can anyone help me? My div is being connected to another div, even though they are seperate. It is causing me a lot of trouble consider i need to move one part of my text/icons, but since they seem to be 'linked', anything i do to one div applies to the other
Hoffman Foundation Scholarship!
Empowering 2,000 African Youth with World-Class Education! this program provides grants of $600–$1,500
Help
By Mbaha Nangula in 14 Aug 2024 | 21:32
14 Aug 2024 | 21:32
2
Likes
I would say to do a class element, for one of them.
14 Aug 2024 | 21:35
0
Likes
Reply to
Guyo Jerotich
I would say to do a class element They both have a class
14 Aug 2024 | 21:37
0
Likes
Reply to
Mbaha Nangula
They both have a class
14 Aug 2024 | 21:45
0
Likes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlastSMP | Shop</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><script src="https://kit.fontawesome.com/79fea7e1c6.js" crossorigin="anonymous"></script>
</head>
<body style>
<div class="userHeading">
<a href="/login.html" type="_self">
<div class="login">
<i class="fa-solid fa-user"></i>
<div class="login-text-container">
<h2 class="login-text">LOGIN</h2>
<p class="login-button">Click to login</p>
</div>
</div>
</a>
<a href="/(nextpage)" target="_blank">
<div class="login-icon">
</div>
<div class="cart">
<div class="cart-text-container">
<h2 class="cart-text">CART</h2>
<p class="cart-button">Click to view</p>
</div>
<i class="fa-solid fa-cart-shopping"></i>
</div>
</a>
</div>
<div class="header">
<div class="play">
<div id="copy" style="cursor: pointer;" class="play-card">
<script>
document.getElementById('copy').addEventListener('click', function() {
const textArea = document.createElement('textarea');
textArea.value = 'blastsmp.net';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
alert("You have successfully copied the server's IP.");
});
</script>
<div class="play-icon">
<i class="fa-solid fa-play"></i>
</div>
<div class="play-text">
<h2 class="play-main">Play</h2>
<p class="play-secondary">Click here to copy the IP!</p>
</div>
</div>
</div>
<div class="logo">
</div>
<div class="discord">
</div>
14 Aug 2024 | 21:47
1
Likes
body {
background-image: url("https://i.postimg.cc/YCB3GfwB/Volcano-Blur.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.userHeading {
background-color: #540502;
width: 100%;
height: 50px;
position: absolute;
}
@font-face {
font-family: 'daikon-black';
src: url('/daikon-black.ttf') format('truetype'),
}
.userHeading {
font-family: 'daikon-black', sans-serif;
display: flex;
font-size: 12px;
color: white;
text-align: left;
vertical-align: middle;
justify-content: space-evenly;
align-content: center;
line-height: 15px;
}
a {
text-decoration: none;
}
/* LOGIN */
.login {
display: flex;
align-items: center;
width: 200px;
margin: auto;
margin-top: 10px;
}
.fa-user {
font-size: 27px;
color: white;
margin-right: 10px;
margin-bottom: 5px;
}
.login-text-container {
flex-direction: column;
}
.login-text {
font-size: 20px;
color: white;
}
.login-button {
color: #ffc400;
font-size: 12px;
}
/* CART */
.cart {
display: flex;
text-align: right;
align-items: center;
width: 200px;
margin: auto;
margin-top: 10px;
}
.fa-cart-shopping {
font-size: 27px;
color: white;
margin-left: 10px;
margin-bottom: 5px;
}
.cart-text {
font-size: 20px;
color: white;
}
.cart-button {
color: #ffc400;
font-size: 12px;
}
.login-menu {
background-color: #8a1410;
border-radius: 25px;
width: 500px;
height: 200px;
font-family: 'daikon-black';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: -2px 2px 11px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -2px 2px 11px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -2px 2px 11px 2px rgba(0, 0, 0, 0.3);
}
.bottom-text {
background-color: #8a141000;
border-radius: 25px;
width: 500px;
height: 1px;
top: 40%;
width: 100%;
padding: 10px;
text-align: center;
position: relative;
bottom: 0;
}
.return {
color: #ffe388c4;
text-align: center;
font-size: 11px;
letter-spacing: 2px;
font-weight: bold;
}
.login-guide {
text-align: center;
color: white;
font-size: 17px;
margin-bottom: 50px;
}
.login-line1 {
opacity: 35%;
width: 400px;
text-align: center;
align-content: center;
margin: auto;
}
.userForm {
background-color: #3b0300;
border-radius: 10px;
width: 350px;
height: 50px;
border: 1px solid #ffc40081;
border-radius: 10px;
}
.header {
gap: 60px;
color: white;
}
.play {
color: white;
}
.play-card {
gap: 300px;
align-items: center;
margin-left: 15%;
}
.play-icon {
background-color: #db3920;
width: 50px;
height: 50px;
justify-content: center;
align-items: center;
font-size: 27px;
border-radius: 20px;
}
14 Aug 2024 | 21:47
1
Likes
14 Aug 2024 | 21:49
0
Likes
which 2 divs are you talking about? it may happen if you try to move 1 div the space between them remains the same, so the 2nd element might move accordingly
14 Aug 2024 | 21:57
0
Likes
14 Aug 2024 | 22:00
0
Likes
14 Aug 2024 | 22:18
0
Likes
Login to reply
Please login to reply to this topic