Wie kann ich meine Schaltflächenpositionen auf meiner HTML-, CSS-, JS- und PHP-Website korrigieren? ⇐ HTML

[Anonymous]

Ich habe eine Website, auf der ich einige Bilder und Schaltflächen habe. Das Problem besteht darin, dass sich die Position der Schaltflächen bei verschiedenen Auflösungen ändert, wenn ich sie perfekt ausgerichtet habe. Für mich sieht es gut aus, aber für jemanden, der einen Laptop verwendet, sieht es schrecklich aus. Das Gleiche gilt, wenn man es für die mobile Auflösung versucht (alles geht einfach durcheinander).Gute Platzierung
Schlechte PlatzierungNoch schlechtere Platzierung auf Mobilgeräten
HTML HIER

Code: Select all

Grzegorz





Grzesiu






We are sorry.  This site is currently unavailable on mobile.

SUPPORT[/b][b]            ABOUT[/b][b]


LEARN MORE[/b]




document.addEventListener('DOMContentLoaded', function() {

// Array of background elements
var backgroundElements = [
'bg_png', 'bg_png3', 'bg_png4',
];

// Function to set background styles
function setBackgroundStyles(elementId, imageUrl, zIndex) {
var bgElement = document.getElementById(elementId);
bgElement.style.position = 'absolute';
bgElement.style.top = '0';
bgElement.style.left = '0';
bgElement.style.width = '100%';
bgElement.style.height = '100%';

bgElement.style.backgroundImage = 'url("' + imageUrl + '")';
bgElement.style.backgroundSize = 'cover';
bgElement.style.backgroundPosition = 'center top';
bgElement.style.zIndex = zIndex;
}

// Hide the GIF after a delay (e.g., 3 seconds)
setTimeout(function() {
setBackgroundStyles('bg_png1', 'https://i.imgur.com/IlmUjKY.png', '-15');
setBackgroundStyles('bg_png3', 'https://i.imgur.com/NsTp7fS.png', '-15');
setBackgroundStyles('bg_png4', 'https://i.imgur.com/5ymR224.png', '-16'); // Lower z-index for bg_png4
// Repeat for the remaining elements

}, 3000); // Adjust the delay as needed
});

CSS HIER

Code: Select all

/* Resetting default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#gifContainer {
display: none;
z-index: 2;
}

body, html {
height: 100%;
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: normal;
}
button{
font-family: inherit;
font-weight: inherit;
font-style: inherit;
}
/* General background layer styles */
.background-layer {
position: absolute;
width: 100%;
height: 100%;
}

.mobile-message {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.8);
color: white;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
display: none;  /* initially hidden */
}

@media (max-width: 768px) {
.mobile-message {
display: flex;
}

.background-layer, #content {
display: none;
}
}
#bg_png {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #282828;
z-index: -17;
}
/* Content layer styles */
#content {
position: relative;
z-index: 1;
}

/* Styling the navbar and buttons */
#navbar {

position: absolute;
top: 20px;
right: 20px;
}
#learnmore {
position: absolute;
top: 690px;
right: 430px;
}

.nav-button {
/* Text Styles */
margin-right: 22px;
color: #ff4e00;
font-size: 20px;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 25px;
position: relative;
overflow: hidden;

/* Dark Purple Background */
background: #FFFFFF;

/* Shadow Effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Transition for Hover Effect */
transition: background 1s ease;
cursor: pointer;
top: -3px;
width: 150px;
height: 45px;
}

.nav-button:hover {
/* Hover Effect: Lighter Background */
background: #282828;

/* Hover Effect: Lift Button */
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.nav-button2 {
/* Text Styles */
margin-right: 50px;
right: 3px;
color: #ff4e00;
font-size: 20px;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 25px;
position: relative;
overflow: hidden;

/* Dark Purple Background */
background: #FFFFFF;

/* Shadow Effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Transition for Hover Effect */
transition: background 1s ease;
cursor: pointer;
top: -3px;
width: 150px;
height: 45px;
}

.nav-button2:hover {
/* Hover Effect: Lighter Background */
background: #282828;

/* Hover Effect: Lift Button */
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.nav-button3 {
/* Text Styles */
margin-right: 50px;
right: 32px;
color: #FFFFFF;
font-size: 20px;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 25px;
position: relative;
overflow: hidden;

/* Dark Purple Background */
background: #ff4e00;

/* Shadow Effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Transition for Hover Effect */
transition: background 1s ease;
cursor: pointer;
top: -3px;
width: 150px;
height: 45px;
}

.nav-button3:hover {
/* Hover Effect: Lighter Background */
background: #282828;

/* Hover Effect: Lift Button */
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.nav-button4 {
/* Text Styles */
right: 32px;
top: 620px;
color: #ff4e00;
font-size: 20px;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 25px;
position: relative;
overflow: hidden;

/* Dark Purple Background */
background: #FFFFFF;

/* Shadow Effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Transition for Hover Effect */
transition: background 1s ease;
cursor: pointer;
top: -3px;
width: 175px;
height: 45px;
}

.nav-button4:hover {
/* Hover Effect: Lighter Background */
background: #282828;

/* Hover Effect: Lift Button */
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
/* Responsive design for smaller screens */
@media (max-width: 768px) {
.dropdown-content {
width: 80%; /* On smaller screens, the dropdown takes a larger percentage of the width */
}
}

Ich habe verschiedene Positionen ausprobiert, also absolut, relativ, und @media hinzugefügt, um das Problem für verschiedene Auflösungen zu beheben, aber bei mir hat nichts funktioniert. Ich hoffe, ihr werdet mir dabei helfen, es zu erreichen.