Search code examples
htmlcssw3.css

Labels for buttons redirect to link meant for only the button


I am trying to make this website where you can download some code I made, but I'm not really so good in HTML and CSS. So sorry if I did something very noticeable.

Anyways, this is my code:

<!DOCTYPE html>
<html>
    <head>
        <title>Downloads</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link rel="stylesheet" href="css.css"> 
    </head>

<body>
    <div class="w3-bar darktheme">
        <a href="/" class="w3-bar-item w3-button w3-mobile"><img src="img/logo.png" alt="CodeDownloads"></a>
        <a href="windows.html" class="w3-bar-item w3-button w3-mobile">My Main Projects</a>
        <a href="linux.html" class="w3-bar-item w3-button w3-mobile">Other</a>
        <a href="software.html" class="w3-bar-item w3-button w3-mobile">Compiled</a>
        <a href="about.html" class="w3-bar-item w3-button w3-mobile">About</a>
    </div>
    <br>
    <label class=white>Title 1</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
   <br>
   <br>
    <label class=white>Title 2</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
   <br>
   <br>
    <label class=white>Title 3</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
   <br>
   <br>
    <label class=white>Title 4</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
   <br>
   <br>
    <label class=white>Title 5</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
   <br>
   <br>
    <label class=white>Title 6</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
   <br>
   <br>
    <label class=white>Title 7</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
   <br>
   <br>
    <label class=white>Title 8</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
   <br>
   <br>
    <label class=white>Title 9</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
   <br>
   <br>
    <label class=white>Title 10</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
   <br>
   <br>
    <label class=white>Title 11</label>
    <a href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">
   <button class=button>Download</button>
</a>
</body>
</html>

The labels (like for example, <label class=white>Title 10</label>) redirect as well. I don't want that at all. I just want it to be normal text. If I try using the paragraph tag, it shows above the button, which might make it confusing for some people.

Thanks


Solution

  • Your structure must be like this:

      <label class="white">Title 11</label>
      <a class="button" href="https://drive.google.com/file/d/1GO9wvJV7oJViSou8yVCaSsNqWAsf7FxM/view?usp=sharing">Download</a>
    

    You must close the 'a' tag and remember that the classes must be in quotes