在HTML / CSS中链接图像的问题

Question

I'm making my first website using HTML/CSS and I've run into a small problem making the header. At the top of my website, I have 5 names of different parts of the website. I wanted to make it so you could click in the general area of each name to go to that page and used images to achieve that by using relative positioning to make them overlap the text and changing the opacity.

Weirdly one of the names in my header is slightly crooked so I used transform: rotate() in the h1 tag to fix it but now the image (which is in a completely different tag) doesn't work as a link anymore. All the other images work as links as long as I don't rotate the text.

Here is the code:

<header>

<img style="margin: -8px 0px 0px -10px" width="1520px" height="60px" 
src="Banner.jpg" alt="Banner">

<a href="index.html"><img style="position:relative; bottom: 65px; left: 
645px; opacity:0" width="195px" height="60px" src="Box.jpg" alt="Home"/></a>

<a href="GrowingUp.html"><img style="position:relative; bottom: 65px; right: 
145px; opacity:0" width="130px" height="60px" src="Box.jpg" alt="Growing 
Up"/></a>

<a href="Friendship.html"><img style="position:relative; bottom: 65px; 
right: -20px; opacity:0" width="130px" height="60px" src="Box.jpg" 
alt="Friendship"/></a>

<a href="Hobbies.html"><img style="position:relative; bottom: 65px; left: 
525px; opacity:0" width="105px" height="60px" src="Box.jpg" alt="Hobbies"/> 

<a href="Challenges.html"><img style="position:relative; bottom: 65px; left: 
695px; opacity:0" width="130px" height="60px" src="Box.jpg" 
alt="Challenges"/></a>


<h1 style="font-size:40px; margin: -120px 0px 0px 645px">Ryan's Life</h1>
<h1 style="font-size:24px; margin: -30px 0px 0px 55px">Growing Up</h1>
<h1 style="font-size:26px; margin: -28px 0px 0px 360px">Friendship</h1>
<h1 style="font-size:28px; margin: -29px 0px 0px 995px">Hobbies</h1>
<h1 style="font-size:28px; margin: -33px 0px 0px 1270px; transform: 
rotate(-0.5deg)">Challenges</h1>

</header>

Answer 1

Using transform: rotate(); to correct a crooked text in HTML isn't the way to go, if your using a custom font that only you have, then it's only crooked for you.

If you want to overlay text, over images and have it in the fashion of a menu, a list is the way to go:

 li { background-repeat:no-repeat; list-style-type: none; } li a { font-size:28px; } li.one, li.two { margin-right: 10px; } /* If the have the same background */ li.one, li.two, li.three { background-image: url("https://via.placeholder.com/130x60"); float: left; height: 30px; min-width:130px; } /* If the have different backgrounds */ /* li.one, li.two, li.three { float: left; height: 30px; min-width:130px; } li.one { background-image: url("https://via.placeholder.com/130x60"); } li.two { background-image: url("https://via.placeholder.com/130x60"); } li.three { background-image: url("https://via.placeholder.com/130x60"); } */ ul:after { content: ""; display: block; clear: both; } 

 <ul> <li class="one"><a href="#">One</a></li> <li class="two"><a href="#">Two</a></li> <li class="three"><a href="#">Three</a></li> </ul> 

You have more control separating the html and css, plus more options.