Problemer med justering av knapper på en nettside

simen · 16. november 2023

Jeg har laget en nettside der du sitter i et studiorom, og ser på tre monitorer. disse tre monitorene skal fungere som knapper. når du hovrer musen over en monitor, vil den lyse opp. hvis du klikker på en monitor vil du bli sendt til en annen side.

Jeg klarer å plassere knappene ganske nøyaktig i posisjonen jeg vil ha dem i forhold til bakgrunnsbildet, men knappene vil ikke være i samme posisjon som bakgrunnsbildet hvis jeg bruker en annen pc, eller endrer på størrelsen til nettleseren.

Hvordan kan jeg få knappene til å alltid være på samme posisjon I FORHOLD TIL bakgrunnsbildet?

her ser du hvordan bildet skal være uansett størrelsen på nettleseren, og hvordan knappene blir når jeg endrer på størrelsen til nettleseren eller bytter til en annen pc:

Phantom Software · 16. november 2023

Har du spurt en av de som driver med webutvikling? Ellers får du spørre chatgpt:

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}

.background-container {
position: relative;
width: 100%;
height: 100%;
background-image: url('path-to-your-full-screen-background.jpg');
background-size: cover;
background-position: center;
}

.button {
position: absolute;
background-size: cover;
background-repeat: no-repeat;
/* Adjust width and height based on your button images */
}

.button1 {
background-image: url('path-to-button1-image.jpg');
top: 20%; /* Adjust these values */
left: 10%; /* Adjust these values */
width: 15%; /* Adjust these values */
height: 25%; /* Adjust these values */
}

.button2 {
background-image: url('path-to-button2-image.jpg');
top: 20%; /* Adjust these values */
left: 40%; /* Adjust these values */
width: 15%; /* Adjust these values */
height: 25%; /* Adjust these values */
}

.button3 {
background-image: url('path-to-button3-image.jpg');
top: 20%; /* Adjust these values */
left: 70%; /* Adjust these values */
width: 15%; /* Adjust these values */
height: 25%; /* Adjust these values */
}
</style>
</head>
<body>
<div class="background-container">
<div class="button button1"></div>
<div class="button button2"></div>
<div class="button button3"></div>
</div>
</body>
</html>

Jeg ville også unngå å bruke begrepet utvikling to ganger.

simen · 16. november 2023

Phantom Software skrev (7 timer siden):

Har du spurt en av de som driver med webutvikling? Ellers får du spørre chatgpt:

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}

.background-container {
position: relative;
width: 100%;
height: 100%;
background-image: url('path-to-your-full-screen-background.jpg');
background-size: cover;
background-position: center;
}

.button {
position: absolute;
background-size: cover;
background-repeat: no-repeat;
/* Adjust width and height based on your button images */
}

.button1 {
background-image: url('path-to-button1-image.jpg');
top: 20%; /* Adjust these values */
left: 10%; /* Adjust these values */
width: 15%; /* Adjust these values */
height: 25%; /* Adjust these values */
}

.button2 {
background-image: url('path-to-button2-image.jpg');
top: 20%; /* Adjust these values */
left: 40%; /* Adjust these values */
width: 15%; /* Adjust these values */
height: 25%; /* Adjust these values */
}

.button3 {
background-image: url('path-to-button3-image.jpg');
top: 20%; /* Adjust these values */
left: 70%; /* Adjust these values */
width: 15%; /* Adjust these values */
height: 25%; /* Adjust these values */
}
</style>
</head>
<body>
<div class="background-container">
<div class="button button1"></div>
<div class="button button2"></div>
<div class="button button3"></div>
</div>
</body>
</html>

Jeg ville også unngå å bruke begrepet utvikling to ganger.

jeg har prøvd lignende kode men det fungerer ikke. jeg har også brukt mye tid på å spørre chatgpt, men det hjelper heller ikke.

Dan-Levi · 6. desember 2023

Hei,

Demo på CodePen: https://codepen.io/Dan-Levi/pen/abXPRBq

HTML-filen jeg har laget for deg nedenfor viser et eksempel på tre "knapper" definert som div-elementer med bilder som bakgrunn av skjermer, definert i CSS, med absolutt posisjonering. Jeg har kommentert alt sammen så du kan henge med, men det er laget slik at når du hovrer så gløder skjermene, og når du klikker på en av disse skjermene åpnes en ny fane i nettleseren som besøker nettstedet angitt av URL-en som er tilknyttet den spesifikke skjermen.

