I have a Web page here that i am developing to further my knowledge in html/css/javascript and my buttons in my header don’t seem to be working, the button:hover doesn’t trigger at all and they don’t redirect you to where there supposed to. Heres the code which I hop isn’t to long and hard, but i put them in a comment tag which i hope will make it easier i have made it as easy as i can.
They are near the middle. Any help will be appreciated:
<html>
<head><style>
html, body {
height:100%;
}
body {
overflow-y:hidden;
overflow-x:hidden;
}
header{
width: 98.907%;
background: #000097;
position: fixed;
top: 0;
height: 62px !important;
opacity:.8;
border-style: Outset;
border-color: blue;
}
.content {
position:relative;
height: 100%;
width:600px; /* Sizing - any length */
padding:60px 0 30px 0; /* Header height and footer height */
margin:0 auto 0 auto; /* Center content */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1, .sidebar2 {
background: #000047;
top: -80px;
bottom:-80px;
width: 10px;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.search{
background-repeat: no-repeat;
background-color: #141414;
height: 28px;
width: 180px;
font-size: 18px;
color: #fbff00;
border: 2px solid #fbff00;
vertical-align:middle;
padding: 2px 4px 0px 4px;
margin: 0;
}
.sidebar1 {
left: -342px;
}
.sidebar2 {
right: -239px;
}
#scrollable2 {
background:green;
height: 99%;
min-width: 1273px;
margin-left: -332px;
margin-right: 100px;
/*position: absolute;*/
top: 60px;
overflow:auto;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.button {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
width: 1272px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #b23e35;
}.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color:#ce0100;
}.button:active {
position:relative;
top:1px;
}
.button1 {
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
box-shadow:inset 0px 1px 0px 0px #caefab;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
background-color:#77d42a;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #268a16;
display:inline-block;
white-space:nowrap;
color:#306108;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #aade7c;
}.button1:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
background-color:#5cb811;
}.button1:active {
position:relative;
top:1px;
}
footer {
width: 100%;
background: #000047;
position: fixed;
bottom: 0;
height: 30px;
}
.p {
text-align: center;
color: #bcbcbc;
font-size: x-large;
white-space:nowrap;
}
</style>
<script>
</script>
<title>Davids LAN Website</title>
</head>
<body>
<header>
<table width="100%">
<tr>
<td> </td></tr>
<tr>
<!-----
The Problem is here or mabye in the styling but for some reason my skin viewer page and chat page don't work, the hover style and the link opening
<td><a href="plugins.html"><button class="button1">Plugins</button></a></td>
<td><a href="upload.php"><button class="button1">Upload</button></a></td>
<td><p class="p">Davids LAN Site</p></td>
<td><a href="skinviewer.html"><button class="button1">Skin Viewer</button></a></td>
<td><a href="chat.php"><button class="button1">Chat</button></a></td>
----->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</header>
<!-- Fixed size after header-->
<div class="content">
<div class="sidebar1">
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width-->
<!-- Scrollable div with main content -->
<div id="scrollable2">
<a href="http://dl.bukkit.org/downloads/craftbukkit/get/01479_1.3.2-R3.0/craftbukkit.jar" target="_blank">
<button class="button"><img src="https://twimg0-a.akamaihd.net/profile_images/1205959797/bukkit_normal.png"/> Download Craftbukkit</button></a>
<p class="p">How to set up Bukkit Server</p>
<center><video width="800" controls="controls">
<source src="movies/bukkit.mp4" type="video/mp4">
<source src="movies/bukkit.ogg" type="video/ogg">
Your browser does not support the video tag.
</video><video width="800" controls="controls">
<source src="movies/regular.mp4" type="video/mp4">
<source src="movies/regular.ogg" type="video/ogg">
Your browser does not support the video tag.
</video></center>
<a href="http://www.youtube.com/watch?v=VJD6E8J5Ioc&feature=plcp" target="_blank">
<button class="button">If you have Firefox please click here to view the youtube videos
</button>
</a>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
</div>
<!-- Always at the end of the page -->
<footer>
</footer>
</body>
</html>
Try