Bitcoin Forum
April 27, 2018, 04:31:10 AM *
News: Latest stable version of Bitcoin Core: 0.16.0  [Torrent]. (New!)
 
   Home   Help Search Donate Login Register  
Pages: [1]
  Print  
Author Topic: CSS help?  (Read 405 times)
Lethn
Legendary
*
Offline Offline

Activity: 1540
Merit: 1000



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

Posts: 1524803470

View Profile Personal Message (Offline)

Ignore
1524803470
Reply with quote  #2

1524803470
Report to moderator
1524803470
Hero Member
*
Offline Offline

Posts: 1524803470

View Profile Personal Message (Offline)

Ignore
1524803470
Reply with quote  #2

1524803470
Report to moderator
1524803470
Hero Member
*
Offline Offline

Posts: 1524803470

View Profile Personal Message (Offline)

Ignore
1524803470
Reply with quote  #2

1524803470
Report to moderator
Goat says: "Bitcoin is NOT Illegal in Thailand. There is no law against Bitcoin in Thailand!"
Advertised sites are not endorsed by the Bitcoin Forum. They may be unsafe, untrustworthy, or illegal in your jurisdiction. Advertise here.
Foxpup
Legendary
*
Offline Offline

Activity: 2170
Merit: 1049



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: 1540
Merit: 1000



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!