Bitcoin Forum
December 14, 2017, 05:47:20 PM *
News: Latest stable version of Bitcoin Core: 0.15.1  [Torrent].
 
   Home   Help Search Donate Login Register  
Pages: [1]
  Print  
Author Topic: CSS help?  (Read 405 times)
Lethn
Legendary
*
Offline Offline

Activity: 1484



View Profile WWW
March 03, 2014, 07:23:33 AM
 #1

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.
1513273640
Hero Member
*
Offline Offline

Posts: 1513273640

View Profile Personal Message (Offline)

Ignore
1513273640
Reply with quote  #2

1513273640
Report to moderator
Advertised sites are not endorsed by the Bitcoin Forum. They may be unsafe, untrustworthy, or illegal in your jurisdiction. Advertise here.
1513273640
Hero Member
*
Offline Offline

Posts: 1513273640

View Profile Personal Message (Offline)

Ignore
1513273640
Reply with quote  #2

1513273640
Report to moderator
1513273640
Hero Member
*
Offline Offline

Posts: 1513273640

View Profile Personal Message (Offline)

Ignore
1513273640
Reply with quote  #2

1513273640
Report to moderator
1513273640
Hero Member
*
Offline Offline

Posts: 1513273640

View Profile Personal Message (Offline)

Ignore
1513273640
Reply with quote  #2

1513273640
Report to moderator
Foxpup
Legendary
*
Offline Offline

Activity: 2044



View Profile
March 03, 2014, 07:38:48 AM
 #2

Code:
.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;
Should have a } at the end.

Will pretend to do unverifiable things (while actually eating an enchilada-style burrito) for bitcoins: 1K6d1EviQKX3SVKjPYmJGyWBb1avbmCFM4
Lethn
Legendary
*
Offline Offline

Activity: 1484



View Profile WWW
March 03, 2014, 07:42:23 AM
 #3

Oh for fucks sake! Thanks, now it works perfectly!

I just uploaded the changes.
Pages: [1]
  Print  
 
Jump to:  

Sponsored by , a Bitcoin-accepting VPN.
Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2006-2009, Simple Machines Valid XHTML 1.0! Valid CSS!