I am new to web development and have recently started creating my first webpage using HTML and CSS. I'm still learning and don't have a strong understanding yet.
One issue I'm facing is with centering elements on the page. I have tried using the CSS property text-align: center;, but it doesn't seem to be working as expected.
Another challenge I encountered is trying to expand the clickable area of a link to cover the entire button. I attempted to set the width: 100%; property, but it didn't yield the desired results.
Below is an excerpt of my code:
li.hMenu {
display: inline;
background: red;
width: 33.33%; /*for older browsers fallback */
width: calc(100% / 3);
float: left;
}
li.hMenu:hover{
background-color: darkred;
}
li.hMenu:active{
position: relative;
left: 1px;
top: 1px;
background-color: darkred;
}
#menu {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CommonLayout.css" />
<script src="ProjectPage.js"></script>
</head>
<body>
<ul id="menu">
<li style="z-index: 10" class="hMenu">
<a href="ProjectPage.html">Main Page</a>
</li>
<li style="z-index: 9" class="hMenu">
<a href="About.html">About</a>
</li>
<li style="z-index: 8" class="hMenu">
<a href="Calculator.html">Calculator</a>
</li>
</ul>
<p>This is <em>Main Page</em> page.</p>
</body>
</html>