Title: CSS help? Post by: Lethn on March 03, 2014, 07:23:33 AM 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. Title: Re: CSS help? Post by: Foxpup on March 03, 2014, 07:38:48 AM Code: .store:active { Title: Re: CSS help? Post by: Lethn on March 03, 2014, 07:42:23 AM Oh for fucks sake! Thanks, now it works perfectly!
I just uploaded the changes. |