Okay, so I'm going to fix up my websites this week and make them look nice but since I'm pretty much a noob at CSS I'd like to ask for help in fixing some stupid things going on with my positioning and stuff like that.
I grabbed the code for some nice pure CSS buttons off one of those button maker website and got the idea of how to make the things fairly quickly, but when I tried to make more than one it just reverts to html link and defaults it's position to the left, I'd be grateful if you could take a look and tell me why it's doing this.
<html>
<head>
<style>
.button1 {
display: inline-block;
color:black;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-color: black;
text-shadow: 0 1px 1px rgba(0,0,0);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
position:relative;
top:20px;
left:1005px;
}
.button1:hover {
color:black;
text-decoration: none;
position:relative:
top:20px;
left:1005px;
}
.button1:active {
color:black;
position:relative;
top:20px;
left:1005px;
}
.store {
color:black;
border: solid 1px #C0C0C0;
background: #F8F8F8;
background: -webkit-gradient(linear, left top, left bottom, from(F8F8F8), to(#C0C0C0));
background: -moz-linear-gradient(top, #F8F8F8, #C0C0C0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#C0C0C0');
position:relative:
top:20px;
left:1005px;
}
.store:hover {
color:black;
background: #F8F8F8;
background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#C0C0C0));
background: -moz-linear-gradient(top, #F8F8F8, #C0C0C0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#C0C0C0');
position:relative:
top:20px;
left:1005px;
}
.store:active {
color:black;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#C0C0C0));
background: -moz-linear-gradient(top, #F8F8F8, #C0C0C0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#C0C0C0');
position:relative:
top:20px;
left:1005px;
.homebutton {
display: inline-block;
color:black;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-color: black;
text-shadow: 0 1px 1px rgba(0,0,0);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
position:relative;
top:20px;
left:950px;
}
.homebutton:hover {
color:black;
text-decoration: none;
position:relative:
top:20px;
left:950px;
}
.homebutton:active {
color:black;
position:relative;
top:20px;
left:950px;
}
.home {
color:black;
border: solid 1px #C0C0C0;
background: #F8F8F8;
background: -webkit-gradient(linear, left top, left bottom, from(F8F8F8), to(#C0C0C0));
background: -moz-linear-gradient(top, #F8F8F8, #C0C0C0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#C0C0C0');
position:relative:
top:20px;
left:950px;
}
.home:hover {
color:black;
background: #F8F8F8;
background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#C0C0C0));
background: -moz-linear-gradient(top, #F8F8F8, #C0C0C0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#C0C0C0');
position:relative:
top:20px;
left:950px;
}
.home:active {
color:black;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#C0C0C0));
background: -moz-linear-gradient(top, #F8F8F8, #C0C0C0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#C0C0C0');
position:relative:
top:20px;
left:950px;
</style>
<body link="#000000" alink="#000000" vlink="#000000">
<Body BGColor="#FFFFFF" Text="#000000"
<div id="content">
<center> <h1> Silver Boar Jewellery </h1> </center>
<p1> <a href="
http://www.silverboarjewellery.com/silverboarstore/" class="store button1">Store</a> </p1>
<p2> <a href="
http://www.silverboarjewellery.com" class="homebutton home">Home</a> </p2>
</head>
</html>
I suspect I'm missing something really obvious because I'm not used to this kind of code at all, is there a typo or some kind of missing bit somewhere? That's usually what the culprit is, Let me know! One I get the hang of buttons on the Jewellery website I'll fix up the manga one and make it all nicer too.