Dette oppnås ved å bruke JavaScript (se nederst i kodene) til å lytte etter museklikk-hendelsen på disse elementene og deretter åpne den tilknyttede nettsiden i en ny fane.

Hjemmeleksen din er å bytte ut bildene, kanskje få det til slik at de ikke kan være mer enn så så langt fra hverandre (tenk om du strekker nettleservinduet over 2 skjermer), dette kan ordnes med en overordnet div element som har en maks antall piksler i bredden, f.eks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Definerer tegnsett og visningsinnstillinger for siden -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mouse Down event example</title>

    <!-- Stiler for å designe utseendet til HTML-elementer -->
    <style>
      /* Generelle stiler for alle HTML-elementer */
      html {
        box-sizing: border-box;
        font-size: 16px;
      }

      /* Nullstiller marginer og padding for alle elementer */
      *,
      *:before,
      *:after {
        box-sizing: inherit;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      /* Stiler for hele nettsidens kropp */
      body {
        display: flex;
        justify-content: space-between;
        width: 100vw;
        height: 100vh;
        /* Bakgrunnsbilde for nettsiden */
        background-image: url("https://simen-neverdal.no/background.jpg");
        background-size: cover;
        background-position: center center;
      }

      /* Stiler for knapper */
      .button {
        cursor: pointer;
        margin: 0 40px 0 40px;
        width: 33%;
        max-width: 800px;
        margin-bottom: 170px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom center;
        transition: all 0.2s ease-in-out;
        filter: saturate(0); /* Endrer fargeintensiteten */
      }

      /* Hover-effekt for knapper */
      .button:hover {
        filter: saturate(1) drop-shadow(0 0 2rem rgba(110, 2, 5)); /* Hover-effekt med fargeendring og skygge */
      }

      /* Spesifikke stiler for hver knapp */
      .button1 {
        left: 10%; /* Plasserer knapp 1 10% fra venstre */
        background-image: url("https://simen-neverdal.no/gaming_monitor.png");
      }

      .button2 {
        background-image: url("https://simen-neverdal.no/gaming_monitor.png");
      }

      .button3 {
        right: 10%; /* Plasserer knapp 3 10% fra høyre */
        background-image: url("https://simen-neverdal.no/gaming_monitor.png");
      }

      /* Stiler for bordet nederst på siden */
      .table {
        position: absolute;
        width: 100%;
        height: 50vh;
        min-height: 135px;
        max-height: 270px;
        bottom: 0;
        background-position: bottom center;
        background-repeat: repeat-x;
        /* Bakgrunnsbilde for bordet */
        background-image: url("https://simen-neverdal.no/table.png");
      }
    </style>
  </head>

  <body>
    <!-- Lager et bord og knapper på nettsiden -->
    <div class="table"></div>
    <div class="button button1" data-url="https://www.diskusjon.no"></div>
    <div class="button button2" data-url="https://www.nrk.no"></div>
    <div class="button button3" data-url="https://www.tek.no"></div>

    <script>
      // Henter alle knappene med klassenavnet "button"
      let buttons = document.querySelectorAll(".button");

      // Sjekker om knapper finnes på siden
      if (buttons.length > 0) {
        // Går gjennom hver knapp og legger til en hendelseslytter for "mousedown" (når museknappen trykkes)
        buttons.forEach((button) => {
          button.addEventListener("mousedown", () => {
            // Henter URL fra "data-url" attributtet til den aktuelle knappen
            const url = button.dataset.url;

            // Åpner en ny fane med den hentede URL-en hvis den finnes
            if (url) {
              window.open(url, "_blank");
            }
          });
        });
      }
    </script>
  </body>
</html>

Kopier alt sammen inn i en html fil og åpne den i nettleseren din, burde bare funke

Endret 6. desember 2023 av Dan-Levi

Logg inn

Problemer med justering av knapper på en nettside

Anbefalte innlegg

simen

Lenke til kommentar

Videoannonse

Phantom Software

Lenke til kommentar

simen

Lenke til kommentar

Dan-Levi

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer