HTML Box mit Auswahlen und Link

Hallo Community

Ich habe von HTML keine Ahnung, deshalb stelle ich hier die Frage.

Ich möchte ein Feld erstellen, welche drei weiteren Felder (Boxen) enthält.
Das Erste Feld soll quasi als Rahmen über die drei unteren Fehler dienen.

Firma A
Firma B
Firma C

Diese Felder Firma A, B und C sollen sich farblich unterscheiden. Sobald man auf das farbige Feld klickt, soll ein externer Link aufgerufen werden.

Wie löse ich das?

Im Voraus vielen Dank für Eure Hilfe

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 6558977471

Url: https://administrator.de/contentid/6558977471

Ausgedruckt am: 21.11.2024 um 19:11 Uhr

1 Kommentar

Moin.

Ich habe von HTML keine Ahnung, deshalb stelle ich hier die Frage.

Kann man aber jederzeit erst mal lernen. Manch einer soll das ja machen bevor er fragt 🤔 🍌
https://wiki.selfhtml.org/

Beispiel, so wie ich den schwierig verständlichen Text interpretieren konnte
https://jsbin.com/supogadaca/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width">  
  <title>Demo</title>
  <style>
     .red {background-color:red;}
     .green {background-color:green;}
     .blue {background-color:blue;color:white}
  </style>
</head>
<body>
<fieldset>
    <legend>My boxes</legend>
    <button class="red" onclick="location.href = 'https://google.de';">Google</button><br/>  
    <button class="green" onclick="location.href = 'https://administrator.de';">Administrator.de</button><br/>  
    <button class="blue" onclick="location.href = 'https://ebay.de';">ebay.de</button>  
</fieldset>
</body>
</html>

Oder wenn du damit ne Combobox meintest
https://jsbin.com/hadasucico/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width">  
  <title>Demo</title>
  <style>
     .red {background-color:red;}
     .green {background-color:green;}
     .blue {background-color:blue;color:white}
  </style>
  <script>
  function openlink(el){
    location.href = el.options[el.selectedIndex].value;
  }
  </script>
</head>
<body>
<fieldset>
    <legend>My companies</legend>
    <select onchange="openlink(this);">  
        <option class="red" value="https://google.de">google.de</option>  
        <option class="green" value="https://administrator.de">administrator.de</option>  
        <option class="blue" value="https://ebay.de">ebay.de</option>  
    </select>
</fieldset>
</body>
</html>

Cheers briggs