Print Page - CSS help?

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.

Quote

<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.

Bitcoin Forum

Other => Off-topic => Topic started by: Lethn on March 03, 2014, 07:23:33 AM